Hakim El Hattab / @HAKIMel

Visual JS Experiments

whoIS

Frontend developer
Squarespace NYC
Slides

HTML

:(

HTML

:)

CANVAS

Animation Basics

var canvas = document.querySelector( 'canvas' ),
    context = canvas.getContext( '2d' ),
    x = 0;

canvas.width = canvas.height = 200;
context.fillStyle = 'red';

function update() {
    x = ++x % 200;

    context.clearRect( 0, 0, 200, 200 );
    context.fillRect( x, 100, 10, 10 );

    requestAnimationFrame( update );
}

update();

Trail

Blob

Keylight

Example

GAMES

Sinuous

10k Apart

Constraints
FOSTER
creativitY

Sphere

var d = document,
    canvas = d.body.appendChild( d.createElement( 'canvas' ) ),
    context = canvas.getContext( '2d' ),
    time = 0,
    w = canvas.width = d.width,
    h = canvas.height = d.height,
    cos = Math.cos,
    sin = Math.sin,
    PI = Math.PI

setInterval( function() {
    // Clear
    canvas.width = canvas.width;

    time += .1

    // Particle count
    i = 1e4

    while( i-- ) {
        // The magic
        r =  (w+h)/2 * ( cos( ( time + i ) * ( .05 + ( sin(time/1e5) / PI  * .2 ) ) ) / PI )

        context.fillRect( sin(i) * r + w/2,
                          cos(i) * r + h/2,
                          1.5,
                          1.5 )
    }
}, 16 )