Module 2 Formstorming

Weekly Activity Template

Zixin Zhang

Project 2

Module 2

At the beginning, I explored the sounds around me and the sounds made by different objects. I recorded some of them with my phone, such as the sound of a hair dryer and the sound of rain.

Then I started to think about what these sounds mean and how they could connect to my project. I also thought about how to show them visually. I explored how sound could be translated into movement in p5.

At first, I tested simple lines and particles. I used noise() and random() to make the movement feel more natural. I also used sin() and cos() to create wave shapes and circular motion, so the elements could move together and react to the sound.

After learning how to create simple lines with code, I started to try more complex visuals that respond to sound. I experimented with different shapes and colours. During this process, I learned how to use beginShape() and vertex() to create polygon shapes. I also tested colour transparency and blending to layer colours and make the visuals stronger.

Activity 1

The sound of a bus arrving at the bus stop

The sound of shaking water inside a water bottle

The sound of scissors opening and closing

The sound of sweeping the floor with a broom

The sound of a zipper opening and closings

The sound of a hair dryer turning on and changing airflow from low to high

The sound of shaking salt in a container

The sound of rain dripping on my balcony

The sound of footsteps crunching on the snow

The sound of running water from a faucet

The sound of chopping vegetables with a knife

The sound of an electric screwdriver turning on

The sound of setting and starting a microwave

The sound of boiling water using a kettle

Activity 2

I created a background and added a start button. When you click it, it changes to stop.

There is a looping frequency. The tallest bar in the middle shows the sound playing. It works as a sound visualization.

I changed the sound to play the next note every frames. I also changed the colour to purple.

I changed the spectrum colour to blue. I also increased the frequency and made the waves thinner.

When you drag the slider at the top, the frequency changes. The red background and the text “VALUE: 1000 Hz” also change with it.

I first used three circles stacked together. I set different opacity and made them expand and shrink.

Then I adjusted the colour and size. I made the colours softer and reduced the movement range.

In this stage, I added a slider bar. Users can change the colour in real time by dragging it.

With a black background, I changed the main circle to bright yellow. I also added a very thin outline that moves with it.

I linked the size of the shape to the mouse movement. When the mouse moves, the shape expands and shrinks.

First I tried to draw a blue circle and a green circle and connected them. I linked their size to the mouse X and Y position. When the mouse moves, the circles grow and shrink together.

Then I changed the motion. The mouse no longer controls size, but the movement path. I also slowed the background refresh, so there is a trail effect.

I changed the circles into squares and adjusted how they overlap.

I tried softer colours and light gradients, like from cyan to orange.

I coded my first sound visualization. I imported audio data, and the shapes react to the sound frequency.

I started by drawing a waveform on the screen. At first, I used random values, so the red line moved a lot on a gray background.

I found the lines too messy, so I adjusted the settings. I made the movement smaller. The waveform became more regular.

Then I increased the wave density. The red lines became more crowded and faster.

I added a second line and changed the background to black. I used yellow and green lines with different speeds and heights.

Finally, I made a full dynamic waveform and added a sine effect, so it moves like water.

I kept the wave similar to before, but made it less high. Then I linked the wave to the x position of the mouse. So when the mouse moves left and right, the wave moves with it.

I wrote code to draw a gray rectangle in the center of the screen with “Start” on it. This was for later use.

Then I added some logic. I created a feedback system. When the user clicks, the button changes colour, like the border turns red. This shows the action is received.

I combined the waveform and the button together.

Finally, I added a red circle that shrinks with a frequency, and put the button in the center.

Project 2

Final Project 2 Design

P5 Interactive Audio Web Header Portfolio

This project explores how environmental sounds can shape the identity of a place through an interactive soundscape created with p5.js. The project focuses on natural sounds from the beach, such as waves, wind, birds, boats, and distant people.

The project shows a simple beach scene where wave sounds play continuously in the background. Users can press different keys to trigger other sounds, such as birds, wind, boats, or people. Simple visual elements appear with each sound and slowly fade away, so different sounds can layer together. In addition, when the user blows into the microphone, a wave sound and visual wave effect will appear.

The goal of this project is to let users explore how sound can shape the feeling of a place. By interacting with different sound layers, users can experience their own version of a beach environment.

Link to my work