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