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 3fd4efa60d556ad26c7c3096469c181adedb850e..f9a0c66a1ac01971d8ea14b500a7b1abf6f3d027 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 b04e4dd096665078d046afa928207d491a81402f..e5f613affbba91eb65c0d6986f4f149e2fcf216a 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 f25ca8f5a4d8855c202a80f21b020b592464fefa..07d3dd885d019c2e6613a4447c4ffc4c33fd7a62 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 32d47a1051d5f7f7df02c51e37b58bcc1c925383..e93cfbb5b90ea1b9efc127be8e1c7b8645da9ea6 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 49556f382eb0d39360809fc761a429467a5ef836..f6febb0081915485b99a991960e6f554fb7543ee 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 5862394f38329144e26c447030fa094fa8704fac..aa54e46b108d62e8d1f482c697f2abac106747a6 100644 (file)
@@ -1,3 +1,29 @@
+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