Color Ripples

A canvas exercise rich in grooviness.

by nate

HTML

<!--
    Canvas width and height need to be defined explicitly via attributes:

    http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#attr-canvas-width

-->
<canvas width="400" height="400"></canvas>

<p>move your mouse | click and hold</p>

CSS

body {
    background-color: #333;
    margin: 0;
    padding: 0;
}
canvas {
    background-color: #000;
    display: block;
    height: 400px;
    margin: 100px auto 0;
    width: 400px;
}

p {
    color: #666;
    font-family: Futura, Arial, sans-serif;
    margin-top: 10px;
    text-align: center;
}

JavaScript

(function( $ ) {
    
        // Setup canvas
        var animate,
            refreshRate = 50, // How fast (smooth) it animates
            click = false,
            clickIncrement = 0.5,
            clickDelta = 0,
            hueDelta = 0,
            $win = $( window ),
            $canvas = $( 'canvas' ),
            canvas = $canvas[0],
            ctx = canvas.getContext( '2d' ),
            points = [],
            interval = 10,
            canvasWidth = $canvas.width(),
            canvasHeight = $canvas.height(),
            mouseX = 200,
            mouseY = 200,
            // Our workhorse draw function
            drawPoint = function( x, y, radius, color ) {
                    ctx.fillStyle = color;
                    ctx.beginPath();
                    ctx.arc( x, y, radius, 0, Math.PI * 2, false ); 
                    ctx.closePath();
                    ctx.fill();
                },
            render = function( points ) {
                var hue;
 
                // Each time this renders, we clear the previous content
                ctx.clearRect( 0, 0, canvasWidth, canvasHeight );
 
                // If the mousebutton is currently clicked, keep growing the clickDelta
                // modifier (which makes the points bigger) by clickIncrement
                if ( click ) {
                    // But only to a certain point
                    if ( clickDelta < 5 ) {
                        clickDelta += clickIncrement;
                    }
                } else {
                    // And don't let it fall below zero
                    if ( clickDelta > 0 ) {
                        clickDelta -= clickIncrement;
                    }
                }
 
                // Strobe colors for maximum chillaxment
                if ( click === false ) {
                    // If the mousebutton isn't clicked, strobe inward
                    hueDelta += 10; 
                } else {
                    // If it is, strobe...