Tests: refactor and update styles.
authorjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 9 Feb 2016 03:30:42 +0000 (03:30 +0000)
committerjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 9 Feb 2016 03:30:42 +0000 (03:30 +0000)
* Animometer/tests/resources/main.js: Add helper methods that return
a color that hue rotates based on the date, and a counter value that
increases based on the date. Fix randomInt() to not bias against the min and
max values.

* Animometer/tests/master/resources/canvas-tests.js: Use new helper methods.
* Animometer/tests/master/resources/dom-particles.js: Ditto.
* Animometer/tests/master/resources/particles.js: Ditto.
* Animometer/tests/simple/resources/simple-canvas-paths.js: Refactor to
use a rotating color instead of a random color. The fast switching of color
is too vivid to watch.

* Animometer/tests/bouncing-particles/resources/bouncing-svg-shapes.js:
(BouncingSvgParticlesStage.call.createGradient): Fix the gradient so
that the last stop is located at the end.

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

PerformanceTests/Animometer/tests/bouncing-particles/resources/bouncing-svg-shapes.js
PerformanceTests/Animometer/tests/master/resources/canvas-tests.js
PerformanceTests/Animometer/tests/master/resources/dom-particles.js
PerformanceTests/Animometer/tests/master/resources/particles.js
PerformanceTests/Animometer/tests/resources/main.js
PerformanceTests/Animometer/tests/simple/resources/simple-canvas-paths.js
PerformanceTests/ChangeLog

index 5588cdc..14c917c 100644 (file)
@@ -64,7 +64,7 @@ BouncingSvgShapesStage = Utilities.createSubclass(BouncingSvgParticlesStage,
         var gradient = Utilities.createSVGElement("linearGradient", attrs, {}, this._ensureDefsIsCreated());
 
         for (var i = 0; i < stops; ++i) {
-            attrs = { offset: i * 100 / stops + "%", 'stop-color': Stage.randomColor() };
+            attrs = { offset: i * 100 / (stops - 1) + "%", 'stop-color': Stage.randomColor() };
             Utilities.createSVGElement("stop", attrs, {}, gradient);
         }
 
index 5ee2a40..edfbc6f 100644 (file)
@@ -23,7 +23,7 @@ CanvasLineSegment = Utilities.createClass(
         context.strokeStyle = this._color;
         context.lineWidth = this._lineWidth;
 
-        this._length += Math.sin(Date.now()/100*this._omega);
+        this._length += Math.sin(Stage.dateCounterValue(100) * this._omega);
 
         context.beginPath();
         context.moveTo(this._startX, this._startY);
index 256ecec..c126e14 100644 (file)
@@ -14,7 +14,7 @@ DOMParticle = Utilities.createSubclass(Particle,
         Particle.prototype.reset.call(this);
         this.element.style.width = this.size.x + "px";
         this.element.style.height = this.size.y + "px";
-        this.element.style.backgroundColor = "hsl(" + ((Date.now()/2000)%1)*360 + ", 70%, 45%)";
+        this.element.style.backgroundColor = Stage.rotatingColor(2000, .7, .45);
     },
 
     move: function()
index 69673c1..d51bf51 100644 (file)
@@ -15,7 +15,7 @@ Particle.prototype =
         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 + Date.now()/1000*this.stage.emissionSpin;
+        var angle = Stage.randomInt(0, this.stage.emitSteps) / this.stage.emitSteps * Math.PI * 2 + Stage.dateCounterValue(1000) * this.stage.emissionSpin;
         this._velocity = new Point(Math.sin(angle), Math.cos(angle))
             .multiply(Stage.random(.8, 1.2));
     },
@@ -87,7 +87,7 @@ ParticlesStage = Utilities.createSubclass(Stage,
 
     animate: function(timeDelta)
     {
-        var offset = (Date.now() / 2000) % 1;
+        var offset = Stage.dateFractionalValue();
         this.element.style.background = [
             "linear-gradient(",
             offset * 360,
index 3011e8f..4d0047f 100644 (file)
@@ -269,7 +269,7 @@ Utilities.extendObject(Stage, {
 
     randomInt: function(min, max)
     {
-        return Math.round(this.random(min, max));
+        return Math.floor(this.random(min, max + 1));
     },
 
     randomPosition: function(maxPosition)
@@ -303,6 +303,26 @@ Utilities.extendObject(Stage, {
             + this.randomInt(min, max).toString(16);
     },
 
+    rotatingColor: function(cycleLengthMs, saturation, lightness)
+    {
+        return "hsl("
+            + Stage.dateFractionalValue(cycleLengthMs) * 360 + ", "
+            + ((saturation || .8) * 100).toFixed(0) + "%, "
+            + ((lightness || .35) * 100).toFixed(0) + "%)";
+    },
+
+    // Returns a fractional value that wraps around within [0,1]
+    dateFractionalValue: function(cycleLengthMs)
+    {
+        return (Date.now() / (cycleLengthMs || 2000)) % 1;
+    },
+
+    // Returns an increasing value slowed down by factor
+    dateCounterValue: function(factor)
+    {
+        return Date.now() / factor;
+    },
+
     randomRotater: function()
     {
         return new Rotater(this.random(1000, 10000));
index 88e4c1c..88c1e88 100644 (file)
@@ -221,7 +221,7 @@ SimpleCanvasPathStrokeStage = Utilities.createSubclass(SimpleCanvasStage,
         var context = this.context;
         context.clearRect(0, 0, this.size.x, this.size.y);
         context.lineWidth = Stage.randomInt(1, 20);
-        context.strokeStyle = Stage.randomColor();
+        context.strokeStyle = Stage.rotatingColor();
         context.beginPath();
         context.moveTo(this.size.x / 2, this.size.y / 2);
         this.objects.forEach(function(object) {
@@ -240,7 +240,7 @@ SimpleCanvasPathFillStage = Utilities.createSubclass(SimpleCanvasStage,
     {
         var context = this.context;
         context.clearRect(0, 0, this.size.x, this.size.y);
-        context.fillStyle = Stage.randomColor();
+        context.fillStyle = Stage.rotatingColor();
         context.beginPath();
         context.moveTo(this.size.x / 2, this.size.y / 2);
         this.objects.forEach(function(object) {
index 35b88c4..601646b 100644 (file)
@@ -1,5 +1,25 @@
 2016-02-07  Jon Lee  <jonlee@apple.com>
 
+        Tests: refactor and update styles.
+
+        * Animometer/tests/resources/main.js: Add helper methods that return
+        a color that hue rotates based on the date, and a counter value that
+        increases based on the date. Fix randomInt() to not bias against the min and
+        max values.
+
+        * Animometer/tests/master/resources/canvas-tests.js: Use new helper methods.
+        * Animometer/tests/master/resources/dom-particles.js: Ditto.
+        * Animometer/tests/master/resources/particles.js: Ditto.
+        * Animometer/tests/simple/resources/simple-canvas-paths.js: Refactor to
+        use a rotating color instead of a random color. The fast switching of color
+        is too vivid to watch.
+
+        * Animometer/tests/bouncing-particles/resources/bouncing-svg-shapes.js:
+        (BouncingSvgParticlesStage.call.createGradient): Fix the gradient so
+        that the last stop is located at the end.
+
+2016-02-07  Jon Lee  <jonlee@apple.com>
+
         Refactor tune() to not return the complexity of the scene.
 
         We have stage.complexity() now, so returning the complexity through tune