Enhance existing Animometer tests
authorjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 10 Mar 2016 01:38:50 +0000 (01:38 +0000)
committerjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 10 Mar 2016 01:38:50 +0000 (01:38 +0000)
https://bugs.webkit.org/show_bug.cgi?id=155261

Reviewed by Simon Fraser.

* Animometer/tests/master/resources/canvas-tests.js: Add a gradient to
the filled circles. To expose more of the gradient, add another circle.
(SimpleCanvasStage.call.animate): For each frame, create a gradient with
undulating stop points and colors. Fill the circles twice; once with
the solid color, and once with the gradient.

* Animometer/tests/master/resources/dom-particles.js: Refactor the
emission variables into a separate stage for this test. Add a colorOffset
variable to make the colors of each particle slightly different, since
the ramp controller can add large numbers of particles all at once, which
would otherwise get all the same color.
* Animometer/tests/master/resources/particles.js:
(initialize): Remove the code specific to the SVG mask test.

* Animometer/tests/master/resources/image-data.js:
(initialize): Remove unused local variable.
* Animometer/tests/master/resources/multiply.js:
(initialize): Make the test harder by adding more total particles.

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

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

index 3fd4efa..f9a0c66 100644 (file)
@@ -5,8 +5,8 @@
 CanvasLineSegment = Utilities.createClass(
     function(stage)
     {
-        var circle = Stage.randomInt(0, 2);
-        this._color = ["#e01040", "#10c030", "#e05010"][circle];
+        var circle = Stage.randomInt(0, 3);
+        this._color = ["#e01040", "#10c030", "#744CBA", "#e05010"][circle];
         this._lineWidth = Math.pow(Pseudo.random(), 12) * 20 + 3;
         this._omega = Pseudo.random() * 3 + 0.2;
         var theta = Stage.randomAngle();
@@ -133,32 +133,53 @@ CanvasLineSegmentStage = Utilities.createSubclass(SimpleCanvasStage,
         this.context.lineCap = options["lineCap"] || "butt";
         this.lineMinimum = 20;
         this.lineLengthMaximum = 40;
-        this.circleRadius = this.size.x / 3 / 2 - .8 * (this.lineMinimum + this.lineLengthMaximum);
+        this.circleRadius = this.size.x / 8 - .4 * (this.lineMinimum + this.lineLengthMaximum);
         this.circleX = [
-            .55 / 3 * this.size.x,
-            1.5 / 3 * this.size.x,
-            2.45 / 3 * this.size.x
+            5.5 / 32 * this.size.x,
+            12.5 / 32 * this.size.x,
+            19.5 / 32 * this.size.x,
+            26.5 / 32 * this.size.x,
         ];
         this.circleY = [
-            .6 * this.size.y,
-            .4 * this.size.y,
-            .6 * this.size.y
+            2.1 / 3 * this.size.y,
+            0.9 / 3 * this.size.y,
+            2.1 / 3 * this.size.y,
+            0.9 / 3 * this.size.y
         ];
+        this.halfSize = this.size.multiply(.5);
+        this.twoFifthsSizeX = this.size.x * .4;
     },
 
     animate: function()
     {
         var context = this.context;
-
         context.clearRect(0, 0, this.size.x, this.size.y);
-        context.lineWidth = 30;
-        for(var i = 0; i < 3; i++) {
-            context.strokeStyle = ["#e01040", "#10c030", "#e05010"][i];
-            context.fillStyle = ["#70051d", "#016112", "#702701"][i];
+
+        var angle = Stage.dateFractionalValue(3000) * Math.PI * 2;
+        var dx = this.twoFifthsSizeX * Math.cos(angle);
+        var dy = this.twoFifthsSizeX * Math.sin(angle);
+
+        var gradient = context.createLinearGradient(this.halfSize.x + dx, this.halfSize.y + dy, this.halfSize.x - dx, this.halfSize.y - dy);
+        var gradientStep = 0.5 + 0.5 * Math.sin(Stage.dateFractionalValue(5000) * Math.PI * 2);
+        var colorStopStep = Utilities.lerp(gradientStep, -.1, .1);
+        var brightnessStep = Math.round(Utilities.lerp(gradientStep, 32, 64));
+        var color1Step = "rgba(" + brightnessStep + "," + brightnessStep + "," + (brightnessStep << 1) + ",.4)";
+        var color2Step = "rgba(" + (brightnessStep << 1) + "," + (brightnessStep << 1) + "," + brightnessStep + ",.4)";
+        gradient.addColorStop(0, color1Step);
+        gradient.addColorStop(.2 + colorStopStep, color1Step);
+        gradient.addColorStop(.8 - colorStopStep, color2Step);
+        gradient.addColorStop(1, color2Step);
+
+        context.lineWidth = 15;
+        for(var i = 0; i < 4; i++) {
+            context.strokeStyle = ["#e01040", "#10c030", "#744CBA", "#e05010"][i];
+            context.fillStyle = ["#70051d", "#016112", "#2F0C6E", "#702701"][i];
             context.beginPath();
                 context.arc(this.circleX[i], this.circleY[i], this.circleRadius, 0, Math.PI*2);
-            context.stroke();
-            context.fill();
+                context.stroke();
+                context.fill();
+            context.fillStyle = gradient;
+                context.fill();
         }
 
         for (var i = this.offsetIndex, length = this.objects.length; i < length; ++i)
index b04e4dd..e5f613a 100644 (file)
@@ -22,7 +22,8 @@ DOMParticle = Utilities.createSubclass(Particle,
 
         this.element.style.width = this.size.x + "px";
         this.element.style.height = this.size.y + "px";
-        this.element.style.backgroundColor = Stage.rotatingColor(2000, .7, .45);
+        this.stage.colorOffset = (this.stage.colorOffset + 1) % 360;
+        this.element.style.backgroundColor = "hsl(" + this.stage.colorOffset + ", 70%, 45%)";
     },
 
     move: function()
@@ -31,7 +32,25 @@ DOMParticle = Utilities.createSubclass(Particle,
     }
 });
 
-Utilities.extendObject(ParticlesStage.prototype, {
+DOMParticleStage = Utilities.createSubclass(ParticlesStage,
+    function()
+    {
+        ParticlesStage.call(this);
+    }, {
+
+    initialize: function(benchmark)
+    {
+        ParticlesStage.prototype.initialize.call(this, benchmark);
+        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)
+        ];
+        this.colorOffset = Stage.randomInt(0, 359);
+    },
+
     createParticle: function()
     {
         return new DOMParticle(this);
@@ -43,13 +62,13 @@ Utilities.extendObject(ParticlesStage.prototype, {
     }
 });
 
-ParticlesBenchmark = Utilities.createSubclass(Benchmark,
+DOMParticleBenchmark = Utilities.createSubclass(Benchmark,
     function(options)
     {
-        Benchmark.call(this, new ParticlesStage(), options);
+        Benchmark.call(this, new DOMParticleStage(), options);
     }
 );
 
-window.benchmarkClass = ParticlesBenchmark;
+window.benchmarkClass = DOMParticleBenchmark;
 
 })();
index f25ca8f..07d3dd8 100644 (file)
@@ -35,8 +35,6 @@ var ImageDataStage = Utilities.createSubclass(Stage,
     {
         Stage.prototype.initialize.call(this, benchmark);
 
-        var waitForLoad = new SimplePromise;
-
         var lastPromise;
         var images = this.images;
         this.imageSrcs.forEach(function(imageSrc) {
index 32d47a1..e93cfbb 100644 (file)
@@ -11,7 +11,7 @@ var MultiplyStage = Utilities.createSubclass(Stage,
     initialize: function(benchmark, options)
     {
         Stage.prototype.initialize.call(this, benchmark, options);
-        var tileSize = Math.round(this.size.height / 20);
+        var tileSize = Math.round(this.size.height / 25);
 
         // Fill the scene with elements
         var x = Math.round((this.size.width - tileSize) / 2);
index 49556f3..f6febb0 100644 (file)
@@ -75,18 +75,6 @@ ParticlesStage = Utilities.createSubclass(Stage,
         this.particles = [];
     }, {
 
-    initialize: function(benchmark)
-    {
-        Stage.prototype.initialize.call(this, benchmark);
-        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)
     {
         timeDelta /= 4;
index 5862394..aa54e46 100644 (file)
@@ -1,5 +1,31 @@
 2016-03-09  Jon Lee  <jonlee@apple.com>
 
+        Enhance existing Animometer tests
+        https://bugs.webkit.org/show_bug.cgi?id=155261
+
+        Reviewed by Simon Fraser.
+
+        * Animometer/tests/master/resources/canvas-tests.js: Add a gradient to
+        the filled circles. To expose more of the gradient, add another circle.
+        (SimpleCanvasStage.call.animate): For each frame, create a gradient with
+        undulating stop points and colors. Fill the circles twice; once with
+        the solid color, and once with the gradient.
+
+        * Animometer/tests/master/resources/dom-particles.js: Refactor the
+        emission variables into a separate stage for this test. Add a colorOffset
+        variable to make the colors of each particle slightly different, since
+        the ramp controller can add large numbers of particles all at once, which
+        would otherwise get all the same color.
+        * Animometer/tests/master/resources/particles.js:
+        (initialize): Remove the code specific to the SVG mask test.
+
+        * Animometer/tests/master/resources/image-data.js:
+        (initialize): Remove unused local variable.
+        * Animometer/tests/master/resources/multiply.js:
+        (initialize): Make the test harder by adding more total particles.
+
+2016-03-09  Jon Lee  <jonlee@apple.com>
+
         Add text tests
         https://bugs.webkit.org/show_bug.cgi?id=155257