1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
(function() {
var minimumDiameter = 30;
var sizeVariance = 20;
var travelDistance = 50;
var minBlurValue = 1;
var maxBlurValue = 10;
var opacityMultiplier = 30;
var focusDuration = 1000;
var movementDuration = 2500;
var FocusElement = Utilities.createClass(
function(stage)
{
var size = minimumDiameter + sizeVariance;
// Size and blurring are a function of depth.
this._depth = Pseudo.random();
var distance = Utilities.lerp(this._depth, 0, sizeVariance);
size -= distance;
var top = Stage.random(0, stage.size.height - size);
var left = Stage.random(0, stage.size.width - size);
this.particle = document.createElement("div");
this.particle.style.width = size + "px";
this.particle.style.height = size + "px";
this.particle.style.top = top + "px";
this.particle.style.left = left + "px";
this.particle.style.zIndex = Math.round((1 - this._depth) * 10);
var depthMultiplier = Utilities.lerp(1 - this._depth, 0.8, 1);
this._sinMultiplier = Pseudo.random() * Stage.randomSign() * depthMultiplier * travelDistance;
this._cosMultiplier = Pseudo.random() * Stage.randomSign() * depthMultiplier * travelDistance;
this.animate(stage, 0, 0);
}, {
hide: function()
{
this.particle.style.display = "none";
},
show: function()
{
this.particle.style.display = "block";
},
animate: function(stage, sinFactor, cosFactor)
{
var top = sinFactor * this._sinMultiplier;
var left = cosFactor * this._cosMultiplier;
var distance = Math.abs(this._depth - stage.focalPoint);
var blur = Utilities.lerp(distance, minBlurValue, maxBlurValue);
var opacity = Math.max(5, opacityMultiplier * (1 - distance));
Utilities.setElementPrefixedProperty(this.particle, "filter", "blur(" + blur + "px) opacity(" + opacity + "%)");
this.particle.style.transform = "translate3d(" + left + "%, " + top + "%, 0)";
}
});
var FocusStage = Utilities.createSubclass(Stage,
function()
{
Stage.call(this);
}, {
initialize: function(benchmark, options)
{
Stage.prototype.initialize.call(this, benchmark, options);
this._testElements = [];
this._offsetIndex = 0;
this.focalPoint = 0.5;
},
complexity: function()
{
return this._offsetIndex;
},
tune: function(count)
{
if (count == 0)
return;
if (count < 0) {
this._offsetIndex = Math.max(0, this._offsetIndex + count);
for (var i = this._offsetIndex; i < this._testElements.length; ++i)
this._testElements[i].hide();
return;
}
var newIndex = this._offsetIndex + count;
for (var i = this._testElements.length; i < newIndex; ++i) {
var obj = new FocusElement(this);
this._testElements.push(obj);
this.element.appendChild(obj.particle);
}
for (var i = this._offsetIndex; i < newIndex; ++i)
this._testElements[i].show();
this._offsetIndex = newIndex;
},
animate: function()
{
var time = this._benchmark.timestamp;
var sinFactor = Math.sin(time / movementDuration);
var cosFactor = Math.cos(time / movementDuration);
this.focalPoint = 0.5 + 0.5 * Math.sin(time / focusDuration);
for (var i = 0; i < this._offsetIndex; ++i)
this._testElements[i].animate(this, sinFactor, cosFactor);
}
});
var FocusBenchmark = Utilities.createSubclass(Benchmark,
function(options)
{
Benchmark.call(this, new FocusStage(), options);
}
);
window.benchmarkClass = FocusBenchmark;
}());
|
