Module 2 Formstorming

Weekly Activity Template

Sanren Zhou

Project 2

Module 2

In this project, we will be tasked with creating an interactive web page header that incorporates interaction and sound. This header could be a good addition to a portfolio site. We will consider how an interaction represents us as a designer to communicate our design interests.

Activity 1

This recording of the audience cheering and applauding comes from a live comedy show I watched before, and I've extracted the audio from the video. What can be heard is that there are no additional distracting noises because it was an indoor performance.

This is the sound I recorded while eating an apple, it's very clear and representative.While recording, I tried to avoid breathing, which gave me a very pure sound of eating an apple.

I read every day, so I turn the pages every day. So I record the sound of turning the pages. I was thinking that maybe this sound could be paired with some page turning animation in web design.

This sound comes from my sound bowl,Its sound is a regular vibration and calming, I can even imagine its sound waves, regular, uncluttered, and repetitive.

I drink a glass of Vitamin C every day. After this Project started, I began to pay attention to the sounds around me, and I perceived that the sound of the effervescent tablets dissolving was also very soothing. I was able to hear that the bubbles went from weak to strong, and I could even feel the bubbles tingle in my mouth.

I recorded this sound while my cat was eating. He eats dry cat food, so you can hear him crunching it and the sound of him swallowing the food.

My cats love to purr, especially when they are feeling happy or comfortable, and they make regular purring sounds. I also enjoy listening to this sound as it is a signal that they are content and healthy.

The sound of my grandmother's clock. I recorded this sound at night to make sure to avoid other noises. In fact, fewer and fewer people use clocks these days, and people are willing to buy silent clocks, but this old-fashioned clock sound always reminds me of times in the past.

That's the sound of me pouring coffee beans into the bottle. I worked in a coffee shop, and the sounds in a coffee shop are very complex and varied. But the one that impressed me the most was the sound of pouring coffee beans into the machine every morning, so even though I don't work in a coffee shop anymore, I still insist on grinding some coffee beans every morning to wake up my day.

The sound of cutting vegetables. When I play it, I think it's very similar to the sound of eating an apple, both are very crisp.

The sound of opening and closing a drawer.

The sound of a friend's Espresso machine. This is the special sound I get when I use steam to foam milk. It is somewhat sharp and is the sound of steam, bubbles and liquid coming together. Maybe it can be combined with the sound of coffee beans to make an interesting design.

Keyboard typing sounds. A sound I hear every day, crispy and rhythmic.

Alarm sound when microwave is finished heating. Sharp, loud and rhythmic.

Mouse click sound. Very crisp. Like the sound of the keyboard, it's a sound I hear every day as I work, but sometimes it can be a little loud and distracting.

The sound of a pencil writing on paper. This rustling sound always reminds me of the sound of a mouse, and if it could be a little softer, it might sound like the sound of leaves.

The sound of a ping-pong ball falling. It's an interesting sound because the ball is bouncing more and more frequently and the sound is coming out faster and faster. I think it's great for associating with bouncing related animations.

The sound of pouring water into a cup. If we listen carefully, we can notice that as the water level rises, so does the pitch of the sound.

The sound of an old radio with a poor signal. This is a sound that is becoming less common in life. The amazing thing about it is that every time I hear it, I feel safe and secure, like I'm back in my childhood when oldies were playing in the next door room and I was about to go to sleep.

Squeeze the rubber ducky sound. Sharp, loud, and somewhat comical.

The sound of walking on snow. In this recording, you can hear that the snow is hard and mixed with some ice. If it was freshly fallen snow, there would be more of a friction sound, like squeezing starch.

A little melody played on the ukulele. Unlike other sounds, it is more pleasing because it comes from the instrument.

This is the sound of me walking on a concrete floor. The sound of walking on a concrete road is crisper and shorter than walking on any other material.

The sound of water running into a sink. Because the kitchen sink is made of metal, the special vibration of water hitting metal can be heard.

The sound of rolling up the blinds. A very distinct grainy sound combined with the noise of the bearings. Although blinds are a simple mechanism, their sound gives me a strong sense of industrial feel.

Activity 2

This video introduced in Steve's tutorial taught me how to use ADSR envelopes in p5.js to control sound dynamics. I realized that by adjusting Attack, Decay, Sustain, and Release, I can make sounds more layered and expressive, creating more natural and dynamic audio effects. This gave me a deeper understanding of sound design and its finer details.

I first tried changing some parameters in the JavaScript from the first tutorial. I increased the display position of each segment, which resulted in lines that were very far apart. This helped me understand how different parameters affect positioning and the visual effects that can be achieved.

I then changed the display values, which caused all the bars to concentrate in the bottom left corner. I also adjusted the setADSR, modifying how the waveform affected the bars. Initially, the waveform was low on both sides and high in the middle, but I changed it to be low on the left and high on the right.

A screenshot of the code shows that I am mainly experimenting with the values in the `envelope.setADSR` section, as they have the greatest impact on controlling the relationship between the sound wave and the graphics.

This is the adjusted version of Practice 1. The effect in the GIF is not very obvious, but in reality, by adjusting different values, I can make the melody slightly delayed or extended, which allows the final graphics to change in a way that better fits my needs.

Based on the first practice, I created my own visual effect. I used the ukulele sound from Activity 1 as a trigger, allowing the stripes to change according to the ukulele's sound. I used thinner stripes and softer colors to make the visual effect more pleasing and easier to perceive.

Practice from Tutorial 2. I first changed the length of each stripe and got this effect. Of course, this wasn’t what I wanted because the stripes were too long and aggressive. However, I think this effect would work well with intense sounds or dramatic scenes.

In this practice, I changed the color of the stripes in the circular pattern. I adjusted the color range from 360 degrees to 180 degrees, resulting in a ring with fewer colors. This improved the visual effect.

Still based on the ADSR tutorial video, I modified the spectrum parameters in P5.js. I learned that it can change the waveform, and I’m excited to see the final result.

After adjusting the number of bars, spectrum, and other parameters, I achieved this result. The graphic has changed from scattered bars to a connected waveform area. I’m very satisfied with this outcome because I’ve seen many similar designs, and I believe it has a more modern and futuristic feel.

I’m testing P5.js from Tutorial 3. In this practice, I used the clapping sound from Activity 1. As I click on different areas and drag the mouse at different speeds, the audio speed and pitch change accordingly.

I created a P5.js effect for the bubbling sound of the effervescent tablet from Activity 1. I wanted to use irregular small spheres to represent bubbles, making them move unpredictably according to the sound. This was my first attempt, but I found the effect unsatisfactory because the vibrations of the spheres were too intense, making it less realistic.

Here’s the JavaScript code for the small sphere effect. I primarily used the constructor and move functions to create this effect.

I continued exploring ways to represent bubbles. This time, I gathered all the small spheres in the center of the canvas and made them collide with each other, evoking the tingling sensation of bubbles in the mouth.

Here is the main code that creates this effect. You can see that I restricted the movement range of the small spheres, keeping them concentrated in the center of the canvas.

Building on my previous practice, I made the colors of the circles more diverse. I used `fft` from `p5.sound.js` to get the sound frequencies and used `amp` to control the size and rising speed of the circles.

Using the same principles and code, I changed the appearance of the circles to make them more realistic, simulating actual bubbles.

I wanted to create a shimmering water effect, so I searched for some tutorials online and experimented with Perlin noise, `vertex()`, and `blendMode(ADD)`. After multiple attempts, I achieved the effect shown in the image.

I explored other effects, such as building on the previous bubble effect by using particle systems and ray effects. I also applied `strokeWeight()` to make the rays flicker, resulting in an effect that resembles cosmic stars.

The principle behind this image is the same as in Image 14. I replaced circles with differently colored triangles, allowing them to change with the sound, creating a mosaic or smoke-like effect. I believe that, based on Image 14, many different designs can be created, which is one of the reasons I find P5.js particularly interesting.

I want to simulate an effect similar to a water droplet falling to the ground. The circle grows larger with the sound and disappears after reaching a certain size. I use `amp.getLevel()` to measure the sound level and `map()` to control the circle's size. Each time a significant change in sound is detected, a new ripple (circle) is added, while the old ripples gradually expand and fade until they disappear.

Similarly, using the fading effect, I replaced the circles with squares and arranged them to cover the entire canvas, creating the effect shown in the image.

I used oscillating lines to represent the sound of walking. Walking sounds have rhythm and frequency, so I continued using `amp.getLevel()` to get the volume and applied the `swing` function to add movement to the lines. I also used the `sin` wave function and Perlin Noise to make the oscillation smoother.

I created multiple parallel lines and used `p5.FFT()` to analyze sound frequencies, allowing the bass to influence the shape of the lines. I used `sin` to make the lines oscillate, creating this effect. It’s actually quite simple, without using complex graphics, but the result is very minimalistic and stylish, with a great visual impact.

I made a small modification: I kept the upper part still while allowing the lower part of the lines to change with the sound. I used `yOffset > height / 2` to make only the lower part dynamic. This allows for more variations in the effect.

Project 2

Final Project 2 Design

P5 Interactive Audio Web Header Portfolio

My Final Design will react to sound from the microphone. When it picks up sounds in a certain range, the circles on the screen will change color. Steady sounds like clapping will cause steady changes, while music will make the colors change faster, like a disco ball or an LED screen.

Click here to see more details

Try observing how clapping, tapping on a table, and playing music change the visuals. Recommended playlist:

- **Janet Jackson - With U**
- **Michael Wycoff - Looking Up to You**
- **Eurythmics - Sweet Dreams**
- **Michael Jackson - Rock With You**
- **Britney Spears - ...Baby One More Time**

and other fast-paced retro dance songs.