Six is een designstudie op één scherm. De muur bestaat uit honderden kleine tegels. Elke tegel is een uitsnede uit een van vier tekeningen die ik zelf heb gemaakt: een hond, een jongen met pony, een vel vol gezichten en een olifant met ruiter. In rust is de muur donker en grijs.
Letters worden gevormd met tegels. Elke pixel van een eigen 5×7-lettertype is een tegel die oplicht in de kleuren van de tekening; bij de grote SIX op een breed scherm is dat een blok van twee bij twee tegels. Eerst bouwt SIX zich letter voor letter op. Daarna loopt de zin 'a website by Erik van de Blaak' als lichtkrant door de muur. De tegelgrootte volgt uit de schermbreedte, zodat er op een breed scherm altijd acht tekens tegelijk te lezen zijn en op een telefoon vijf. De hele muur golft rustig, als een vlag die aan de linkerkant vastzit, en tegels die oplichten geven een zachte gloed af op hun buren.
Met je muis of vinger teken je lichtsporen over de muur. Een klik op een tegel opent de hele tekening waar die uit komt: de tekening groeit uit de tegel en de uitsnede wordt even gemarkeerd. Alles wordt getekend met Canvas 2D in één requestAnimationFrame-lus, zonder WebGL of animatiebibliotheek. Met 'minder beweging' aan staat SIX stil en staat de zin eronder als gewone tekst.
Letters worden gevormd met tegels. Elke pixel van een eigen 5×7-lettertype is een tegel die oplicht in de kleuren van de tekening; bij de grote SIX op een breed scherm is dat een blok van twee bij twee tegels. Eerst bouwt SIX zich letter voor letter op. Daarna loopt de zin 'a website by Erik van de Blaak' als lichtkrant door de muur. De tegelgrootte volgt uit de schermbreedte, zodat er op een breed scherm altijd acht tekens tegelijk te lezen zijn en op een telefoon vijf. De hele muur golft rustig, als een vlag die aan de linkerkant vastzit, en tegels die oplichten geven een zachte gloed af op hun buren.
Met je muis of vinger teken je lichtsporen over de muur. Een klik op een tegel opent de hele tekening waar die uit komt: de tekening groeit uit de tegel en de uitsnede wordt even gemarkeerd. Alles wordt getekend met Canvas 2D in één requestAnimationFrame-lus, zonder WebGL of animatiebibliotheek. Met 'minder beweging' aan staat SIX stil en staat de zin eronder als gewone tekst.
Meer werk
Interactieve 3D WebGL Experience
3D-WebGL-werk met geanimeerde chroomletters, een neon-grid en sterren op warpsnelheid. Beweeg je muis om de camera mee te laten bewegen.
Interactive World Globe
Een interactieve 3D wereldbol gebouwd met Three.js waar je kunt klikken op landen om culturele connecties te ontdekken.
Interactieve DOS Experience
Een MS-DOS-simulatie met CRT-effecten en echte commando's als DIR, CD, TYPE en HELP. CAROUSEL.EXE laat het scherm uiteenvallen in ASCII-blokken, die overgaan in een 3D-carrousel.