Module 2 Formstorming

Weekly Activity Template

Yiyi Yan

Project 2

Module 2

In this project, I explored different ways to create sound-driven interaction using p5.js. Through a series of experiments, I explored how p5.js can generate visualizations based on sound input and create interactive visual responses.

Activity 1

While I was listening to the sound at AA wing, the fan is making obvious noises. I recorded the sound of the toilet door opening and closing The sound of faucet in the toilet The sound of dryer in the toilet, includes the sound of pressing the button. People in the craft and design program is doing woodworking. I went outside the AA wing and I noticed the sound of icicles dripping. There's people playing billiards in the marquee, I can hear the sound of a billiard ball being struck, dropping into the pocket, then rolling along the return track. The sound of a person dragging the bin. As I walked around the campus outdoors, I heard this mechanical noise coming from the pipes. When I was at the bus stop, here is the sound came from a bus's engine The sounds from the road, including the car noises. I took the bus, there's the sound on the bus while it's driving. There was a lot of snow on the street, and when I stepped on it, it made a crunch sound, so I recorded it The sound of a plastic bottle being squished The sound of tapping a glass cup While I was climbing the stairs, I recorded my footsteps. The noise of range hood The sound of the switch button. The sound of a working vaccuum. The sound of typing on a keyboard The sound of mouse clicking. The sound of brush. The sound of dish spray. The sound of scissor. The sound of tape.

Activity 2

I started with the tutorial, as I clicked the page plays the sound, changes background color and shapes I tested this sketch with a heavier stroke and different color Sound Synthesis example exploration, I changed the color of waves to a rainbow color I tried different oscillator waves, to see how differently it would play. I also added the slider function to sketch 2 to test its behaviour. Exploration with audio playback sketch. I added more circles on the canvas and changed the colors. I looked for more shape examples on the library, then added lines in the code. THe movements here is pretty interesting. Continued to test how different shapes perform in p5 I tested with more shapes, squares and lines. Somehow the squares react with the movements and changes to circle? I don't why it does that but it's kinda fascinating. I tested triangles. I played around with the color from the mic-in sketch I added another ellipse and changed their height in the code. They appeard vertically symmetrical. I added this sound waves into this sketch to see how it would look like. In this sketch, I modified a few parameters such as stroke weight, numbers of points and radius I continued testing, changing the color scheme to blue and adjusted the position where the line extent. I increased the number of points, which turns out to be a ring. Exploring with the speech to text code I added more texts here, and keep it as a black & white aesthetic. I chose a fun font to play with. The page flashes the color as it receives the corresponding color voice command. Moving the square by speaking movements command, The square moves randomly once it receives command. Adding and moving more shapes I followed the tutorial and created my audio model, it's very sensetive to sound even though I didn't say anything. As I said my labels, it also changes the background color. The emoji falls as it receives sound, instead of appearing without transition.

Project 2

Final Project 2 Design

P5 Interactive Audio Web Header Portfolio

Final design. This project is an interactive sound visualization. It uses microphone input to transform audio into dynamic visual forms, allowing the graphics to respond directly to the voice and surrounding environment. The web header may take a few seconds to load.

Click here to see it working on my server

test2Lorem ipsum dolor sit amet, consectetur adipiscing elit

×

Powered by w3.css