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

<div class="form-inline">
    Interval:
    <select class="form-control" id="interval">
        <?php for ($n = 100; $n <= 1000; $n += 100): ?>
            <option value="<?= $n ?>"><?= $n ?>ms</option>
        <?php endfor; ?>
    </select>

    <br />

    Min adjustment:
    <select class="form-control" id="min-adjustment">
        <?php for ($n = 0; $n <= 10; $n++): ?>
            <option value="<?= $n ?>"><?= $n ?></option>
        <?php endfor; ?>
    </select>

    <br />

    Max adjustment:
    <select class="form-control" id="max-adjustment">
        <?php for ($n = 0; $n <= 10; $n++): ?>
            <option value="<?= $n ?>"><?= $n ?></option>
        <?php endfor; ?>
    </select>
</div>

<div id="current-color"></div>

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);
    }
};