NOC | W4 – “Gravity” 🎧🎵🌍

 

• Working Process

• Inspiration

This week’s assignment requires us to create an imaginary environment with forces. The first idea that came to my mind in class was to visualize my inner mind when listening to songs.

I love music, like everyone does. Whenever I listen to music, I always feel there are multiple forces interacting with each other and stimulating various images in my mind.

I especially enjoy listening to music while traveling by train and reading novels. When I’m on the train, listening to the music in my headphones while gazing at the scenery rushing past the window, it allows the blurry scenery and the music to form new images in my mind, just like watching a music video. When reading novels, music also allows our brains to formulate various scenes and images of different kinds. Music creates a world and environment in my mind that only I can see at that moment. And last week, I happened to be recommended a song by my idol when browsing Weibo. The song is “Gravity” by John Mayer. “Gravity,” accompanied by its melody, formed its own world in my mind. When listening to it,  I feel like I’m the protagonist in a Hollywood blockbuster, leaving the exploding space capsule after defeating the monsters, floating in the universe with a parachute, and experiencing surreal and dream-like sights and sounds. My assignment is based on this song. The environment I depict is the scene in my mind when I listen to this song.

• “Sound Visualization”

The rhythm of this song is very consistent, so I roughly divided it into four sections based on the changes in the lyrics and melody. I first drew sketches by hand outlining which forces and transformations would be involved in each section, aiming to ensure that the displayed forces are harmonious with the song’s rhythm. Then, I created four classes in p5.js to correspond to these sections, using the keys “1”, “2”, “3”, and “4” to switch between them. (Due to the consistent and stable rhythm of the song, there isn’t a particularly strict order for when these four classes appear in the song.)

Part 1: class B1

Part of the song: 0′-34′ of the song (Prelude)

Atmosphere I want to achieve: balls that decrease in size as they descend-giving the sensation of a falling droplet; a clean” feeling; things are falling.

Objects Included: 3 balls: the center ball is always there; the other two balls on its left and right will show up when the bounceCountB1 reaches 14 (The design is based on the rhythm of the song.)

Forces Engaged: center ball: gravity only; the other two balls: gravity and wind;

Main Function: falling down and bouncing.

Effect:

 

Part 2: class B2

Part of the song: 34′-1’20’

Atmosphere I want to achieve: I was floating in the universe. I saw the galaxies. I fell. I finally landed. (The idea is based on the lyrics: “Gravity is working against me, and gravity wants to bring me down.”

Objects Included: 3 balls in the center (the planet I finally landed on); an inner circle of balls (b2s1): 18 balls; a middle circle of balls (b2s2): 36 balls; an outer circle of balls (b2s3): 72 balls; the rads of one and the balls next to it are different.

Forces Engaged: Attraction inside c1 ball &b2s1 balls/c2 ball &b2s2 balls/c3 ball & b3s3. There’s no attraction between b2s1/b2s2/b3s3;

Main Function: Attraction/Reappear/Centre balls (the planet) become large when more small balls are attracted to them (calculated by the reappear count).

Effect:

 

Part 3: class B4 (yes, B4 not B3)

Part of the song: 1’20’–2’30

Atmosphere I want to achieve:  Floating in space, distant planets left behind; Particles in the universe attract and repel, in constant motion; Feeling weightless and falling.

Objects Included: 4 balls initially at 4 corners.

Forces Engaged: Attraction and Repulsion;

Main Function: Attraction and Repulsion; bounce; Transparency and radius (mass) of the balls are based on the distance between the ball and the center point; the radius of the balls will increase slightly every time they bounce the edges.

Effect:

 

Part 4: class B3 (yes, B3 not B4)

Part of the song: 2’30’– 4’05

Atmosphere I want to achieve: Tidal (fountain) surges, gradually diminishing due to gravity and resistance, eventually calming down; yet influenced by the wind, they can start moving again; a sense of soothing with underlying fluctuations, transforming into nothingness after the oscillation.

Objects Included: 20 balls distributed along a trigonometric curve. Pop up one by one from left to right.

Forces Engaged: Gravity; Resistance; Windforce.

Main Function: Apply Force; bounce; check collision (when balls collide with each other, they will vanish.)

Effect: 

 

• Finished Work

Put on your earphones and enjoy the world inside the music 🎧🎵🌍

 

• Reflections and Lessons Learned

1. Ways to portray attraction/repulsion/collision in p5js.
2. Use “key”s to activate the classes I want to show. And each time they get pressed again, the assigned class will turn back to default.
3. Getting things to show up one by one by using frameCount.
4. Use bounceCount/reappearCount to interact with the transformation of objects.

• Link to the Sketch (Click it!)