Six is a one-screen design study. The wall is made of hundreds of small tiles. Each tile is a crop from one of four drawings I made myself: a dog, a boy with a fringe, a sheet full of faces and an elephant with a rider. At rest the wall is dark and grey.
Letters are formed with tiles. Each pixel of a custom 5×7 font is a tile that lights up in the colours of the drawing; for the big SIX on a wide screen it is a block of two by two tiles. First SIX builds up letter by letter. Then the sentence 'a website by Erik van de Blaak' runs through the wall as a marquee. The tile size follows the screen width, so a wide screen always shows eight readable characters at once and a phone five. The whole wall waves gently, like a flag fixed at its left edge, and lit tiles cast a soft glow onto their neighbours.
Move your mouse or finger to draw trails of light across the wall. Click a tile to open the whole drawing it comes from: the drawing grows out of the tile and the crop is briefly outlined. Everything is drawn with Canvas 2D in a single requestAnimationFrame loop, without WebGL or an animation library. With reduced motion on, SIX stands still and the sentence appears below it as plain text.
Letters are formed with tiles. Each pixel of a custom 5×7 font is a tile that lights up in the colours of the drawing; for the big SIX on a wide screen it is a block of two by two tiles. First SIX builds up letter by letter. Then the sentence 'a website by Erik van de Blaak' runs through the wall as a marquee. The tile size follows the screen width, so a wide screen always shows eight readable characters at once and a phone five. The whole wall waves gently, like a flag fixed at its left edge, and lit tiles cast a soft glow onto their neighbours.
Move your mouse or finger to draw trails of light across the wall. Click a tile to open the whole drawing it comes from: the drawing grows out of the tile and the crop is briefly outlined. Everything is drawn with Canvas 2D in a single requestAnimationFrame loop, without WebGL or an animation library. With reduced motion on, SIX stands still and the sentence appears below it as plain text.
More work
Interactive 3D WebGL Experience
A 3D WebGL piece with animated chrome letters, a neon grid and warp-speed stars. Move your mouse to pan the camera.
Interactive World Globe
An interactive 3D particle mesh globe built with Three.js where you can click countries to discover cultural connections.
Interactive DOS Experience
An MS-DOS simulation with CRT effects and real commands such as DIR, CD, TYPE and HELP. CAROUSEL.EXE breaks the screen into ASCII blocks that turn into a 3D carousel.