Floating Cloth in Space — Physics Simulation in p5.js
In this creative coding study I explore a simple but fascinating idea: what if a piece of fabric could exist without weight, drifting in space, but still behave like cloth. I built this sketch in p5.js WEBGL as a physics simulation designed for VJ projection and ambient looping.
The Physics System
I built the cloth from a grid of points connected by constraints. First, each point responds to its neighbours, so the surface can bend and ripple while staying fabric-like. In addition, I gave the system a memory of its original position, so the reset feels intentional rather than random.
The motion runs as a loop. The cloth slowly pulls itself into a wrap, then gradually eases back to its exact starting shape, and the cycle begins again. Because of this, the animation works perfectly for long projection — it never cuts, never jumps, and never draws attention to its own repetition.
Color and Texture
I chose the colors inspired by the clothing of the LGBTQ+ community — a moving rainbow that carries meaning beyond decoration. Furthermore, I made the color move continuously across the cloth, blending smoothly from one hue to the next, so the whole sheet feels alive rather than flashing between colors.
The surface itself is not a solid fill. Instead, I drove the transparency with noise, which gives the cloth an airy, shifting texture. As a result, light seems to pass through the fabric, making it feel genuinely weightless.
Why It Works for Projection
I designed this sketch to stay in frame at 1920×1080, with a fixed camera and gentle boundaries so it never drifts out of view. Therefore it is calm enough to live in the background of a performance, but detailed enough to keep pulling you in if you watch it closely.
This is the same approach I use in my 3D Cubes x Orphic Overlay study — slow, layered visuals that breathe alongside ambient music rather than competing with it.
Technical Notes — p5.js WEBGL
I built the simulation in p5.js in WEBGL mode at 1920×1080. The cloth is a grid of points with spring constraints between them. I drove the color with HSB cycling and the transparency with Perlin noise. Finally, I added a reset system that eases every point back to its origin position, making the loop seamless.
For more creative coding work, visit the Creative Coding overview or explore the FDR-Sound music page.
