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(Math.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 = Math.random() * Stage.randomSign() * depthMultiplier;
  36         this._cosMultiplier = Math.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 }());