focus.js - mozsearch

Enable keyboard shortcuts

(function() {

var minimumDiameter = 30;

var sizeVariance = 20;

var travelDistance = 50;

var minBlurValue = 1;

var maxBlurValue = 10;

var opacityMultiplier = 30;

var focusDuration = 1000;

var movementDuration = 2500;

var FocusElement = Utilities.createClass(

    function(stage)

        var size = minimumDiameter + sizeVariance;

        // Size and blurring are a function of depth.

        this._depth = Pseudo.random();

        var distance = Utilities.lerp(this._depth, 0, sizeVariance);

        size -= distance;

        var top = Stage.random(0, stage.size.height - size);

        var left = Stage.random(0, stage.size.width - size);

        this.particle = document.createElement("div");

        this.particle.style.width = size + "px";

        this.particle.style.height = size + "px";

        this.particle.style.top = top + "px";

        this.particle.style.left = left + "px";

        this.particle.style.zIndex = Math.round((1 - this._depth) * 10);

        var depthMultiplier = Utilities.lerp(1 - this._depth, 0.8, 1);

        this._sinMultiplier = Pseudo.random() * Stage.randomSign() * depthMultiplier * travelDistance;

        this._cosMultiplier = Pseudo.random() * Stage.randomSign() * depthMultiplier * travelDistance;

        this.animate(stage, 0, 0);

    }, {

    hide: function()

        this.particle.style.display = "none";

},

    show: function()

        this.particle.style.display = "block";

},

    animate: function(stage, sinFactor, cosFactor)

        var top = sinFactor * this._sinMultiplier;

        var left = cosFactor * this._cosMultiplier;

        var distance = Math.abs(this._depth - stage.focalPoint);

        var blur = Utilities.lerp(distance, minBlurValue, maxBlurValue);

        var opacity = Math.max(5, opacityMultiplier * (1 - distance));

        Utilities.setElementPrefixedProperty(this.particle, "filter", "blur(" + blur + "px) opacity(" + opacity + "%)");

        this.particle.style.transform = "translate3d(" + left + "%, " + top + "%, 0)";

});

var FocusStage = Utilities.createSubclass(Stage,

    function()

        Stage.call(this);

    }, {

    initialize: function(benchmark, options)

        Stage.prototype.initialize.call(this, benchmark, options);

        this._testElements = [];

        this._offsetIndex = 0;

        this.focalPoint = 0.5;

},

    complexity: function()

        return this._offsetIndex;

},

    tune: function(count)

        if (count == 0)

            return;

        if (count < 0) {

            this._offsetIndex = Math.max(0, this._offsetIndex + count);

            for (var i = this._offsetIndex; i < this._testElements.length; ++i)

                this._testElements[i].hide();

            return;

        var newIndex = this._offsetIndex + count;

        for (var i = this._testElements.length; i < newIndex; ++i) {

            var obj = new FocusElement(this);

            this._testElements.push(obj);

            this.element.appendChild(obj.particle);

        for (var i = this._offsetIndex; i < newIndex; ++i)

            this._testElements[i].show();

        this._offsetIndex = newIndex;

},

    animate: function()

        var time = this._benchmark.timestamp;

        var sinFactor = Math.sin(time / movementDuration);

        var cosFactor = Math.cos(time / movementDuration);

        this.focalPoint = 0.5 + 0.5 * Math.sin(time / focusDuration);

        for (var i = 0; i < this._offsetIndex; ++i)

            this._testElements[i].animate(this, sinFactor, cosFactor);

});

var FocusBenchmark = Utilities.createSubclass(Benchmark,

    function(options)

        Benchmark.call(this, new FocusStage(), options);

);

window.benchmarkClass = FocusBenchmark;

}());