This post covers a creative coding study in p5.js, where I combine two visual languages in one frame: a strict 3D structure of nested wireframe cubes and a flat 2D layer inspired by Sonia Delaunay and Orphism. I designed the result specifically for VJ projection and ambient music performance.
Two Systems in One Image
I built the foundation from four wireframe cubes, nested inside each other. First, I set each cube to rotate at a slightly different pace, creating a calm mechanical rhythm. In addition, I placed small dots that orbit and slide along the edges — they stay loyal to the geometry, but add a living pulse, like energy moving through the structure.
On top of that, I added an Orphic overlay: concentric rings and arcs that overlap, cut through each other, and create a collage of movement. I kept this layer intentionally flat and graphic — a counterpoint to the depth of the cubes. Together, these two systems create a quiet visual tension that holds up well in long projection.
Color as Motion
I chose a palette aligned with Delaunay’s simultaneous contrasts: red, yellow, blue, orange, green, white, and black. Color is not decoration here — it drives perceived motion. As a result, the image keeps shifting even when the animation stays subtle, because the slow rotations and strong contrasts constantly create new combinations.
One key detail: I treat white as space rather than paint. I leave segments that would normally be white transparent, so the black background shows through. Therefore the rings feel cut out of darkness — lighter and more architectural.
Why It Fits Ambient Music
Ambient music doesn’t need fast editing. Instead, it needs visuals that can breathe. That is why I kept the animation slow and layered. The cubes provide structure. The circles and arcs bring rhythm and color movement. Furthermore, the orbiting dots form a steady pulse. Because of this, together they build a quiet tension that works well in projection — you can watch it for minutes and still discover new combinations.
I connect this creative coding study directly to my live VJ projection work in Resolume.
Technical Notes — p5.js WEBGL
I built the visual in p5.js in WEBGL mode at 1920×1080. I constructed everything from simple shapes and repeated patterns: rings as segmented geometry, arcs as slicing layers, cubes as wireframes. I wrote the full code from scratch, without shaders or external dependencies — just composition and motion.
Finally, if you want to explore more of this work, visit the Creative Coding overview or the FDR-Sound music page.
