Assignment 7

Inspiration 

I chose teamLab’s “Floating Microcosms” because I love how it feels like a living environment. In the real installation, stone-like objects float on water and change color when touched. I wanted to see if I could use math to copy that floating feeling and make digital objects talk to each other using ripples of light.

Code Highlight

I am proud of the Perspective Ripple. On a flat screen, it’s hard to make things look like they are lying down on the ground. I used a “math trick” to make the ripples wide but short. This tricks your eyes into thinking the water is a flat surface stretching away from you.

// This makes the ripple look like it's flat on the water
if (this.rippleSize < 140) {
  noFill();
  // The ripple fades out as it gets bigger
  let alpha = map(this.rippleSize, 0, 140, 0.6, 0);
  stroke(this.hue, 70, 100, alpha);
  
  // The Trick: Width is 2x, but Height is only 0.6x
  ellipse(0, 20, this.rippleSize * 2, this.rippleSize * 0.6);
  this.rippleSize += 1.8;
}

 

Milestones and Challenges

• Milestone 1: The Floating Feeling. I used Simple Harmonic Motion (sine waves) to make the objects bob up and down. The challenge was making them look natural. Adding a tiny bit of “side-to-side” movement made them feel much more like they were on water.

• Milestone 2: The Water Surface. At first, the background was just a boring blue. I fixed this by drawing hundreds of thin lines that move slightly. This made the water look like it was actually moving.

Sorting the Objects. A big problem was that objects in the back were being drawn on top of the ones in the front. This made the 3D effect look broken.

As a solution, I added a sort command that checks the Y-position of every object. It makes sure the ones at the bottom of the screen (closest to you) are always drawn last so they stay in front.

Reflections and Future Ideas

This project taught me that small details, like a shadow or a slight tilt, make a big difference in making digital art feel “real.” For the future I could add.

• Sounds: I want to add a “ding” sound every time a ripple hits another object.

• Wind: I want to make it so if you move the mouse fast, it creates “wind” that pushes the objects around.