Experiments

Experiment #5: Color Walk

Starts automatically. You can change the interval to speed up or slow down the changes, or change the adjustment range to determine how dramatically the background color can change every time it's updated.

Interval:
Min adjustment:
Max adjustment:

Source


    
    Warning (2)
: file_get_contents(/home/phanto41/public_html/phantomwatson/src/templates/element/Experiments/color_walk.php): Failed to open stream: No such file or directory [in /home/phanto41/public_html/phantomwatson/templates/Experiments/color_walk.php, line 29]
    
        
    Code

                        $path = APP . 'templates' . DS . 'element' . DS . 'Experiments' . DS . 'color_walk.php';
                echo htmlentities(file_get_contents($path));
            ?></pre>
        file_get_contents [internal], line ??
include /home/phanto41/public_html/phantomwatson/templates/Experiments/color_walk.php, line 29
Cake\View\View::_evaluate() /home/phanto41/public_html/phantomwatson/vendor/cakephp/cakephp/src/View/View.php, line 1220
Cake\View\View::_render() /home/phanto41/public_html/phantomwatson/vendor/cakephp/cakephp/src/View/View.php, line 1177
Cake\View\View::render() /home/phanto41/public_html/phantomwatson/vendor/cakephp/cakephp/src/View/View.php, line 808
Cake\Controller\Controller::render() /home/phanto41/public_html/phantomwatson/vendor/cakephp/cakephp/src/Controller/Controller.php, line 773
Cake\Controller\Controller::invokeAction() /home/phanto41/public_html/phantomwatson/vendor/cakephp/cakephp/src/Controller/Controller.php, line 556
Cake\Controller\ControllerFactory::handle() /home/phanto41/public_html/phantomwatson/vendor/cakephp/cakephp/src/Controller/ControllerFactory.php, line 139
Cake\Controller\ControllerFactory::invoke() /home/phanto41/public_html/phantomwatson/vendor/cakephp/cakephp/src/Controller/ControllerFactory.php, line 114
Cake\Http\BaseApplication::handle() /home/phanto41/public_html/phantomwatson/vendor/cakephp/cakephp/src/Http/BaseApplication.php, line 320
Cake\Http\Runner::handle() /home/phanto41/public_html/phantomwatson/vendor/cakephp/cakephp/src/Http/Runner.php, line 86
Cake\Http\Middleware\BodyParserMiddleware::process() /home/phanto41/public_html/phantomwatson/vendor/cakephp/cakephp/src/Http/Middleware/BodyParserMiddleware.php, line 157
Cake\Http\Runner::handle() /home/phanto41/public_html/phantomwatson/vendor/cakephp/cakephp/src/Http/Runner.php, line 82
Cake\Routing\Middleware\RoutingMiddleware::process() /home/phanto41/public_html/phantomwatson/vendor/cakephp/cakephp/src/Routing/Middleware/RoutingMiddleware.php, line 186
Cake\Http\Runner::handle() /home/phanto41/public_html/phantomwatson/vendor/cakephp/cakephp/src/Http/Runner.php, line 82
Cake\Routing\Middleware\AssetMiddleware::process() /home/phanto41/public_html/phantomwatson/vendor/cakephp/cakephp/src/Routing/Middleware/AssetMiddleware.php, line 68
Cake\Http\Runner::handle() /home/phanto41/public_html/phantomwatson/vendor/cakephp/cakephp/src/Http/Runner.php, line 82
Cake\Error\Middleware\ErrorHandlerMiddleware::process() /home/phanto41/public_html/phantomwatson/vendor/cakephp/cakephp/src/Error/Middleware/ErrorHandlerMiddleware.php, line 131
Cake\Http\Runner::handle() /home/phanto41/public_html/phantomwatson/vendor/cakephp/cakephp/src/Http/Runner.php, line 82
Cake\Http\Runner::run() /home/phanto41/public_html/phantomwatson/vendor/cakephp/cakephp/src/Http/Runner.php, line 67
Cake\Http\Server::run() /home/phanto41/public_html/phantomwatson/vendor/cakephp/cakephp/src/Http/Server.php, line 90
[main] /home/phanto41/public_html/phantomwatson/webroot/index.php, line 40

var colorWalk = {
    element: null,
    red: null,
    green: null,
    blue: null,
    interval: 100,

    init: function (element) {
        this.element = $(element);
        var color = this.element.css('background-color');
        var parts = color.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
        this.red = parseInt(parts[1], 16);
        this.green = parseInt(parts[2], 16);
        this.blue = parseInt(parts[3], 16);
        this.changeBgColor();
        $('#max-adjustment').val(10);

        $('#min-adjustment').change(function () {
            var min = $(this).val();
            var max = $('#max-adjustment').val();
            if (parseInt(min) > parseInt(max)) {
                $('#max-adjustment').val(min);
                $(this).val(max);
            }
        });
        $('#max-adjustment').change(function () {
            var min = $('#min-adjustment').val();
            var max = $(this).val();
            if (parseInt(min) > parseInt(max)) {
                $('#min-adjustment').val(max);
                $(this).val(min);
            }
        });
    },

    changeBgColor: function () {
        setTimeout(function () {
            colorWalk.adjustColor();
            colorWalk.element.css('background-color', colorWalk.getHexColor());
            $('#current-color').html('Background color: ' + colorWalk.getHexColor());
            colorWalk.changeBgColor();
        }, this.getInterval());
    },

    getInterval: function () {
        return $('#interval').val();
    },

    getMinAdjustment: function () {
        return $('#min-adjustment').val();
    },

    getMaxAdjustment: function () {
        return $('#max-adjustment').val();
    },

    getHexColor: function () {
        var retval = '#';
        retval += ('0' + this.red.toString(16)).slice(-2);
        retval += ('0' + this.green.toString(16)).slice(-2);
        retval += ('0' + this.blue.toString(16)).slice(-2);
        return retval;
    },

    adjustColor: function () {
        var maxAdjustment = this.getMaxAdjustment();
        var minAdjustment = this.getMinAdjustment();

        var adjustment = Math.floor(Math.random() * maxAdjustment);
        adjustment = Math.min(adjustment, maxAdjustment);
        adjustment = Math.max(adjustment, minAdjustment);
        adjustment *= Math.round(Math.random()) === 0 ? -1 : 1;

        var colors = ['red', 'green', 'blue'];
        var targetColor = colors[Math.floor(Math.random() * 3)];
        this[targetColor] += adjustment;
        this[targetColor] = Math.min(this[targetColor], 255);
        this[targetColor] = Math.max(this[targetColor], 0);
    }
};