Module 2 Formstorming

Weekly Activity Template

Yawen Qiao
This project allowed me to find elements from real life and iterate them step by step into our interaction design. For the first activity, we looked for sounds associated with objects. In the second activity, we utilized the collected audio to create an animation of the associated sound. This gave the sounds a vaguely animated representation as well as an interaction. Mixing them together, we implemented a more complete sound interaction in our code. It gave us an idea of how sound iterates with graphics and animation.

Project 2

Module 2

For this one activity we focused on collecting the sounds around us in our lives. We will start this project by exploring sound and the way we react and respond to sound This activity at this stage is to collect favorite audio and experiment with sound editing in editing software. We will be exploring and collecting sounds based on quite overwhelming themes.

Activity 1

It's the zipper on the dress. I recorded the sound of the zipper as my audio.

This is the scissors. I used the sound the scissors made as my audio.

This is duct tape. I used the sound of ripping the tape as my audio.

This is a bottle of vitamin b2. i used the sound of opening the jar and shaking the bottle as my audio.

This is the curtains in my room. I used the sound of the curtains being pulled back as my audio.

This is the tissue box. I utilize the sound of the paper towel pulling out as my audio.

This is the glass. I use the sound of the glasses hitting each other as my audio.

This is the shower head in my bathroom. I use the sound of the shower turning on as my audio.

This is my notebook. I use the sound of flipping the notebook as my audio.

This is my notebook and a pencil. I use the sound of the pencil drawing on the notebook as my audio.

This is my pencil bag. I utilize the sound of pulling the zipper of the pencil bag as my audio. (The difference between this and a clothes zipper is that this sound is a little thicker)

This is a bottle of alcohol spray. I utilized the sound of the nozzle spraying as my audio.

This is a roller coaster that I filmed. I used the sound of people playing on the roller coaster as my audio.

This is a picture I took on a highway. I utilized the sound of cars moving and the turn signals as my audio.

This is a shot I took at night in my room. I utilize the sounds made by rain at night as my audio.

This is a trail that leads into the woods. I utilize the sound of walking across the dirt floor as my audio.

This is a picture I took in the woods. I use the sound of birdsong in the forest as my audio.

This is a picture taken at the aquarium. I used the sound of the noisy crowd at the aquarium as my audio.

This is a picture of snow. I used the sound of snow and wind as my audio.

This is the faucet in the bathroom. I used the sound of turning on the faucet and the water flowing as my audio.

This is the door to my room. I utilize the sound of opening and closing the door as my audio.

This is a bag of cookies. I use the sound of eating and chewing cookies as my audio.

This is the stairs in my house. I use the sound of going down the stairs as my audio.

This is my keyboard. I use the sound of hitting the keyboard as my audio.

This is a card. I use the sound of the card closing and opening as my audio.

Activity 2

Depending on the size of my audio sound, I use wavy lines to visualize it. The audio is the sound of a zipper being zipped.

Depending on the size of my audio sound, I visualize it with a line that curves like a cut piece of paper. The audio is the sound of scissors.

Depending on the size of my audio sound, I visualize it with sound waves and small balls. The audio is the sound of tearing tape.

Depending on the size of my audio sound, I visualize it with scattered orbs. The audio is the sound of shaking a pill bottle.

Depending on the size of my audio sound, I visualize it with the ejected orbs. The audio is the sound of pulling the curtains.

Depending on the size of my audio sound, I use a circle to visualize it. The audio is the sound of a paper towel being drawn. The vibration of the orb is based on the frequency of the tissue draw.

Depending on the size of my audio sound, I visualize it with a small ball that pops up. The audio is the sound of clinking glasses. The vibration of the blob is based on the frequency of the paper draw.

Depending on the size of my audio sound, I visualize it with a sound wave. The audio is the sound of the shower.

Depending on the size of my audio sound, I visualize it with some circular movement. The audio is the sound of a turning page.

Depending on the size of my audio sound, I visualize it with circles made of orbs. The audio is the sound of a pencil drawing.

Depending on the size of my audio sound, I visualize it with a continuation of wavy lines. The audio is the sound of the zipper. The vibration of the wavy line is based on the frequency of the audio.

Depending on the size of my audio sound, I visualize it with ink dots that will appear out of nowhere. The audio is the sound of a squirt of water. The number of ink dots is based on the frequency of the water spray.

Depending on the size of my audio sound, I visualize it with jumping lines. The audio is the sound of a roller coaster.

Depending on the size of my audio sound, I visualize it with the movement of a small ball. The audio is the sound of a driving car.

Depending on the size of my audio sound, I visualize it with a circle of vibrating columns. The audio is the sound of rain.

Depending on the size of my audio sound, I visualize it with scattered stars. The audio is the sound of birdsong in the forest. The number of stars is based on the frequency of the sound.

Depending on the size of my audio sound, I visualize it with jumping lines. The audio is the sound of an aquarium.

Depending on the size of my audio sound, I visualize it with ever-present ink dots. The audio is the sound of fireworks.

Depending on the size of my audio sound, I visualize it with ever-present circles of squares. The audio is the sound of a faucet.

Depending on the size of my audio sound, I visualize it with a line line that goes all the way around. The audio is the sound of the door opening. The vibration of the lines is based on the frequency of the audio.

Depending on the size of my audio sound, I visualize it with scattered stars. The audio is the sound of chewing something. The number of stars is based on the frequency of the sound.

Depending on the size of my audio sound, I visualize it with flying stars. The audio is the sound of descending stairs.

Depending on the size of my audio sound, I visualize it with ever-present ink dots. The audio is the sound of a keyboard.

Depending on the size of my audio sound, I visualize it with ever-present circles of squares. The audio is the sound of the snaps.

Project 2

Final Project 2 Design

P5 Interactive Audio Web Header Portfolio - Midnight Star

This is my final design. About my inspiration, it came from the ceiling in my room. I really like the star element, so I chose to create something related to it for the second campaign. As an iteration, I chose the star theme for my final project. For my design, I chose some elements about imagery. For example, the click interaction, when you click on the star it makes a crisp sound, here it represents that the star is like glass in my mind and represents its brightness blooming in the darkness of the night. For the active mouse interaction I chose to add a trailing tail to represent this. Because I think it can represent the trajectory of the shooting star. In the sound interaction, when you make a sound, the stars will get bigger. It's like making a wish and reacting to it. This is my understanding of the project.

Click here to see it working on my server

test2Lorem ipsum dolor sit amet, consectetur adipiscing elit