Update animation benchmark and tests
authorjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 27 Feb 2016 04:33:30 +0000 (04:33 +0000)
committerjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 27 Feb 2016 04:33:30 +0000 (04:33 +0000)
https://bugs.webkit.org/show_bug.cgi?id=154673

Reviewed by Dean Jackson.

Update test visuals.

* Animometer/tests/master/resources/canvas-tests.js:
(CanvasLineSegment.Utilities.createClass): Line segments near the edge of the stage get clipped.
Update circle position and radius to minimize impact.
* Animometer/tests/master/resources/particles.js: Get rid of rotating gradient background, and
have 3 locations for emitting particles.
* Animometer/tests/master/resources/multiply.js: Update distance metric so that fringe tiles get
more color.
(initialize): Fix some of the math for laying out the tiles.
(animate): When a tile isn't used, set visibility: hidden.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@197230 268f45cc-cd09-0410-ab3c-d52691b4dbfc

PerformanceTests/Animometer/tests/master/resources/canvas-tests.js
PerformanceTests/Animometer/tests/master/resources/multiply.js
PerformanceTests/Animometer/tests/master/resources/particles.js
PerformanceTests/ChangeLog

index b1d6db7..3fd4efa 100644 (file)
@@ -12,9 +12,9 @@ CanvasLineSegment = Utilities.createClass(
         var theta = Stage.randomAngle();
         this._cosTheta = Math.cos(theta);
         this._sinTheta = Math.sin(theta);
-        this._startX = stage.circleRadius * this._cosTheta + (0.5 + circle) / 3 * stage.size.x;
-        this._startY = stage.circleRadius * this._sinTheta + stage.size.y / 2;
-        this._length = Math.pow(Pseudo.random(), 8) * 40 + 20;
+        this._startX = stage.circleRadius * this._cosTheta + stage.circleX[circle];
+        this._startY = stage.circleRadius * this._sinTheta + stage.circleY[circle];
+        this._length = Math.pow(Pseudo.random(), 8) * stage.lineLengthMaximum + stage.lineMinimum;
         this._segmentDirection = Pseudo.random() > 0.5 ? -1 : 1;
     }, {
 
@@ -131,7 +131,19 @@ CanvasLineSegmentStage = Utilities.createSubclass(SimpleCanvasStage,
     {
         SimpleCanvasStage.prototype.initialize.call(this, benchmark, options);
         this.context.lineCap = options["lineCap"] || "butt";
-        this.circleRadius = this.size.x / 3 / 2 - 20;
+        this.lineMinimum = 20;
+        this.lineLengthMaximum = 40;
+        this.circleRadius = this.size.x / 3 / 2 - .8 * (this.lineMinimum + this.lineLengthMaximum);
+        this.circleX = [
+            .55 / 3 * this.size.x,
+            1.5 / 3 * this.size.x,
+            2.45 / 3 * this.size.x
+        ];
+        this.circleY = [
+            .6 * this.size.y,
+            .4 * this.size.y,
+            .6 * this.size.y
+        ];
     },
 
     animate: function()
@@ -144,7 +156,7 @@ CanvasLineSegmentStage = Utilities.createSubclass(SimpleCanvasStage,
             context.strokeStyle = ["#e01040", "#10c030", "#e05010"][i];
             context.fillStyle = ["#70051d", "#016112", "#702701"][i];
             context.beginPath();
-                context.arc((0.5 + i) / 3 * this.size.x, this.size.y/2, this.circleRadius, 0, Math.PI*2);
+                context.arc(this.circleX[i], this.circleY[i], this.circleRadius, 0, Math.PI*2);
             context.stroke();
             context.fill();
         }
index ceef273..7bcfb02 100644 (file)
@@ -20,7 +20,7 @@ var MultiplyStage = Utilities.createSubclass(Stage,
         var direction = 0;
         var spiralCounter = 2;
         var nextIndex = 1;
-        var maxSide = Math.floor(this.size.height / tileStride);
+        var maxSide = Math.floor(y / tileStride) * 2 + 1;
         var centerSpiralCount = maxSide * maxSide;
         for (var i = 0; i < centerSpiralCount; ++i) {
             this._addTile(x, y, tileSize, i % 360);
@@ -40,13 +40,13 @@ var MultiplyStage = Utilities.createSubclass(Stage,
                 y += tileStride;
         }
 
-        centerSpiralCount = maxSide * (maxSide + (maxSide & 1));
+        centerSpiralCount = maxSide * Math.floor((this.size.width - x) / tileStride) * 2;
         for (var i = 0; i < centerSpiralCount; ++i) {
             var sideX = x + Math.floor(Math.floor(i / maxSide) / 2) * tileStride;
             var sideY = y - tileStride * (i % maxSide);
 
             if (Math.floor(i / maxSide) % 2 == 1)
-                sideX = this.width - sideX - tileSize + 1;
+                sideX = this.size.width - sideX - tileSize + 1;
             this._addTile(sideX, sideY, tileSize, (6 * i) % 360);
         }
     },
@@ -59,8 +59,9 @@ var MultiplyStage = Utilities.createSubclass(Stage,
         tile.style.top = y + 'px';
         tile.style.width = tileSize + 'px';
         tile.style.height = tileSize + 'px';
+        tile.style.visibility = "hidden";
 
-        var distance = 1.5 / tileSize * this.size.multiply(0.5).subtract(new Point(x + halfTileSize, y + halfTileSize)).length();
+        var distance = 1.3 / tileSize * this.size.multiply(0.5).subtract(new Point(x + halfTileSize, y + halfTileSize)).length();
 
         this.tiles.push({
             element: tile,
@@ -93,6 +94,7 @@ var MultiplyStage = Utilities.createSubclass(Stage,
         for (var i = 0; i < this._offsetIndex; ++i) {
             var tile = this.tiles[i];
             tile.active = true;
+            tile.element.style.visibility = "";
             tile.rotate += tile.step;
             tile.element.style.transform = "rotate(" + tile.rotate + "deg)";
 
@@ -102,7 +104,7 @@ var MultiplyStage = Utilities.createSubclass(Stage,
 
         for (var i = this._offsetIndex; i < this.tiles.length && this.tiles[i].active; ++i) {
             this.tiles[i].active = false;
-            this.tiles[i].element.style.backgroundColor = "";
+            this.tiles[i].element.style.visibility = "hidden";
         }
     }
 });
index d251a60..2f49d80 100644 (file)
@@ -10,14 +10,16 @@ Particle.prototype =
 {
     reset: function()
     {
-        var randSize = Math.pow(Pseudo.random(), 4) * 25 + 15;
+        var randSize = Math.pow(Pseudo.random(), 4) * 10 + 40;
         this.size = new Point(randSize, randSize);
         this.maxPosition = this.stage.size.subtract(this.size);
-        this.position = new Point(this.stage.size.x / 2, this.stage.size.y / 4);
 
-        var angle = Stage.randomInt(0, this.stage.emitSteps) / this.stage.emitSteps * Math.PI * 2 + Stage.dateCounterValue(1000) * this.stage.emissionSpin;
+        var emitLocation = this.stage.emitLocation[Stage.randomInt(0, this.stage.emitLocation.length - 1)];
+        this.position = new Point(emitLocation.x, emitLocation.y);
+
+        var angle = Stage.randomInt(0, this.stage.emitSteps) / this.stage.emitSteps * Math.PI * 2 + Stage.dateCounterValue(100) * this.stage.emissionSpin;
         this._velocity = new Point(Math.sin(angle), Math.cos(angle))
-            .multiply(Stage.random(.8, 1.2));
+            .multiply(Stage.random(.5, 2.5));
     },
 
     animate: function(timeDelta)
@@ -28,7 +30,6 @@ Particle.prototype =
         this._velocity.y += 0.03;
 
         // If particle is going to move off right side
-        var maxX = this.stage.size.x - this.size.x;
         if (this.position.x > this.maxPosition.x) {
             if (this._velocity.x > 0)
                 this._velocity.x *= -1;
@@ -83,21 +84,16 @@ ParticlesStage = Utilities.createSubclass(Stage,
         Stage.prototype.initialize.call(this, benchmark, options);
         this.emissionSpin = Stage.random(0, 3);
         this.emitSteps = Stage.randomInt(4, 6);
+        this.emitLocation = [
+            new Point(this.size.x * .25, this.size.y * .333),
+            new Point(this.size.x * .5, this.size.y * .25),
+            new Point(this.size.x * .75, this.size.y * .333)
+        ];
     },
 
     animate: function(timeDelta)
     {
         var offset = Stage.dateFractionalValue();
-        this.element.style.background = [
-            "linear-gradient(",
-            offset * 360,
-            "deg, hsl(",
-            offset * 360,
-            ", 50%, 80%), hsl(",
-            (offset + .1) * 360,
-            ", 50%, 80%))"
-        ].join("");
-
         timeDelta /= 4;
         this.particles.forEach(function(particle) {
             particle.animate(timeDelta);
index 6029ac4..36ae66e 100644 (file)
@@ -1,3 +1,22 @@
+2016-02-25  Jon Lee  <jonlee@apple.com>
+
+        Update animation benchmark and tests
+        https://bugs.webkit.org/show_bug.cgi?id=154673
+
+        Reviewed by Dean Jackson.
+
+        Update test visuals.
+
+        * Animometer/tests/master/resources/canvas-tests.js:
+        (CanvasLineSegment.Utilities.createClass): Line segments near the edge of the stage get clipped.
+        Update circle position and radius to minimize impact.
+        * Animometer/tests/master/resources/particles.js: Get rid of rotating gradient background, and
+        have 3 locations for emitting particles.
+        * Animometer/tests/master/resources/multiply.js: Update distance metric so that fringe tiles get
+        more color.
+        (initialize): Fix some of the math for laying out the tiles.
+        (animate): When a tile isn't used, set visibility: hidden.
+
 2016-02-24  Jon Lee  <jonlee@apple.com>
 
         Update animation benchmark and tests