Module 2 Formstorming

Weekly Activity Template

Yinman Tang

Project 2

Module 2

In this project, explored sound and used sound as an inspiration for my final visual design.

In Activity 1, I recorded many sounds from my living environment and built a sound library. I realized that these sounds are often dismissed; they have different timbres, loudness, and frequencies, so listening to these everyday sounds that can bring us different feelings is actually very important.

In Activity 2, I explored how to use p5.js resources to manipulate sounds, following the given tutorials. I explored different ways sound was triggered on web pages and tweaked various aspects of the sound, such as loudness and frequency. I also integrated the sound with the web page's visual effects by adjusting specific value in code.

Activity 1

The audio of opening the lid of the plastic bowl

The audio of opening and closing the door

The audio of water flowing from the faucet

The audio of opening the door of a microwave

The audio of moving the temples of the glasses

The audio of inserting the plug into the socket

The audio of turning on and off the Airpods case

The audio of turning on and off the light switch

The audio of pressing the automatic door button

The audio of connecting the magnetic charger to my MacBook

The audio of pressing buttons on a venting machine

Activity 2

The tutorial shows a basic switch of turning on/off the audio.

Turning on the audio by clicking the webpage.

I adjusted the frequency of the audio by changing the value.

The second js file adds a slide bar to adjust the volume.

I changed the background color to purple and dragged the slide bar to adjust the frequency of the audio.

I dragged the slide bar to adjust the frequency of the audio.

The tutorial shows a visual effect of a syllable change.

I changed the width value and the scale became wider.

I changed the width value and the scale became thinner.

The tutorial shows a webpage which can be clicked to play/pause the audio. This is the pause state displaying red color.

This is the play state displaying green color.

I changed the value of the background color.

I dragged the slide bar to adjust the volume of the audio.

I dragged two bars to adjust the rate and the volume of the audio respectively.

I changed the color of the slide bars to pink color.

There are two ellipses on the given webpage and the volume of the audio can be adjusted by moving the mouse. I changed the background color to pink.

The tutorial shows a webpage that can turn the input audio into two waveforms.

The tutorial shows a webpage that the circle can adjust its size according to the volume of the input sound.

I adjusted the sensitivity of this circle, which changes its size according to the sound.

The tutorial shows a webpage that the volume and frequency of the input audio can be displayed on the circular ring.

I changed the background color to deep grey.

Project 2

Final Project 2 Design

P5 Interactive Audio Web Header Portfolio

Ocean Universe is an interactive audiovisual web that translates external voice into a responsive oceanic cosmos. Using microphone input, the web transforms sound amplitude and rhythm into dynamic waves, ripples, and luminous star movements across a beautiful landscape. Users’ voices appear to stir tides and awaken distant light.

The design explores the relationship between sound, motion, and emotional atmosphere, creating a calm and immersive digital horizon. The design combines real-time data input with fluid visual behaviour and spatial audio feedback. The result is a poetic interaction that blends oceanic depth with cosmic vastness, encouraging reflective and sensory engagement with digital space.

Click here to see it working on my server

Final Design