Convert Particle and subclasses to use JS class syntax.

Author: smfr

MotionMark/tests/bouncing-particles/resources/bouncing-canvas-images.js

@@ -23,21 +23,21 @@
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-BouncingCanvasImage = Utilities.createSubclass(BouncingCanvasParticle,
-    function(stage)
+class BouncingCanvasImage extends BouncingCanvasParticle {
+    constructor(stage)
     {
-        BouncingCanvasParticle.call(this, stage, "image");
+        super(stage, "image");
         this._imageElement = stage.imageElement;
-    }, {
+    }
 
-    _draw: function()
+    _draw()
     {
         this.context.save();
             this.applyRotation();
             this.context.drawImage(this._imageElement, 0, 0, this.size.x, this.size.y);
         this.context.restore();
     }
-});
+}
 
 class BouncingCanvasImagesStage extends BouncingCanvasParticlesStage {
     constructor()

MotionMark/tests/bouncing-particles/resources/bouncing-canvas-particles.js

@@ -22,26 +22,43 @@
  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
-BouncingCanvasParticle = Utilities.createSubclass(BouncingParticle,
-    function(stage, shape)
+
+class BouncingCanvasParticle extends BouncingParticle {
+    static clips;
+    constructor(stage, shape)
     {
-        BouncingParticle.call(this, stage);
+        BouncingCanvasParticle.clips = {
+            star: [
+                new Point(0.50, 0.00),
+                new Point(0.38, 0.38),
+                new Point(0.00, 0.38),
+                new Point(0.30, 0.60),
+                new Point(0.18, 1.00),
+                new Point(0.50, 0.75),
+                new Point(0.82, 1.00),
+                new Point(0.70, 0.60),
+                new Point(1.00, 0.38),
+                new Point(0.62, 0.38)
+            ]
+        };
+
+        super(stage);
         this.context = stage.context;
         this._shape = shape;
         this._clip = stage.clip;
-    }, {
+    }
 
-    applyRotation: function()
+    applyRotation()
     {
         if (this._shape == "circle")
             return;
 
         this.context.translate(this.size.x / 2, this.size.y / 2);
         this.context.rotate(this.rotater.degree() * Math.PI / 180);
         this.context.translate(-this.size.x / 2, -this.size.y / 2);
-    },
+    }
 
-    applyClipping: function()
+    applyClipping()
     {
         var clipPoints = BouncingCanvasParticle.clips[this._clip];
         if (!clipPoints)
@@ -58,37 +75,22 @@ BouncingCanvasParticle = Utilities.createSubclass(BouncingParticle,
 
         this.context.closePath();
         this.context.clip();
-    },
+    }
 
-    _draw: function()
+    _draw()
     {
         throw "Not implemented";
-    },
+    }
 
-    animate: function(timeDelta)
+    animate(timeDelta)
     {
-        BouncingParticle.prototype.animate.call(this, timeDelta);
+        super.animate(timeDelta);
         this.context.save();
             this.context.translate(this.position.x, this.position.y);
             this._draw();
         this.context.restore();
     }
-});
-
-BouncingCanvasParticle.clips = {
-    star: [
-        new Point(0.50, 0.00),
-        new Point(0.38, 0.38),
-        new Point(0.00, 0.38),
-        new Point(0.30, 0.60),
-        new Point(0.18, 1.00),
-        new Point(0.50, 0.75),
-        new Point(0.82, 1.00),
-        new Point(0.70, 0.60),
-        new Point(1.00, 0.38),
-        new Point(0.62, 0.38)
-    ]
-};
+}
 
 class BouncingCanvasParticlesStage extends BouncingParticlesStage {
     constructor()

MotionMark/tests/bouncing-particles/resources/bouncing-canvas-shapes.js

@@ -23,16 +23,16 @@
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-BouncingCanvasShape = Utilities.createSubclass(BouncingCanvasParticle,
-    function(stage)
+class BouncingCanvasShape extends BouncingCanvasParticle {
+    constructor(stage)
     {
-        BouncingCanvasParticle.call(this, stage, stage.shape);
+        super(stage, stage.shape);
         this._fill = stage.fill;
         this._color0 = Stage.randomColor();
         this._color1 = Stage.randomColor();
-    }, {
+    }
 
-    _applyFill: function()
+    _applyFill()
     {
         switch (this._fill) {
         case "gradient":
@@ -47,9 +47,9 @@ BouncingCanvasShape = Utilities.createSubclass(BouncingCanvasParticle,
             this.context.fillStyle = this._color0;
             break;
         }
-    },
+    }
 
-    _drawShape: function()
+    _drawShape()
     {
         this.context.beginPath();
 
@@ -67,9 +67,9 @@ BouncingCanvasShape = Utilities.createSubclass(BouncingCanvasParticle,
         }
 
         this.context.fill();
-    },
+    }
 
-    _draw: function()
+    _draw()
     {
         this.context.save();
             this._applyFill();
@@ -78,7 +78,7 @@ BouncingCanvasShape = Utilities.createSubclass(BouncingCanvasParticle,
             this._drawShape();
         this.context.restore();
     }
-});
+}
 
 class BouncingCanvasShapesStage extends BouncingCanvasParticlesStage {
     constructor ()

MotionMark/tests/bouncing-particles/resources/bouncing-css-images.js

@@ -23,10 +23,10 @@
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-BouncingCssImage = Utilities.createSubclass(BouncingParticle,
-    function(stage)
+class BouncingCssImage extends BouncingParticle {
+    constructor(stage)
     {
-        BouncingParticle.call(this, stage);
+        super(stage);
 
         this.element = document.createElement("img");
         this.element.style.width = this.size.x + "px";
@@ -35,19 +35,19 @@ BouncingCssImage = Utilities.createSubclass(BouncingParticle,
 
         stage.element.appendChild(this.element);
         this._move();
-    }, {
+    }
 
-    _move: function()
+    _move()
     {
         this.element.style.transform = "translate(" + this.position.x + "px," + this.position.y + "px) " + this.rotater.rotateZ();
-    },
+    }
 
-    animate: function(timeDelta)
+    animate(timeDelta)
     {
-        BouncingParticle.prototype.animate.call(this, timeDelta);
+        super.animate(timeDelta);
         this._move();
     }
-});
+}
 
 class BouncingCssImagesStage extends BouncingParticlesStage {
     constructor()

MotionMark/tests/bouncing-particles/resources/bouncing-css-shapes.js

@@ -23,10 +23,10 @@
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-BouncingCssShape = Utilities.createSubclass(BouncingParticle,
-    function(stage)
+class BouncingCssShape extends BouncingParticle {
+    constructor(stage)
     {
-        BouncingParticle.call(this, stage);
+        super(stage);
 
         this.element = this._createSpan(stage);
 
@@ -49,30 +49,30 @@ BouncingCssShape = Utilities.createSubclass(BouncingParticle,
             Utilities.setElementPrefixedProperty(this.element, "filter", Stage.randomStyleFilter());
 
         this._move();
-    }, {
+    }
 
-    _createSpan: function(stage)
+    _createSpan(stage)
     {
         var span = document.createElement("span");
         span.className = stage.shape + " " + stage.clip;
         span.style.width = this.size.x + "px";
         span.style.height = this.size.y + "px";
         stage.element.appendChild(span);
         return span;
-    },
+    }
 
-    _move: function()
+    _move()
     {
         this.element.style.transform = "translate(" + this.position.x + "px," + this.position.y + "px)" + this.rotater.rotateZ();
-    },
+    }
 
-    animate: function(timeDelta)
+    animate(timeDelta)
     {
-        BouncingParticle.prototype.animate.call(this, timeDelta);
+        super.animate(timeDelta);
         this.rotater.next(timeDelta);
         this._move();
     }
-});
+}
 
 class BouncingCssShapesStage extends BouncingParticlesStage {
     constructor()

MotionMark/tests/bouncing-particles/resources/bouncing-particles.js

@@ -23,25 +23,24 @@
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-function BouncingParticle(stage)
-{
-    this._stageSize = stage.size;
-    this.size = stage.particleSize;
-
-    this.position = Stage.randomPosition(stage.size.subtract(stage.particleSize));
-    this._angle = Stage.randomAngle();
-    this._velocity = Stage.randomVelocity(stage.maxVelocity);
-    this.rotater = Stage.randomRotater();
-}
+class BouncingParticle {
+    constructor(stage)
+    {
+        this._stageSize = stage.size;
+        this.size = stage.particleSize;
+
+        this.position = Stage.randomPosition(stage.size.subtract(stage.particleSize));
+        this._angle = Stage.randomAngle();
+        this._velocity = Stage.randomVelocity(stage.maxVelocity);
+        this.rotater = Stage.randomRotater();
+    }
 
-BouncingParticle.prototype =
-{
     get center()
     {
         return this.position.add(this.size.center);
-    },
+    }
 
-    animate: function(timeDelta)
+    animate(timeDelta)
     {
         this.position = this.position.move(this._angle, this._velocity, timeDelta);
         this.rotater.next(timeDelta);

MotionMark/tests/bouncing-particles/resources/bouncing-svg-images.js

@@ -23,17 +23,17 @@
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-BouncingSvgImage = Utilities.createSubclass(BouncingSvgParticle,
-    function(stage)
+class BouncingSvgImage extends BouncingSvgParticle {
+    constructor(stage)
     {
-        BouncingSvgParticle.call(this, stage, "image");
+        super(stage, "image");
 
         var attrs = { x: 0, y: 0, width: this.size.x, height: this.size.y };
         var xlinkAttrs = { href: stage.imageSrc };
         this.element = Utilities.createSVGElement("image", attrs, xlinkAttrs, stage.element);
         this._move();
     }
-);
+)
 
 class BouncingSvgImagesStage extends BouncingSvgParticlesStage {
     constructor()

MotionMark/tests/bouncing-particles/resources/bouncing-svg-particles.js

@@ -22,36 +22,37 @@
  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
-BouncingSvgParticle = Utilities.createSubclass(BouncingParticle,
-    function(stage, shape)
+
+class BouncingSvgParticle extends BouncingParticle {
+    constructor(stage, shape)
     {
-        BouncingParticle.call(this, stage);
+        super(stage);
         this._shape = shape;
-    }, {
+    }
 
-    _applyClipping: function(stage)
+    _applyClipping(stage)
     {
         if (stage.clip != "star")
             return;
 
         stage.ensureClipStarIsCreated();
         this.element.setAttribute("clip-path", "url(#star-clip)");
-    },
+    }
 
-    _move: function()
+    _move()
     {
         var transform = "translate(" + this.position.x + ", " + this.position.y + ")";
         if (this._shape != "circle")
             transform += this.rotater.rotate(this.size.center);
         this.element.setAttribute("transform", transform);
-    },
+    }
 
-    animate: function(timeDelta)
+    animate(timeDelta)
     {
-        BouncingParticle.prototype.animate.call(this, timeDelta);
+        super.animate(timeDelta);
         this._move();
     }
-});
+}
 
 class BouncingSvgParticlesStage extends BouncingParticlesStage {
     constructor()