Diff
Modified: trunk/PerformanceTests/Animometer/tests/master/resources/canvas-tests.js (197229 => 197230)
--- trunk/PerformanceTests/Animometer/tests/master/resources/canvas-tests.js 2016-02-27 04:32:09 UTC (rev 197229)
+++ trunk/PerformanceTests/Animometer/tests/master/resources/canvas-tests.js 2016-02-27 04:33:30 UTC (rev 197230)
@@ -12,9 +12,9 @@
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 @@
{
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 @@
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();
}
Modified: trunk/PerformanceTests/Animometer/tests/master/resources/multiply.js (197229 => 197230)
--- trunk/PerformanceTests/Animometer/tests/master/resources/multiply.js 2016-02-27 04:32:09 UTC (rev 197229)
+++ trunk/PerformanceTests/Animometer/tests/master/resources/multiply.js 2016-02-27 04:33:30 UTC (rev 197230)
@@ -20,7 +20,7 @@
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 @@
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 @@
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 @@
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 @@
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";
}
}
});
Modified: trunk/PerformanceTests/Animometer/tests/master/resources/particles.js (197229 => 197230)
--- trunk/PerformanceTests/Animometer/tests/master/resources/particles.js 2016-02-27 04:32:09 UTC (rev 197229)
+++ trunk/PerformanceTests/Animometer/tests/master/resources/particles.js 2016-02-27 04:33:30 UTC (rev 197230)
@@ -10,14 +10,16 @@
{
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 @@
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 @@
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);
Modified: trunk/PerformanceTests/ChangeLog (197229 => 197230)
--- trunk/PerformanceTests/ChangeLog 2016-02-27 04:32:09 UTC (rev 197229)
+++ trunk/PerformanceTests/ChangeLog 2016-02-27 04:33:30 UTC (rev 197230)
@@ -1,3 +1,22 @@
+2016-02-25 Jon Lee <[email protected]>
+
+ 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 <[email protected]>
Update animation benchmark and tests
