This week we’re asked to create an artwork that incorporates the “loop” concept in code. I saw dynamic squares before, and would personally like to create a grid that gently “breathes” and drifts. Each square’s size, brightness are driven by layered sine waves using a shared time phase so the whole field feels organic and connected, like a low‑key pixel ocean.
Below is the code for core motion + styling logic (the vibe engine).
const w = sin(phase + (x * 0.35) + (y * 0.45)); // wave seed const s = map(w, -1, 1, cell * 0.25, cell * 0.85); // size pulse const dx = sin(phase * 0.7 + x * 0.3) * 6; const dy = cos(phase * 0.7 + y * 0.3) * 6; const hueVal = (x * 8 + y * 6 + frameCount * 0.4) % 360; const bri = map(w, -1, 1, 35, 90); fill(hueVal, 60, bri, 0.9); rect(px, py, s, s, 6);
- What works: Simple math, no arrays or heavy state—scales nicely with window size. The motion feels smooth and unified.
- Limitations: All squares animate uniformly; interaction is missing. No colors. (In a version, colors follow a fixed formula, so longer viewing gets predictable.)
To be frank, this implementation still lacks the smooth “sea wave” vibe that I was looking for. In particular, I would have liked the edges to transform into non-linear lines like waves. But I would call this a first prototype as a p5.js beginner.
However, I trialed for smaller square size, and I’m surprised that such a minor change created something perceptually different. Finally, I implemented a super cool mouse click effect, which in a way achieved another level of dynamic aesthetics.