ASCII-jaguar — het regenwoud in de letters

2026

Een jaguar van ASCII-tekens rent door het regenwoud van Suriname. Door de tekens waaruit hij bestaat, schuift dezelfde jungle voorbij, trager dan erbuiten. Gebouwd met Vite, TypeScript, WebGL2 en de Web Audio API.

De pagina begint in het donker. Losse tekens worden jungle, twee ogen lichten op en vanuit het oog vult de jaguar zich met tekens. Hij gaat lopen, draaft, galoppeert en sprint. Daarna galoppeert hij door, met om de twintig seconden een korte sprint. Scrollen, vegen of de pijltoets naar rechts geeft hem even extra snelheid.

Elk frame tekent de GPU vier kleine beelden: de jungle buiten de jaguar, dezelfde jungle binnen de jaguar (trager en lichter), de jaguar zelf en de voorgrond. Een shader maakt daar per tekencel ASCII van. Buiten de jaguar kiest hij het teken op de helderheid van de jungle; alleen de lichtere delen krijgen een teken, in gedempte kleuren. Binnen de jaguar bepaalt de vacht waar tekens staan: de rozetten worden gaten, de omtrek blijft dicht. Het licht van de jungle binnen bepaalt hoe vol elk teken is. De tekens houden de kleuren van die jungle, met een warme amber tint en een ondergrens voor de helderheid, en rond de jaguar blijft één cel leeg. Zo blijft hij de duidelijkste vorm in beeld. Loopt de jaguar door een lichtstraal, dan worden zijn tekens voller.

De jaguar is één geschilderd zijaanzicht, geknipt in romp en vier poten, met een 2D-skelet en skinning. De poten volgen voetbanen voor stap, draf en rotatiegalop, met inverse kinematica, zodat ze niet over de grond glijden. Regen, mist, lianen, vijf parallaxlagen en plassen met spatten zijn ook van tekens; de plassen zijn rimpellijnen die met de grond meeschuiven. Daaronder ligt het geschilderde bos, gedimd. Bladeren en lianen op de voorgrond maken de jaguar donkerder als ze voor hem langs gaan, maar bedekken hem niet. Geluid is optioneel: het regenwoud en de regen zijn vooraf gesynthetiseerd, de pootstappen worden live gemaakt, in de pas met de animatie. De beelden zijn vooraf gemaakt met gpt-image-2 en gpt-image-1.5; de pagina roept geen AI-dienst aan.

Technologieën

Vite TypeScript WebGL2 Web Audio gpt-image-2 gpt-image-1.5

Meer van mijn werk

Bekijk het hele portfolio of lees het blog.

Meer werk