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

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 )

Coil

Hit-Testing

Redraw Regions

FINDING

FINDING

INSPIRATION

INSPIRATION

LIMITING

LIMITING

EXPECTATIONS

EXPECTATIONS

UI

Scroll Effects

Meny

LAdda

@hakimel

hakim.se

slides.com

Nordic.js

By Hakim El Hattab

Nordic.js

A presentation I gave at Nordic.js about visual coding using JavaScript. Video: https://youtube.com/watch?v=02ilIJdI5ZI

  • 6,809
Loading comments...

More from Hakim El Hattab