Skip to content

Commit 1ea2c46

Browse files
smfrsmfr
committed
Convert more objects within specific tests into JS classes.
1 parent b22f857 commit 1ea2c46

File tree

6 files changed

+209
-173
lines changed

6 files changed

+209
-173
lines changed

‎MotionMark/tests/core/resources/canvas-tests.js

Lines changed: 46 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@
2525

2626
// === PAINT OBJECTS ===
2727

28-
CanvasLineSegment = Utilities.createClass(
29-
function(stage)
28+
class CanvasLineSegment {
29+
constructor(stage)
3030
{
3131
var circle = Stage.randomInt(0, 3);
3232
this._color = ["#e01040", "#10c030", "#744CBA", "#e05010"][circle];
@@ -39,9 +39,9 @@ CanvasLineSegment = Utilities.createClass(
3939
this._startY = stage.circleRadius * this._sinTheta + stage.circleY[circle];
4040
this._length = Math.pow(Pseudo.random(), 8) * stage.lineLengthMaximum + stage.lineMinimum;
4141
this._segmentDirection = Pseudo.random() > 0.5 ? -1 : 1;
42-
}, {
42+
}
4343

44-
draw: function(context)
44+
draw(context)
4545
{
4646
context.strokeStyle = this._color;
4747
context.lineWidth = this._lineWidth;
@@ -54,10 +54,10 @@ CanvasLineSegment = Utilities.createClass(
5454
this._startY + this._segmentDirection * this._length * this._sinTheta);
5555
context.stroke();
5656
}
57-
});
57+
}
5858

59-
CanvasArc = Utilities.createClass(
60-
function(stage)
59+
class CanvasArc {
60+
constructor(stage)
6161
{
6262
var maxX = 6, maxY = 3;
6363
var distanceX = stage.size.x / maxX;
@@ -77,9 +77,9 @@ CanvasArc = Utilities.createClass(
7777
this._color = colors[Math.floor(Pseudo.random() * colors.length)];
7878
this._lineWidth = 1 + Math.pow(Pseudo.random(), 5) * 30;
7979
this._doStroke = Stage.randomInt(0, 3) != 0;
80-
}, {
80+
}
8181

82-
draw: function(context)
82+
draw(context)
8383
{
8484
this._startAngle += this._omega;
8585
this._endAngle += this._omega / 2;
@@ -99,13 +99,24 @@ CanvasArc = Utilities.createClass(
9999
context.fill();
100100
}
101101
}
102-
});
102+
}
103103

104104
// CanvasLinePoint contains no draw() method since it is either moveTo or
105105
// lineTo depending on its index.
106-
CanvasLinePoint = Utilities.createClass(
107-
function(stage)
106+
class CanvasLinePoint {
107+
static gridSize;
108+
static offsets;
109+
110+
constructor(stage)
108111
{
112+
CanvasLinePoint.gridSize = new Point(80, 40);
113+
CanvasLinePoint.offsets = [
114+
new Point(-4, 0),
115+
new Point(2, 0),
116+
new Point(1, -2),
117+
new Point(1, 2),
118+
];
119+
109120
var colors = ["#101010", "#808080", "#c0c0c0", "#101010", "#808080", "#c0c0c0", "#e01040"];
110121
this.color = Stage.randomElementInArray(colors);
111122
this.width = Math.pow(Pseudo.random(), 5) * 20 + 1;
@@ -115,69 +126,61 @@ CanvasLinePoint = Utilities.createClass(
115126
if (stage.objects.length)
116127
nextPoint = this.randomPoint(stage, stage.objects[stage.objects.length - 1].coordinate);
117128
else
118-
nextPoint = this.randomPoint(stage, this.gridSize.center);
129+
nextPoint = this.randomPoint(stage, CanvasLinePoint.gridSize.center);
119130
this.point = nextPoint.point;
120131
this.coordinate = nextPoint.coordinate;
121-
}, {
122-
123-
gridSize: new Point(80, 40),
124-
offsets: [
125-
new Point(-4, 0),
126-
new Point(2, 0),
127-
new Point(1, -2),
128-
new Point(1, 2),
129-
],
132+
}
130133

131-
randomPoint: function(stage, startCoordinate)
134+
randomPoint(stage, startCoordinate)
132135
{
133136
var coordinate = startCoordinate;
134137
if (stage.objects.length) {
135-
var offset = Stage.randomElementInArray(this.offsets);
138+
var offset = Stage.randomElementInArray(CanvasLinePoint.offsets);
136139

137140
coordinate = coordinate.add(offset);
138-
if (coordinate.x < 0 || coordinate.x > this.gridSize.width)
141+
if (coordinate.x < 0 || coordinate.x > CanvasLinePoint.gridSize.width)
139142
coordinate.x -= offset.x * 2;
140-
if (coordinate.y < 0 || coordinate.y > this.gridSize.height)
143+
if (coordinate.y < 0 || coordinate.y > CanvasLinePoint.gridSize.height)
141144
coordinate.y -= offset.y * 2;
142145
}
143146

144-
var x = (coordinate.x + .5) * stage.size.x / (this.gridSize.width + 1);
145-
var y = (coordinate.y + .5) * stage.size.y / (this.gridSize.height + 1);
147+
var x = (coordinate.x + .5) * stage.size.x / (CanvasLinePoint.gridSize.width + 1);
148+
var y = (coordinate.y + .5) * stage.size.y / (CanvasLinePoint.gridSize.height + 1);
146149
return {
147150
point: new Point(x, y),
148151
coordinate: coordinate
149152
};
150-
},
153+
}
151154

152-
draw: function(context)
155+
draw(context)
153156
{
154157
context.lineTo(this.point.x, this.point.y);
155158
}
156-
});
159+
}
157160

158-
CanvasQuadraticSegment = Utilities.createSubclass(CanvasLinePoint,
159-
function(stage)
161+
class CanvasQuadraticSegment extends CanvasLinePoint {
162+
constructor(stage)
160163
{
161-
CanvasLinePoint.call(this, stage);
164+
super(stage);
162165
// The chosen point is instead the control point.
163166
this._point2 = this.point;
164167

165168
// Get another random point for the actual end point of the segment.
166169
var nextPoint = this.randomPoint(stage, this.coordinate);
167170
this.point = nextPoint.point;
168171
this.coordinate = nextPoint.coordinate;
169-
}, {
172+
}
170173

171-
draw: function(context)
174+
draw(context)
172175
{
173176
context.quadraticCurveTo(this._point2.x, this._point2.y, this.point.x, this.point.y);
174177
}
175-
});
178+
}
176179

177-
CanvasBezierSegment = Utilities.createSubclass(CanvasLinePoint,
178-
function(stage)
180+
class CanvasBezierSegment extends CanvasLinePoint {
181+
constructor(stage)
179182
{
180-
CanvasLinePoint.call(this, stage);
183+
super(stage);
181184
// The chosen point is instead the first control point.
182185
this._point2 = this.point;
183186
var nextPoint = this.randomPoint(stage, this.coordinate);
@@ -186,13 +189,13 @@ CanvasBezierSegment = Utilities.createSubclass(CanvasLinePoint,
186189
nextPoint = this.randomPoint(stage, nextPoint.coordinate);
187190
this.point = nextPoint.point;
188191
this.coordinate = nextPoint.coordinate;
189-
}, {
192+
}
190193

191-
draw: function(context, off)
194+
draw(context, off)
192195
{
193196
context.bezierCurveTo(this._point2.x, this._point2.y, this._point3.x, this._point3.y, this.point.x, this.point.y);
194197
}
195-
});
198+
}
196199

197200
// === STAGES ===
198201

‎MotionMark/tests/core/resources/focus.js

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,11 @@ var opacityMultiplier = 30;
3434
var focusDuration = 1000;
3535
var movementDuration = 2500;
3636

37-
var FocusElement = Utilities.createClass(
38-
function(stage)
37+
class FocusElement {
38+
constructor(stage)
3939
{
40+
super(stage);
41+
4042
var size = minimumDiameter + sizeVariance;
4143

4244
// Size and blurring are a function of depth.
@@ -59,19 +61,19 @@ var FocusElement = Utilities.createClass(
5961
this._cosMultiplier = Pseudo.random() * Stage.randomSign() * depthMultiplier * travelDistance;
6062

6163
this.animate(stage, 0, 0);
62-
}, {
64+
}
6365

64-
hide: function()
66+
hide()
6567
{
6668
this.particle.style.display = "none";
67-
},
69+
}
6870

69-
show: function()
71+
show()
7072
{
7173
this.particle.style.display = "block";
72-
},
74+
}
7375

74-
animate: function(stage, sinFactor, cosFactor)
76+
animate(stage, sinFactor, cosFactor)
7577
{
7678
var top = sinFactor * this._sinMultiplier;
7779
var left = cosFactor * this._cosMultiplier;
@@ -82,7 +84,7 @@ var FocusElement = Utilities.createClass(
8284
Utilities.setElementPrefixedProperty(this.particle, "filter", "blur(" + blur + "px) opacity(" + opacity + "%)");
8385
this.particle.style.transform = "translate3d(" + left + "%, " + top + "%, 0)";
8486
}
85-
});
87+
}
8688

8789
class FocusStage extends Stage {
8890
constructor()

‎MotionMark/tests/dom/resources/focus.js

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,8 @@ var travelDistance = 50;
3131

3232
var opacityMultiplier = 30;
3333

34-
var FocusElement = Utilities.createClass(
35-
function(stage)
34+
class FocusElement {
35+
constructor(stage)
3636
{
3737
var size = minimumDiameter + sizeVariance;
3838

@@ -60,27 +60,27 @@ var FocusElement = Utilities.createClass(
6060
var depthMultiplier = Utilities.lerp(1 - this._depth, 0.8, 1);
6161
this._sinMultiplier = Pseudo.random() * Stage.randomSign() * depthMultiplier * travelDistance;
6262
this._cosMultiplier = Pseudo.random() * Stage.randomSign() * depthMultiplier * travelDistance;
63-
}, {
63+
}
6464

65-
hide: function()
65+
hide()
6666
{
6767
this.container.style.display = "none";
68-
},
68+
}
6969

70-
show: function()
70+
show()
7171
{
7272
this.container.style.display = "block";
73-
},
73+
}
7474

75-
animate: function(stage, sinFactor, cosFactor)
75+
animate(stage, sinFactor, cosFactor)
7676
{
7777
var top = sinFactor * this._sinMultiplier;
7878
var left = cosFactor * this._cosMultiplier;
7979

8080
Utilities.setElementPrefixedProperty(this.container, "filter", "blur(" + stage.getBlurValue(this._depth) + "px) opacity(" + stage.getOpacityValue(this._depth) + "%)");
8181
this.container.style.transform = "translate3d(" + left + "%, " + top + "%, 0)";
8282
}
83-
});
83+
}
8484

8585
class FocusStage extends Stage {
8686
static movementDuration = 2500;

‎MotionMark/tests/resources/main.js

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -849,39 +849,39 @@ class Stage {
849849
}
850850
}
851851

852-
Rotater = Utilities.createClass(
853-
function(rotateInterval)
852+
class Rotater {
853+
constructor(rotateInterval)
854854
{
855855
this._timeDelta = 0;
856856
this._rotateInterval = rotateInterval;
857857
this._isSampling = false;
858-
}, {
858+
}
859859

860860
get interval()
861861
{
862862
return this._rotateInterval;
863-
},
863+
}
864864

865-
next: function(timeDelta)
865+
next(timeDelta)
866866
{
867867
this._timeDelta = (this._timeDelta + timeDelta) % this._rotateInterval;
868-
},
868+
}
869869

870-
degree: function()
870+
degree()
871871
{
872872
return (360 * this._timeDelta) / this._rotateInterval;
873-
},
873+
}
874874

875-
rotateZ: function()
875+
rotateZ()
876876
{
877877
return "rotateZ(" + Math.floor(this.degree()) + "deg)";
878-
},
878+
}
879879

880-
rotate: function(center)
880+
rotate(center)
881881
{
882882
return "rotate(" + Math.floor(this.degree()) + ", " + center.x + "," + center.y + ")";
883883
}
884-
});
884+
}
885885

886886
class Benchmark {
887887
constructor(stage, options)

0 commit comments

Comments
 (0)