Improvements to Animometer benchmark
[WebKit-https.git] / PerformanceTests / Animometer / tests / master / resources / focus.js
1 (function() {
2
3 var maxVerticalOffset = 50;
4 var minimumDiameter = 30;
5 var centerDiameter = 90;
6 var sizeVariance = 60;
7 var travelDistance = 50;
8
9 var opacityMultiplier = 30;
10
11 var FocusElement = Utilities.createClass(
12     function(stage)
13     {
14         var size = minimumDiameter + sizeVariance;
15
16         // size and blurring are a function of depth
17         this._depth = Pseudo.random();
18         var distance = Utilities.lerp(this._depth, 0, sizeVariance);
19         size -= distance;
20
21         var top = Stage.random(0, stage.size.height - size) - stage.maxBlurValue * 3;
22         var left = Stage.random(0, stage.size.width - size) - stage.maxBlurValue * 3;
23
24         this.container = document.createElement('div');
25         this.container.style.width = (size + stage.maxBlurValue * 6) + "px";
26         this.container.style.height = (size + stage.maxBlurValue * 6) + "px";
27         this.container.style.top = top + "px";
28         this.container.style.left = left + "px";
29         this.container.style.zIndex = Math.round((1 - this._depth) * 10);
30
31         this.particle = Utilities.createElement("div", {}, this.container);
32         this.particle.style.width = size + "px";
33         this.particle.style.height = size + "px";
34         this.particle.style.top = (stage.maxBlurValue * 3) + "px";
35         this.particle.style.left = (stage.maxBlurValue * 3) + "px";
36
37         var depthMultiplier = Utilities.lerp(1 - this._depth, 0.8, 1);
38         this._sinMultiplier = Pseudo.random() * Stage.randomSign() * depthMultiplier * travelDistance;
39         this._cosMultiplier = Pseudo.random() * Stage.randomSign() * depthMultiplier * travelDistance;
40     }, {
41
42     hide: function()
43     {
44         this.container.style.display = "none";
45     },
46
47     show: function()
48     {
49         this.container.style.display = "block";
50     },
51
52     animate: function(stage, sinFactor, cosFactor)
53     {
54         var top = sinFactor * this._sinMultiplier;
55         var left = cosFactor * this._cosMultiplier;
56
57         Utilities.setElementPrefixedProperty(this.container, "filter", "blur(" + stage.getBlurValue(this._depth) + "px) opacity(" + stage.getOpacityValue(this._depth) + "%)");
58         this.container.style.transform = "translate3d(" + left + "%, " + top + "%, 0)";
59     }
60 });
61
62 var FocusStage = Utilities.createSubclass(Stage,
63     function()
64     {
65         Stage.call(this);
66     }, {
67
68     movementDuration: 2500,
69     focusDuration: 1000,
70
71     centerObjectDepth: 0.0,
72
73     minBlurValue: 1.5,
74     maxBlurValue: 15,
75     maxCenterObjectBlurValue: 5,
76
77     initialize: function(benchmark, options)
78     {
79         Stage.prototype.initialize.call(this, benchmark, options);
80
81         this._testElements = [];
82         this._focalPoint = 0.5;
83         this._offsetIndex = 0;
84
85         this._centerElement = document.getElementById("center-text");
86         this._centerElement.style.width = (centerDiameter + this.maxCenterObjectBlurValue * 6) + "px";
87         this._centerElement.style.height = (centerDiameter + this.maxCenterObjectBlurValue * 6) + "px";
88         this._centerElement.style.zIndex = Math.round(10 * this.centerObjectDepth);
89
90         var particle = document.querySelector("#center-text div");
91         particle.style.width = centerDiameter + "px";
92         particle.style.height = centerDiameter + "px";
93         particle.style.top = (this.maxCenterObjectBlurValue * 3) + "px";
94         particle.style.left = (this.maxCenterObjectBlurValue * 3) + "px";
95
96         var blur = this.getBlurValue(this.centerObjectDepth, true);
97         Utilities.setElementPrefixedProperty(this._centerElement, "filter", "blur(" + blur + "px)");
98     },
99
100     complexity: function()
101     {
102         return 1 + this._offsetIndex;
103     },
104
105     tune: function(count)
106     {
107         if (count == 0)
108             return;
109
110         if (count < 0) {
111             this._offsetIndex = Math.max(0, this._offsetIndex + count);
112             for (var i = this._offsetIndex; i < this._testElements.length; ++i)
113                 this._testElements[i].hide();
114             return;
115         }
116
117         var newIndex = this._offsetIndex + count;
118         for (var i = this._testElements.length; i < newIndex; ++i) {
119             var obj = new FocusElement(this);
120             this._testElements.push(obj);
121             this.element.appendChild(obj.container);
122         }
123         for (var i = this._offsetIndex; i < newIndex; ++i)
124             this._testElements[i].show();
125         this._offsetIndex = newIndex;
126     },
127
128     animate: function()
129     {
130         var time = this._benchmark.timestamp;
131         var sinFactor = Math.sin(time / this.movementDuration);
132         var cosFactor = Math.cos(time / this.movementDuration);
133
134         var focusProgress = 0.5 + 0.5 * Math.sin(time / this.focusDuration);
135         this._focalPoint = focusProgress;
136
137         // update center element before loop
138         Utilities.setElementPrefixedProperty(this._centerElement, "filter", "blur(" + this.getBlurValue(this.centerObjectDepth, true) + "px)");
139
140         for (var i = 0; i < this._offsetIndex; ++i)
141             this._testElements[i].animate(this, sinFactor, cosFactor);
142     },
143
144     getBlurValue: function(depth, isCenter)
145     {
146         if (isCenter)
147             return 1 + Math.abs(depth - this._focalPoint) * (this.maxCenterObjectBlurValue - 1);
148
149         return Utilities.lerp(Math.abs(depth - this._focalPoint), this.minBlurValue, this.maxBlurValue);
150     },
151
152     getOpacityValue: function(depth)
153     {
154         return Math.max(1, opacityMultiplier * (1 - Math.abs(depth - this._focalPoint)));
155     },
156 });
157
158 var FocusBenchmark = Utilities.createSubclass(Benchmark,
159     function(options)
160     {
161         Benchmark.call(this, new FocusStage(), options);
162     }
163 );
164
165 window.benchmarkClass = FocusBenchmark;
166
167 }());