Interactive Sadu Weaving Environment

Project Overview

My final project explores how traditional UAE heritage can be translated into a contemporary interactive digital environment. The work is inspired by Al Sadu, a traditional Bedouin weaving practice known for its geometric motifs, repetition, rhythm, and handcrafted structure.

The project imagines the user a weaver. Through hand gestures captured by a webcam, the user interacts with a woven digital textile in real time. Their movement shapes patterns, places motifs, and disturbs the surface of the cloth, creating a continuously evolving visual field.

The artistic intention is to explore how cultural heritage can exist dynamically through technology. Instead of presenting tradition as something static, the project allows it to be experienced as something responsive, alive, and constantly transforming.

The key themes explored are:

• Handcraft vs algorithm
• Tradition translated through code

Implementation Details

The project was developed using p5.js and ml5.js HandPose tracking. The webcam detects the user’s hand, and the index finger is used as the primary interaction point. This position is mapped from camera space to canvas space and used to interact with a grid-based woven system.

The project evolved through four main milestones:

Milestone 1: Basic Interactive Weaving System

The first version established the core interaction. A grid of cells represented a simplified woven surface, where each cell could either display a background block or a basic cross motif.

Using HandPose, the position of the user’s index finger was tracked and mapped onto the canvas. When the finger moved across the grid, nearby cells flipped states, creating the effect of disturbing or weaving the pattern.

Outcome:
This stage confirmed that the core interaction worked. However, the visual system was limited, and the interaction felt more like toggling pixels rather than weaving a rich textile.

Milestone 2: Motif Expansion and Generative Behavior

In the second version, the visual complexity increased significantly. Multiple Sadu-inspired motifs were introduced, including cross, diamond, stripe, and block-based patterns.

A cellular automata system was added, allowing the weave to evolve over time. Cells could grow, spread, or disappear depending on their neighbors, making the textile feel alive even without user input. Hand speed was also incorporated as a parameter. Faster movement resulted in a larger brush radius, allowing the user to affect a wider area of the weave.

Key additions:

• Multiple motif types
• Sadu-inspired color palette
• Cellular automata system
• Hand speed controlling brush size
• Keyboard-based motif switching

Outcome:
The system became more generative and dynamic. The textile was no longer static but continuously evolving. However, interaction was still partially dependent on the keyboard, which interrupted the flow of the experience.

Milestone 3: Interface Design and User Experience

This stage focused on improving usability and visual clarity. Motif selection was moved into visible buttons, making the system easier to understand. The interaction area was restricted to the woven field, preventing accidental input in the interface zones.

Outcome:
The interface became more intuitive and readable. However, motif selection still relied on mouse interaction, which created a disconnect from the hand-based system. This is where I took it to the second stage where I wanted the hand to hover on the buttons

Milestone 4: Gesture-Based Interaction and Flow Field System

The final version fully integrates gesture-based interaction across the system. Users can select motifs by pointing at buttons and holding their hand steady for three seconds. A visual progress bar provides feedback during this interaction. The most significant development in this stage is the transformation of Motif 4 into a flow field system.

Unlike the other motifs, which are governed by cellular automata, Motif 4 operates as a dynamic flow field. Each cell contains directional movement, causing the internal elements of the motif to continuously shift and distort over time. The user’s hand acts as a force within this system. 

This creates a layered interaction:

• Motifs 1–3 behave as structured, generative weaving systems
• Motif 4 behaves as a fluid, responsive flow field shaped by gesture

Motif 4 is also excluded from the cellular automata system, meaning it does not grow or decay automatically. It remains as a direct trace of the user’s interaction.

Key additions:

• Gesture-based UI (hover + dwell interaction)
• Flow field system for Motif 4
• Hand-influenced distortion behavior
• Separation of algorithmic and gesture-driven layers

Outcome:
This version successfully merges interaction, generative systems, and visual expression. The system now reflects both structured weaving and fluid transformation, aligning more closely with the conceptual goals of the project.

Technical Process

The project is built around a grid system where each cell represents a unit of the woven textile. Each cell stores a value corresponding to a motif type. Hand tracking data from the webcam is mapped to the canvas, allowing the user to “paint” motifs onto the grid. Hand speed determines brush size, creating variation in interaction. A cellular automata system controls the growth and decay of Motifs 1–3 based on neighboring cells, introducing generative behavior. Motif 4 operates differently. It uses a flow field where each cell has a directional vector that affects how its internal elements are drawn. This produces continuous motion and distortion.

Video Documentation

Reflection

My project translates elements of traditional Sadu weaving into an interactive digital form. The use of hand tracking allows the user to engage with the system in a physical and intuitive way, reinforcing the idea of weaving as a gesture-based practice.

One of the most important developments was introducing the flow field in Motif 4. This created a contrast between structured, rule-based generation and fluid, responsive movement. It reflects the tension between tradition and transformation, which is central to the project’s concept.

A key challenge was balancing user control with generative behavior. Early versions either felt too static or too unpredictable. Separating Motif 4 from the cellular automata helped resolve this by giving the user a more direct and lasting impact on the system. I was also facing an issue of implementing decoding nature codes into this idea and i felt that motif 4 helped with that.

For future improvements, I would like to:

• Add sound elements that respond to interaction
• Develop more motifs based on authentic Sadu patterns
• Introduce gesture variations (e.g., open palm, multiple hands)
• Allow users to save or export their woven compositions (this was something i was willing to do but due to time constraints i decided to draft this idea)

Concept and Artistic intention

My final project explores how traditional UAE heritage can be translated into a contemporary interactive digital environment. The project is inspired by Al Sadu, a traditional Bedouin weaving practice known for its geometric motifs, repetition, rhythm, and handcrafted structure. I decided on continuing to explore Sadu based on the last assignment. 

The project imagines the user as both weaver and wind. Through hand gestures captured by a webcam, the user influences a woven digital textile in real time. Their movement changes the structure of patterns, shifts the flow of particles, and transforms the surface of the virtual cloth. The artistic intention is to show that culture can evolve through technology. By combining traditional visual language with generative systems, the project asks how heritage can be experienced dynamically rather than passively.

Themes I’m exploring:

• Handcraft vs algorithm
• Tradition translated through code

Interaction Methodology

The interaction uses a webcam and ml5.js HandPose tracking. The user stands in front of the screen and uses their hand to interact with the woven environment.

Diagrams (i uploaded as image and it was blurry)

https://drive.google.com/file/d/1-Kz34urKPHvqH2rd_4H-ug_PJxCJMO8c/view?usp=sharing

(i uploaded as image and it was blurry)

The color palette is inspired by traditional woven textiles and desert landscape:

• Deep red / maroon
• Sand beige
• Cream wool tones
• Dark brown accents

Main Visual Elements

• Repeating geometric woven motifs
• Dynamic stitched grid
• Motion trails from gesture interaction 

User Guidance

The following is what I’m thinking of having on the sketch for user guidance: 

• Move your hand to weave the pattern
• Raise hand to densify motifs
• Move faster to release threads
• Press R to reset 

as well as a webcam for them to see themselves. 

Initial p5 Sketch

Concept 

My project explores how cellular automata can be used to generate patterns inspired by Sadu weaving, a traditional textile practice found in the UAE and across the Gulf region. Sadu textiles are known for their repeated geometric motifs, strong symmetry, and earthy color palettes such as red, cream, brown, and black. I was inspired by the woven texture, rhythm, and repetition seen in Sadu fabrics. I wanted to combine traditional visual culture with digital generative design by allowing each new row of cells to behave like a woven textile row.

Sketch

Code Highlight

function applyRule(a, b, c) {

  let index = parseInt("" + a + b + c, 2);

  return ruleset[7 - index];

}

I am proud of this section because it is the core of the cellular automata system. It takes the left, center, and right neighboring cells, converts them into a binary pattern, and uses that pattern to determine the next state.

Challenges

One challenge was understanding how the rulesets worked in cellular automata. At first, it was confusing how three neighboring cells could control the next generation. I had to experiment with different rules such as Rule 30 and Rule 90 to understand how each one changed the visual output.

Milestones 

 

• This was the beginning stage of the project. I focused on understanding the basic logic of cellular automata using a simple black-and-white version. Each row was generated from the row above it using Rule 90.

• In this stage, I began developing the visual side of the project. I introduced color inspired by Sadu weaving, using earthy reds, creams, and warm tones. I also experimented with different shapes and randomized starting seeds. This milestone helped connect the technical system to my UAE cultural inspiration.

Reflection & Future Improvements

This project helped me understand how simple coding rules can create complex and visually interesting patterns. I enjoyed exploring how cellular automata can be used not only as a mathematical system, but also as a creative tool inspired by culture and design. Connecting the project to Sadu weaving made the process more meaningful and gave the patterns a stronger identity.

If I continue developing this project, I would like to improve the motifs so they look closer to real woven textile patterns. I would also experiment with more UAE-inspired color palettes, smoother animations, and additional rulesets to create a wider variety of outcomes. In the future, I would also like to explore using 2D cellular automata or projecting the patterns onto fabric or physical materials.

 

Concept 

 The concept is recreating Newton’s Cradle using the Matter.js physics engine. The goal is to duplicate how a real Newton’s Cradle works, where a series of suspended balls transfer energy through collisions when one ball is pulled back and released. I aimed to simulate this behavior by using physics-based properties like gravity, restitution, and constraints to make the motion feel as realistic as possible. Instead of manually animating the movement, the project relies on the physics engine to naturally calculate how the balls swing and interact, allowing me to explore how energy and motion behave in a simulated environment.

Highlight of some code

A part of the code I’m particularly proud of is the way I created Newton’s Cradle using a loop to generate both the balls and their constraints. Instead of manually placing each ball, I used a loop to calculate their positions and connect them dynamically, which made the code cleaner and easier to adjust.

const startX = CENTER_X - ((BALL_COUNT - 1) * SPACING) / 2;

for (let i = 0; i < BALL_COUNT; i++) {
  const anchorX = startX + i * SPACING;
  const anchorY = TOP_Y;

  const ball = Bodies.circle(anchorX, anchorY + STRING_LENGTH, BALL_RADIUS, {
    restitution: 1,
    friction: 0,
    frictionAir: 0.0005
  });

  const rope = Constraint.create({
    pointA: { x: anchorX, y: anchorY },
    bodyB: ball,
    length: STRING_LENGTH,
    stiffness: 0.9
  });

  balls.push(ball);
  ropes.push(rope);
}

Sketch

Milestones: 

• This stage is the very first version of Newton’s Cradle where the main goal was just to get the physics working. I created the balls and connected them with constraints so they hang and swing like a real cradle. I also set up gravity and collision so the motion looks natural and the energy transfers from one ball to another. There’s no interaction yet in this version it just runs on its own.

https://youtube.com/shorts/ISYsv6YzDNg?si=kNVKaXBV6mP5ucq0

The focus was on building the core physical system by creating circular bodies connected with constraints to simulate suspended balls and realistic energy transfer during collisions. Basic interactivity was introduced by allowing the user to click and drag individual balls, giving control over how motion is initiated, similar to a real cradle.

Challenges: 

A difficulty was understanding how Matter.js handles physics, since the motion is not directly controlled but calculated by the engine, which made debugging harder. It also took time to properly connect the balls with constraints so they would swing correctly without breaking the structure. AI was very handy with this specific assignment as it was my first time using physics libraries. 

Reflection

This project is based on the concept of recreating a Newton’s Cradle using the Matter.js physics engine. The goal is to duplicate how a real Newton’s Cradle works, where a series of suspended balls transfer energy through collisions when one ball is pulled back and released. I aimed to simulate this behavior by using physics-based properties like gravity, restitution, and constraints to make the motion feel as realistic as possible. Instead of manually animating the movement, the project relies on the physics engine to naturally calculate how the balls swing and interact, allowing me to explore how energy and motion behave in a simulated environment.

Concept

reference: https://muslimmatters.org/2012/11/15/ten-things-you-didnt-know-about-the-kaaba/

My concept for the flocking system is inspired by the sacred ritual of Umrah. I wanted to explore flocking in a different way where movement is not random or purely emergent, but organized around a central point. In Umrah, Muslims perform a ritual in which they circle the Kaaba seven times. I was interested in translating this idea into a computational system, where agents revolve around a central structure. In this project, I aimed to reflect that circular, collective movement in an abstract and respectful way, without directly representing people. Instead, I used simplified forms to suggest a crowd while keeping the focus on motion and spatial relationships. My visual inspiration also comes from a drawing of the Kaaba displayed in the art center, located beside the lift on the right side. Although I do not have an image of it, the composition and presence of that piece influenced how I approached the central structure in my work.

A highlight of some code 

orbitForce() {
let center = createVector(width / 2, height / 2);
let radial = p5.Vector.sub(this.pos, center);

if (radial.mag() === 0) return createVector(0, 0);

// convert radial direction into circular motion
let tangent = createVector(-radial.y, radial.x);
tangent.normalize();
tangent.mult(this.maxSpeed);

let steering = p5.Vector.sub(tangent, this.vel);
steering.limit(this.maxForce * 1.3);
return steering;
}

One part of the code I am particularly proud of is the orbit behavior. Instead of having agents move randomly or only react to nearby neighbors, I introduced a force that converts their position relative to the center into a tangential direction. This allows the agents to move in a circular path around the central square. This was important to my concept, as it transforms a typical flocking system into a structured, collective movement organized around a focal point.

Sketch

Milestone

https://youtube.com/shorts/Aij4knx0vcE?feature=share

• Here I was exploring how a flocking system could revolve around a central structure. I combined basic flocking behaviors with a simple orbit force to create circular movement. At this stage, the system is intentionally minimal, focusing on testing the core idea before adding complexity like time-based changes or refined visuals.

https://youtube.com/shorts/de8Qt2qCW88?feature=share

• In this video, I wanted to highlight the interaction of dragging the mouse to generate agents in the system. As more agents are added, the movement becomes slower and more dense. This reflects how, in Umrah, movement naturally slows down as the crowd becomes more crowded, creating a more compressed and collective flow.

Challenge

One of the main challenges in this project was balancing control and emergence. While flocking systems are naturally unpredictable, I needed the agents to consistently move in a circular path around the central square without losing the organic quality of the motion. Another challenge was achieving the right level of simplicity in the visuals, ensuring the system remained clear and readable without becoming overly complex or decorative.

Reflection and ideas for future work or improvements

I developed a better understanding of how simple rules can produce complex and meaningful collective behavior. I learned how to balance structure and emergence. For future work, I would explore making the movement more varied and responsive, such as introducing different types of agents or layering multiple rings of circulation. 

Concept

My concept is inspired by fireworks. I wanted to explore how this week’s vehicle demonstrations could be transformed into something more artistic, which I initially found challenging. When I first think of vehicles, I usually imagine something literal like cars, so it took some time to shift my thinking toward a more abstract approach. I used the flow field example from class as a starting point and built on it to create a system that feels more expressive.

A highlight of some code 

behaviors(flow) {
// explode outward first
this.seek(this.target);

// soften near destination
this.arrive(this.target);

// drift like smoke/wind after burst
if (this.life < 55) {
this.follow(flow);
}
}

seek(t) {
let desired = p5.Vector.sub(t, this.pos);
desired.setMag(this.maxSpeed);

let steering = p5.Vector.sub(desired, this.vel);
steering.limit(this.maxForce);

this.applyForce(steering);
}

arrive(t) {
let desired = p5.Vector.sub(t, this.pos);
let d = desired.mag();

if (d < 60) {
let m = map(d, 0, 60, 0, this.maxSpeed);
desired.setMag(m);
} else {
desired.setMag(this.maxSpeed);
}

let steering = p5.Vector.sub(desired, this.vel);
steering.limit(this.maxForce * 0.8);

this.applyForce(steering);
}

follow(flow) {
let desired = flow.lookup(this.pos);
desired.setMag(this.maxSpeed * 0.7);

let steering = p5.Vector.sub(desired, this.vel);
steering.limit(this.maxForce * 0.6);

this.applyForce(steering);
}

This is the part I’m most proud of because it is where the vehicles stop being just particles and start behaving like fireworks. Instead of using only one steering behavior, I combined three different ones so each particle goes through stages of motion.

First, seek() pushes each vehicle outward toward its explosion target, which creates the initial burst. Then arrive() slows the particle as it gets closer to that target, so the explosion doesn’t feel too mechanical or constant. After that, once the particle’s life drops below a certain point, follow() lets it drift with the flow field, which makes it look more like smoke or sparks being carried by air.

Sketch

Milestones 

• I combined the flow field with a basic explosion system. Vehicles are created at a point and use seek to move outward, while still being influenced by the flow field. The visualization is simple to focus on the behavior before adding artistic styling.https://youtu.be/0gokb2LBqo0
• I added arrival behavior, particle lifespan, and fading trails so the explosion becomes more natural and starts to resemble fireworks instead of just moving points.

https://youtube.com/shorts/n8gWaY6BZCA?feature=share

Reflection and ideas for future work or improvements

This assignment made me think about vehicles in a different way, because when I first hear “vehicle,” I usually imagine something literal like cars and that’s why it was hard at first to think of a concept. I used vehicles as abstract moving particles to create a firework system, which helped me see them more as agents following rules rather than physical objects. I was able to build motion that feels more expressive and dynamic. In the future, I would like to push this idea further by adding more variation in the explosions and refining the overall visual style.

Massless Suns and Dark Suns Recreated 

https://youtube.com/shorts/RYotOqlaMWA?feature=share

I chose this specific artwork because it’s the one that I felt the most confused about. I really like how small the room was compared to the other rooms in teamlab. I decided to recreate it but with a twist where the sky is dark instead and the rippling effect is circular. In the interaction itself the rippling effect as I remember it comes from waving but in my sketch it is just generated every 5 minutes. I decided to keep it simple and I really like how it turned out, 

A highlight of some code:

let dCenter = dist(s.x, s.y, width / 2, height / 2);

let dWave = abs(dCenter - waveRadius);

if (dWave < 55) {

  glowBoost = map(dWave, 0, 55, 2.6, 1);

}

I’m most proud of this part of the code because it controls how the glowing wave interacts with the stars in a natural and visually pleasing way. Instead of simply turning stars on and off, I calculate the distance between each star and the expanding wave, which allows the glow to change smoothly as the wave passes. This creates a soft ripple effect rather than something harsh or mechanical.

Sketch

Milestones and challenges in process:

I started with a very simple star field where all the stars were randomly placed across the canvas. While this worked, it felt messy and unintentional, so I moved to a more structured layout using a grid. After that, I introduced slight randomness in position, size, and glow to make the stars feel more natural instead of perfectly uniform. A key milestone was adding the wave interaction, where every few seconds a ripple passes through the stars and makes them glow. This helped bring the piece to life and added a sense of timing and rhythm. One of the main challenges I faced was making the wave feel smooth and natural instead of harsh or mechanical. I had to experiment with distance calculations and mapping values so that the glow would transition gradually rather than suddenly.

This assignment didnt have many milestones but this is the previous experimentation sketch:

Reflection and ideas for future work or improvements

 Overall, the sketch creates a calm and atmospheric experience, especially with the subtle glow and wave effect. I like how the stars feel balanced but still slightly natural rather than perfectly uniform. In the future, I would like to add more variation, such as a few brighter or larger stars, and experiment with different types of waves or subtle color changes to make the piece more dynamic and immersive.

 

StarryNight Reimagined. 

Project Overview

This project was inspired by The Starry Night and the visual qualities of the night sky, but reimagined in a different emotional context. Instead of a calm and dreamy atmosphere, I explored how the sky might look if it expressed anger. The project merges environment and emotion into a single visual system.

The design and intention developed throughout the process rather than being fully planned from the beginning. As I experimented, the idea of intensity became central, which led me to use a red color palette and a more minimal, abstract visual style.

Milestones:

1. This was my initial experiment from the proposal stage. It was simple, but it marked the starting point of my idea:

1. Here, I was experimenting with creating a background similar to The Starry Night, but I wasn’t satisfied with the result:

1. In this video, I started exploring intensity and motion more deeply. This is where the main direction of my project began to form. I really liked the movement here and considered it close to my final outcome, but I felt that something was missing; which was color: 

https://youtu.be/OGdQaReItaI

1. Final outcome: In the final version, I introduced color to represent intensity and emotion. I chose red because it strongly represents anger and energy, which aligns with the concept of the project

Video Documentation

https://youtu.be/PPoL7TNbMo4

Code snippet: 

let finalAngle =

noiseAngle +

wave * oscStrength +

swirlAngle * lerp(0.05, 0.22, e) +

(noise(time * 2.0, i * 0.1) - 0.5) * jitter;




let endX = startX + cos(finalAngle) * lineLength;

let endY = startY + sin(finalAngle) * lineLength;




line(startX, startY, endX, endY);

I am most proud of the part of my code where I calculate the final angle of each line using a combination of noise, oscillation, swirl, and subtle randomness. In this section, I am not relying on a single technique, but instead layering multiple systems together to create more complex and expressive motion. The noise provides an organic flow, the sine wave adds rhythmic movement, the swirl introduces a sense of direction around the center, and the jitter prevents the motion from feeling too predictable. By blending all of these into one angle, the lines feel alive and continuously evolving rather than static or repetitive. This part of the code reflects my understanding of key concepts from the course, especially noise, vectors, and oscillation, and shows how I can combine them creatively to produce a visually rich and emotionally responsive result.

Canva designing:

I used Canva to design the button because I wanted a customized visual element. This process was relatively simple, and I exported the design as a PNG and uploaded it into p5.js. 

link to design

Test printing:

Before the war, I contacted the inkjet printing team to test print my work and ensure the resolution was correct. I was able to partially test the print, and below is an image (not the best quality) of how it would have looked when printed.

Challenges: 

One of the main challenges I faced was controlling the balance between calm and chaotic motion in the flow field. At first, small changes in parameters like speed, noise scale, and oscillation made the animation feel too chaotic too quickly, which made it difficult to achieve a smooth transition using the slider. I had to experiment with different ranges and easing functions to slow down the beginning and make the buildup feel more gradual and intentional.

Reflection: 

Overall, I think the user experience of my project feels smooth and engaging, especially because the slider makes it easy to see how your input affects the visuals in real time. I like that the transition from calm to intense doesn’t feel sudden, but instead builds gradually, which makes it more satisfying to interact with. The motion and fading trails also help make the piece feel more alive and less static. At the same time, I feel like there’s still room to improve. Right now, the interaction is limited to just one slider, so in the future I’d like to add more controls, like changing colors, line thickness, or different motion styles, to make it more playful and customizable.

Link to drive for high resolution images: Afra Binjerais

Final Sketch

References:

• https://en.wikipedia.org/wiki/The_Starry_Night
• Openai was used to fix issues in code and to write comments 
• Canva was used to design button 
• Class material was also used in the early stages 

 

Midterm progress/ proposal

Concept & Design

For this project, I decided to continue exploring the idea of a moving Starry Night. In Week 3, I was inspired by Van Gogh’s The Starry Night and experimented with recreating some of its swirling motion using movers and attractors. I was also influenced by Batool’s work that week, since she implemented what I had envisioned. This time, however, I want to approach the concept differently, instead of movers and attractors, I am experimenting with: Perlin noise to create organic, natural-looking flow and Sine functions to introduce rhythmic oscillation and temporal movement to create the system

Designing the Code (Functions, Interactivity, Structure)

For this week, I experimented with using Perlin noise to determine the directional flow of the strokes and sine functions to introduce subtle rhythmic movement over time. There are no classes yet, since I decided not to use movers or attractors in this version of the system. For interactivity, I am planning to implement a slider to control movement strength or direction, possibly another slider to adjust speed or oscillation intensity, and a slider that changes the color palette. I am still deciding what additional controls would be meaningful without overcomplicating the system. 

States & Variations

As mentioned, I will have sliders and that will help me to produce different variations/ states to my system. I am thinking of creating variations such as:

• Different movement speeds
• Opposite swirl directions
• Stronger vs softer oscillation
• More chaotic vs more calm motion

Also, for the printing part, I’m thinking of having an icon on the top, so when I’m satisfied with how it looks, I will click on the icon and it will download as png to later print. 

Most Uncertain Part

The most complex and uncertain part for me was deciding whether to use movers and attractors again. In Week 3/4, I used attractors and movers; however, I remember that when I tried to recreate the motion of Starry Night using movers, it became very complex very quickly. Controlling behavior while maintaining aesthetic control was difficult with attractors and movers; at least for me. To minimize risk here is to either find an alternatives (which is where im headed) or learn new ways to use them. 

I provided below the current starting point, still a skeleton version, no interactions yet but its a vision to where I’m headed. 

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.