Deze post behandelt een creatieve codingstudie in p5.js, waarin ik twee beeldtalen in één frame combineer: een strikte 3D-structuur van geneste wireframe-kubussen en een vlakke 2D-laag geïnspireerd door Sonia Delaunay en Orphism. Ik ontwierp het resultaat specifiek voor VJ-projectie en ambient music performance.
Twee Systemen in Één Beeld
Ik bouwde de basis op uit vier wireframe-kubussen, in elkaar genest. Eerst liet ik elke kubus in een licht verschillend tempo roteren, waardoor een rustig mechanisch ritme ontstaat. Daarnaast plaatste ik kleine stippen die rond de randen draaien en erlangs glijden ze blijven trouw aan de geometrie, maar voegen een levende puls toe, als energie die door de structuur beweegt.
Daarbovenop voegde ik een Orphic overlay toe: concentrische ringen en bogen die elkaar overlappen, door elkaar snijden en een collage van beweging creëren. Ik hield deze laag bewust vlak en grafisch als tegenpunt voor de diepte van de kubussen. Samen creëren deze twee systemen een stille visuele spanning die goed standhoudt in een lange projectie.
Kleur als Beweging
Ik koos een palet dat aansluit bij Delaunay’s simultane contrasten: rood, geel, blauw, oranje, groen, wit en zwart. Kleur is hier geen decoratie ze stuurt de waargenomen beweging. Daardoor blijft het beeld verschuiven, zelfs wanneer de animatie subtiel blijft, omdat de trage rotaties en sterke contrasten voortdurend nieuwe combinaties creëren.
Een belangrijk detail: ik behandel wit als ruimte in plaats van verf. Segmenten die normaal wit zouden zijn, laat ik transparant, zodat de zwarte achtergrond zichtbaar wordt. Daardoor voelen de ringen alsof ze uit de duisternis zijn uitgesneden lichter en architectonischer.
Waarom Dit Past bij Ambient Music
Ambient music heeft geen snelle montage nodig. Ze heeft juist visuals nodig die kunnen ademen. Daarom hield ik de animatie traag en gelaagd. De kubussen zorgen voor structuur. De cirkels en bogen brengen ritme en kleurbeweging. Bovendien vormen de ronddraaiende stippen een vaste puls. Daardoor bouwen ze samen een stille spanning op die goed werkt in projectie je kunt er minutenlang naar kijken en toch nieuwe combinaties blijven ontdekken.
Ik verbind deze creatieve codingstudie rechtstreeks met mijn live VJ-projectiewerk in Resolume.
Technische Notities — p5.js WEBGL
Ik bouwde de visual in p5.js in WEBGL-modus op 1920×1080. Ik construeerde alles uit eenvoudige vormen en herhaalde patronen: ringen als gesegmenteerde geometrie, bogen als snijdende lagen, kubussen als wireframes. Ik schreef de volledige code vanaf nul, zonder shaders of externe dependencies alleen compositie en beweging.
Tot slot, als je meer van dit werk wilt ontdekken, bezoek dan het Creative Coding-overzicht of de FDR-Sound-muziekpagina.
