Persoonlijk project · Creative development · 2026–heden

PROJECT NULL

PROJECT NULL begon eigenlijk gewoon als een experiment met Three.js. Ik wilde kijken wat ik kon maken met 3D en interacties in de browser. Ik bleef er nieuwe dingen aan toevoegen en uiteindelijk groeide het uit tot een website met verschillende interactieve werelden.

Probeer PROJECT NULL zelf →Ontdek de drie ervaringen ↓

Oranje sculptuur opgebouwd uit fragmenten in Unstable Matter — 001 / Unstable Matter
Houd vast om te breken. Beweeg om de fragmenten te sturen.

Type: Persoonlijk experiment
Team: Individueel project
Periode: Oktober 2026–heden
Mijn rol: Concept · Design · Development

Het idee

Niet alleen kijken. Zelf iets veranderen.

Ik vond het interessant om iets te bouwen waarbij bezoekers zelf invloed hebben op wat er gebeurt. Daarom draait PROJECT NULL rond experimenteren: objecten uit elkaar halen, de omgeving veranderen en ontdekken wat er gebeurt wanneer je met de werelden speelt. Het is mijn eigen playground, naast school en zonder opdrachtgever.

De drie ervaringen

Drie werelden. Drie manieren om te spelen.

Elke ervaring onderzoekt een andere interactie. De homepage verbindt ze met één doorlopende reis van camera, licht, animatie en geluid.

Unstable Matter

Een zwevend object bestaat uit ongeveer 1.280 losse fragmenten. Houd het vast tot het uiteenvalt, trek stukken aan of stoot ze af, verander de zwaartekracht en open een doorgang naar een andere omgeving. Je kunt de simulatie ook stilzetten en terugspoelen: het systeem herstelt eerder opgeslagen fysieke toestanden, in plaats van alleen een animatie achteruit af te spelen. Daarna kun je de fragmenten opnieuw samenbrengen in een sculptuur.

Ember

Ember draait rond de as, het vuur en de energie van een geanimeerd wezen. Door vast te houden en te bewegen verzamel je deeltjes; loslaten geeft hun energie weer vrij. Je kunt windvlagen maken, de as in twee stromen splitsen en een grotere uitbarsting opladen. Licht, hittevervorming en sporen op de grond laten de omgeving mee reageren.

Modelbasis: “Drogon – Game of Thrones Dragon” van CoreMesh 3D, CC BY 4.0. Voor Ember zijn materialen, belichting en omgeving aangepast en interactieve as- en vuureffecten toegevoegd. Origineel model · Licentie.

Liquid Memory

In Liquid Memory teken je in bewegende vloeistof en meng je pigmenten. Houd vast om inkt te laten uitbloeien en zie hoe stroming de kleuren meevoert. Je kunt je vorige gebaar oproepen en met een geheugenlens eerdere vloeistoftoestanden terugzien. Het beeld ontstaat uit beweging en pigmentverdeling, waardoor elke ingreep blijft doorwerken.

Development

Zelf bouwen, veel uitzoeken.

Ik werk vooral met Three.js, TypeScript en GLSL voor de beelden en met GSAP voor de animaties en camerabewegingen. De interacties lopen van eigen fysicasimulaties tot deeltjes en vloeistof. De homepage brengt die werelden samen met overgangen, licht en procedureel geluid.

WebGL2 is de basis van de rendering. Sommige onderdelen kunnen optioneel WebGPU-berekeningen gebruiken, bijvoorbeeld voor deeltjes. Dat maakt prestaties en een bruikbare terugval op andere toestellen deel van het ontwikkelwerk.

Wat ik eruit leer

Meer dan één losse demo.

Een groter Three.js-project opdelen in scènes en systemen, terwijl de ervaringen samen één website blijven vormen.
Eigen shaders schrijven en aanpassen, en begrijpen hoe die op licht, materiaal en beweging reageren.
Fysica en invoer verbinden zodat vasthouden, loslaten en bewegen direct invloed hebben op de simulatie.
Camerabewegingen, animatietimelines en geluid op elkaar afstemmen zonder de interactie te verliezen.
De GPU-belasting en beeldsnelheid afwegen, effecten begrenzen en rekening houden met verschillende schermen en toestellen.

Huidige status

Nog lang niet klaar.

PROJECT NULL is nog volop in ontwikkeling. Ik blijf de bestaande ervaringen verbeteren en wil later ook nieuwe experimenten toevoegen.

Probeer PROJECT NULL zelf →

Terug naar projecten