Afra Binjerais – Assignment 4

Concept 

I was inspired Memo Aktens’ work, the one that resembles a spinning scientific instrument. I was drawn to its balance between precision and fluidity.

link here 

My initial goal was to recreate a similar harmonic-motion-based piece, I wanted oscillation, rhythm, and rotation to drive the visuals. However, as I experimented, the project gradually evolved. Instead of directly duplicating that spinning harmonic structure, I pivoted toward a new direction: a floating piano made of animated blocks resembling musical notes. Rather than recreating the original motion literally, I translated the essence of it: rhythm, repetition, and musicality into something interactive and playful. The piano blocks float gently, react to proximity, and visually echo sound. 

How the Code Is Organized

Block System
blocks[] stores 20 piano blocks, each with position, size, a noise seed for organic motion, and a wasHover flag to detect when the mouse enters. topPoints[] stores the anchor positions for the membrane above.

Animation Logic
drawBlocks() controls floating movement using sine waves and Perlin noise, dynamic height changes, and animated RGB colors driven by layered sine functions.

Interaction + Sound
A bounding-box hover test detects when the mouse is over a block. On hover enter, playKey() triggers a sound, and sine + noise offsets (wx, wy, wr) create a soft wiggle in position and rotation.

Visual Structure
drawTopMembrane() draws a wavy connecting line above the blocks, and drawUI() renders the title and instructions.

A Highlight of Code I’m Particularly Proud Of

One piece of code I’m proud of is the logic that makes each block wiggle when the mouse gets close. When the mouse enters a certain radius, the block responds with subtle oscillation driven by noise / sine-based offsets creating a soft organic wiggle:

// hover hit test

const isHover =

  mouseX > b.x - b.baseW / 2 &&

  mouseX < b.x + b.baseW / 2 &&

  mouseY > y - h / 2 &&

  mouseY < y + h / 2;

// wiggle when hovered

const wiggleAmt = isHover ? 6 : 0;

const wiggleRot = isHover ? 0.18 : 0;

const wx =

  wiggleAmt * sin(t * 18 + i * 2.3) +

  wiggleAmt * 0.35 * (noise(50 + i, t * 8) - 0.5);

const wy =

  wiggleAmt * 0.6 * cos(t * 16 + i * 1.7) +

  wiggleAmt * 0.25 * (noise(90 + i, t * 8) - 0.5);

const wr = wiggleRot * sin(t * 14 + i * 1.9);

push();

translate(b.x + wx, y + wy);

rotate(wr);

fill(r, g, bCol, 200);

rect(0, 0, b.baseW, h, 4);

pop();

Milestones and Challenges

Milestone 1 

My starting point was adapting sketches from class, the ones related to perlin noise and animated rgb circles. I transformed those circular animations into rectangular “note” blocks. Instead of smooth glowing circles, I reshaped them into piano-like elements and adjusted the RGB values to give them a more musical, rhythmic identity. At this stage, I was still exploring how to merge movement and sound visually.

Milestone 2 

Next, I attempted to implement a flipping animation. The idea was that each block would rotate or flip when triggered. However, my first implementation caused all of the blocks to flip at the same time. To fix this, I revised the logic so that blocks would flip sequentially  like a domino effect  instead of simultaneously.

Milestone 3 

I successfully implemented the domino-style flip. Technically it worked but aesthetically it didn’t. The motion felt stiff and visually heavy. It didn’t match the soft, floating piano concept I had in mind. Once I began thinking about incorporating sound, I realized the flipping motion felt too aggressive and disconnected from the intended mood. 

Milestone 4 

Lastly I decided when the mouse moves close to a block, it wiggles. This change brought the project closer to my original intention although it doesn’t look as close to the inspiration as it was, it still has its essence if that makes sense. 

Reflection + Future Improvements

I still want to capture more of the harmonic, spinning elegance that inspired me at the beginning. I think I’m moving in the right direction, but if I had managed to make the flipping motion feel smooth and natural the way I imagined it, I would’ve been more satisfied. If I continue developing this piece, I’d love to refine the motion so it feels more like true harmonic oscillation, and add smoother easing. I also want to revisit rotation, maybe replacing the wiggle with a softer more controlled oscillation and try the flipping idea again.