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