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