Source code
Revision control
Copy as Markdown
Other Tools
(function() {
var MultiplyStage = Utilities.createSubclass(Stage,
function()
{
Stage.call(this);
this.tiles = [];
this._offsetIndex = 0;
}, {
initialize: function(benchmark, options)
{
Stage.prototype.initialize.call(this, benchmark, options);
var tileSize = Math.round(this.size.height / 25);
// Fill the scene with elements
var x = Math.round((this.size.width - tileSize) / 2);
var y = Math.round((this.size.height - tileSize) / 2);
var tileStride = tileSize;
var direction = 0;
var spiralCounter = 2;
var nextIndex = 1;
var maxSide = Math.floor(y / tileStride) * 2 + 1;
this._centerSpiralCount = maxSide * maxSide;
for (var i = 0; i < this._centerSpiralCount; ++i) {
this._addTile(x, y, tileSize, Stage.randomInt(0, 359));
if (i == nextIndex) {
direction = (direction + 1) % 4;
spiralCounter++;
nextIndex += spiralCounter >> 1;
}
if (direction == 0)
x += tileStride;
else if (direction == 1)
y -= tileStride;
else if (direction == 2)
x -= tileStride;
else
y += tileStride;
}
this._sidePanelCount = maxSide * Math.floor((this.size.width - x) / tileStride) * 2;
for (var i = 0; i < this._sidePanelCount; ++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.size.width - sideX - tileSize + 1;
this._addTile(sideX, sideY, tileSize, Stage.randomInt(0, 359));
}
},
_addTile: function(x, y, tileSize, rotateDeg)
{
var tile = Utilities.createElement("div", { class: "div-" + Stage.randomInt(0,6) }, this.element);
var halfTileSize = tileSize / 2;
tile.style.left = x + 'px';
tile.style.top = y + 'px';
tile.style.width = tileSize + 'px';
tile.style.height = tileSize + 'px';
tile.style.visibility = "hidden";
var distance = 1 / tileSize * this.size.multiply(0.5).subtract(new Point(x + halfTileSize, y + halfTileSize)).length();
this.tiles.push({
element: tile,
rotate: rotateDeg,
step: Math.max(3, distance / 1.5),
distance: distance,
active: false
});
},
complexity: function()
{
return this._offsetIndex;
},
tune: function(count)
{
this._offsetIndex = Math.max(0, Math.min(this._offsetIndex + count, this.tiles.length));
this._distanceFactor = 1.5 * (1 - 0.5 * Math.max(this._offsetIndex - this._centerSpiralCount, 0) / this._sidePanelCount) / Math.sqrt(this._offsetIndex);
},
animate: function()
{
var progress = this._benchmark.timestamp % 10000 / 10000;
var bounceProgress = Math.sin(2 * Math.abs( 0.5 - progress));
var l = Utilities.lerp(bounceProgress, 20, 50);
var hslPrefix = "hsla(" + Utilities.lerp(progress, 0, 360) + ",100%,";
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)";
var influence = Math.max(.01, 1 - (tile.distance * this._distanceFactor));
tile.element.style.backgroundColor = hslPrefix + l * Math.tan(influence / 1.25) + "%," + influence + ")";
}
for (var i = this._offsetIndex; i < this.tiles.length && this.tiles[i].active; ++i) {
this.tiles[i].active = false;
this.tiles[i].element.style.visibility = "hidden";
}
}
});
var MultiplyBenchmark = Utilities.createSubclass(Benchmark,
function(options)
{
Benchmark.call(this, new MultiplyStage(), options);
}
);
window.benchmarkClass = MultiplyBenchmark;
}());