Module 2 Formstorming

Weekly Activity Template

Ho Yi Chloe Tang

Project 2

Module 2

In this project, I will create an interactive web page header using P5.js Sound, which incorporates movement and sound and runs on my Phoenix server.

Activity 1

The sound of pouring water into a plastic cup. The sound of running water. The sound of the pan being put on the stove. The sound of closing and opening the cupboard. The sound of turning lights on and off. The sound of using a marker to write on the whiteboard. The sound of a toothbrush in 3 different frequencies. The sound of dangling keychains. The sound of using the hairbrush to untangle my hair. The sound of opening and closing the sliding door. You can slightly hear the sound of traffic outside. The sound of shaking a bag of chia seeds. The sound of opening and closing a pair of scissors. The sound of crushing a Walmart reciept made out of paper. The sound of igniting a lighter twice. The sound of using the bottle of cooking oil spray. The sound of typing on the laptop. The sound of tapping my fingers on the closed laptop. The sound of closing the zipper of the jewelery box. The sound of hitting the plushie with my fist. The sound of moving a chair with wheels. The sound of clapping my hands and cheering. The sound of applying my lipstick; make sure the application is even by smacking my lips, and finally creating a smoosh sound. The sound of fatigue. The sound of playing pool in the Marquee. The sound of music ahd chatter inside the Marquee.

Activity 2

I used a sine wave with low frequency (220 Hz) and applied a gradient from white to blue to convey calmness. Next, I added thin, slightly wavy lines that creates slow movement of the lines when the sound starts playing. I avoided making the waves too wavy because that would suggest more intense sound movement. This time, I tried using triangle wave for a clearer sound. Then, I set the frequency to high (1100 Hz) and change the background to neon blue. I added large white circles that appear randomly across the canvas and stay visible until I pause the sound. I used a sawtooth wave with middle frequency (530 Hz) to imitate TV static noises. The angular lines loop vertically and horizontally, creating a jagged, dynamic motion. I created another version to show the looping behaviour and gradient effect on the jagged lines for visual emphasis. I accidentally deleted the stroke() command, which caused the background colors to adopt the gradient of the lines. I decided to keep it because it produced an unexpected but interesting visual effect. Using the pouring water audio I recorded from activity 1, I modified the sketch.js in amplitude_analysis by imitating the effect of ripples and had them expand and contract smoothly while the audio plays. I used tha audio of the pan hitting against the stove top and adjust strokes and colors. The colors change when you click on the canvas. Using the typing audio I had, I used point shapes that correspond to every typing sound. The louder the sound, the bigger the size of the circle. Here I referenced Brushstrokes by Qiongting, where the audio only plays when the mouse moves. If the mouse stops moving, the audio stops as well. This effect imitates real time usage of markers. One of the tutorials mention suggest connecting lines from one sphere to sphere. Combining this effect with my electric toothbrush audio, where there's 3 different frequencies (how fast the brushes are) creates an interesting effect where the spheres translate at the same direction while increasing/decreasing in size. I made 4 sphere which resembles the chair I own with wheels installed. You can freely move the spheres in whatever direction, which in turn continue the audio of the chair rolling across the floor. I found a light mixture tutorial that shines light on the 3d models as you move your mouse. I figured it would be incredibly helpful for my light audio as it flickers when you turn on and off. It gave me ideas to create a dark background with multiple objects, and adding a bright light that that can move in or away with ease. I came across a folded paper brush tutorial that overlaps when you remove the background colors in the function(draw). An interesting effect happen where the folded papers overlap one another, creating a visual appealing piece. Similar to the point one, there was a spray paint effect and I modified it so that the spray paint will randomly appear on the canvas when you play the audio. Here I combined a bunch of particles together inside a container, and made it shake up and down along with the bag of seed shaking audio. Using sine wave again with higher frequency, I applied a simple yellow straight line that changes into a twisted jagged line when played. Imitating a ECG (electrocardiogram) line, I created the sound by adjusting the amplitude and frequency. Once played, the straight line turns into jagged spikes, and small hearts float up as background decoration. Tutorial 1 Sketch 2: Based on a tutorial on how to make circular waves, along with the tutorial from Steve and The Coding Train, i experimented and played around with frequencies. I experimented with 3D shapes again and overlap some shapes together. I captured this photo for future reference to how i can align the objects together, matched with good colour palette such as this one. I thought about using 3D shapes to represent the little trinkets on my lanyard. Making use amplitude, the shapes increase/decrease in size because of the audio, and also rotate on their own. Tutorial 2 Sketch 6: Change volume and speed by dragging into a certain direction, in the process also change the width, height and length of the prisms. Using tutorial Bow lighter by sairamved, I tried to create a similar affect that react to sound, in particularly the flicker that you hear in my lighter audio. Once the flicker sound comes up, the arrow surrounding the circle grew bigger in reaction to the amplitude. I experimented my mic_input and use rectangle to be centred on the canvas and scaled up the height by volume so that the microphone volume is more visually visible. Following tutorial 3 sketch 0, I played around with the wave lengths and increase the range, which made it easy to change and created interesting effects when lined up. Taken from the example called FFT Spectrum copy by codingtrain.

Project 2

Final Project 2 Design

P5 Interactive Audio Web Header Portfolio

An interactive web about a relaxing Frutiger Aero-inspired digital space.

Here are the links to my published p5.js sketch and my GitHub file. I also attached YouTube link here.


My design direction focused on creating a digital safe space reminiscent of early 2000s design systems, where people can relax while going about their activities. I aimed to evoke a sense of nostalgia that many find comforting, especially for young people who often turn to retro aesthetics and familiar designs when the future feels uncertain. Design principles such as alignment, repetition, color, space, rhythm, and proportion guided my creative decisions throughout the project. This experience helped me develop a deeper understanding of p5.js and how sound can influence and enhance a user’s overall interactive experience.

×

Powered by w3.css