Module 2 Formstorming

Weekly Activity Template

Minh Vo


Project 2


Module 2

Activity: Listening exercise. I collected different sounds wherever I went and compiled them into a library.

Activity 1

The sound is a steady, low-pitched hum of a GO Transit bus engine, with a consistent mechanical rumble typical of a large vehicle in motion. The sound is a clear, automated TTC subway announcement, likely providing station or transit updates. The sound is a repetitive ringing of a GO train bell, signaling arrival or departure with a distinct, steady chime that resonates across the railway platform. The audio features a mix of a TTC subway station announcement and the rumbling engine sounds of an approaching or idling train. The audio captures the rhythmic sound of footsteps and the rustling noise of a jacket, possibly due to the person's movement. The audio features the rhythmic, low-frequency thumping of helicopter rotor blades cutting through the air. The audio captures the steady, continuous hum of an air curtain in operation at Eaton Centre. The audio features a soft but rhythmic background track playing inside a Zara store. The audio features the soothing and continuous sound of water flowing and splashing of a public fountain. The audio captures the distinct beeping and mechanical click of TTC fare gates opening. The audio features a lively blend of people talking, footsteps, and ambient background noise. The audio features the steady mechanical hum and clanking of an escalator in motion. The audio captures the deep, steady hum of a commercial heating and ventilation systems. The clattering and deep rumble of a subway train running along the tracks. The loud, fluctuating wail of a police siren in downtown Toronto. A low, continuous whirring sound of a microwave in operation. The crisp, satisfying crunch of an apple being sliced with a knife. The continuous sound of water flowing from a faucet, accompanied by the subtle scrubbing of hands. The gurgling of a Nespresso machine as it brews espresso, with the distinct sound of pressurized water flowing through coffee grounds and filling the cup. The high-speed whirring of a washing machine in its fast spin cycle. The continuous humming of a range hood fan, low-pitched airflow sound. The sound of running water, clinking dishes, and scrubbing. The chime and public announcement at a GO Train station. A deep, resonant toll of a church bell echoing through the neighborhood. The scraping sound of a shovel clearing snow from a sidewalk.

Activity 2

A simple experiment that toggles a sine oscillator with a button and visual feedback. Playing a sine wave when you press a button, uses noise to change the tone, and shows a circle that grows and shrinks. Using a sine oscillator to make sound when you press a button, and the tone and volume change with the mouse movement while a circle is drawn at the mouse position. When you press a button to start two sound oscillators, one that uses a sine wave and one that uses a square wave, and moving the mouse changes their frequencies while the values appear on the screen. When you click a button to turn sound on and off and select a wave type from a dropdown, and the background changes color while the chosen waveform is displayed and a tone plays at 440 Hz. Using a play/pause button to start and stop the sound, a slider to change the frequency, and a dropdown menu to choose the waveform while the background changes color. Playing two sounds, one in the left speaker and one in the right, with a button to start and stop them and sliders to control their frequencies. When a button starts and stops a sound, a slider changes the frequency, and colorful particles appear and move based on the sound's frequency. When a button starts and stops a sound, a slider controls the frequency, and expanding ripples appear based on the sound's frequency. A button controls a sound, a slider adjusts its frequency, and a visual waveform responds in real-time using an FFT analyzer. Each note plays with a randomly selected waveform, changing the background color and displaying a visual spectrum while cycling through musical notes. The mouse controls the sound volume and background brightness, with an oscillator playing notes while displaying a visual spectrum Playing random musical notes with a changing envelope, adjusting attack, decay, sustain, and release each time while displaying colorful visual patterns. Each note plays a sound and creates a random shape with its mirror image. each note plays a sound and creates a ripple at a random position, expanding and fading over time to form a dynamic visual effect Generating a ripple at a random location, expanding and fading to create a smooth visual effect. Creating an orb that orbits around the canvas center, gradually fading away to form a dynamic visual effect. Pink noise plays as particles resembling a nebula drift outward from the center, fading over time while the noise volume changes. When sound play, it generates pulsing rings that change size based on real-time amplitude A grid of rectangles pulses in brightness and color, syncing with the rhythm of the sound. A flowing curve that moves in real time, visualizing the audio waveform on the canvas. Two sliders control the sound’s frequency and volume, while the background color changes based on the slider values. A slider controls the sound frequency, and a dynamic sine wave moves across the canvas, changing shape and color based on the frequency. A slider controls the sound frequency, and particles rise from the bottom of the canvas, changing size and color based on the frequency. A slider controls the sound frequency, and the live waveform is displayed in four mirrored quadrants,

Project 2


Final Project 2 Design

P5 Interactive Audio Web Header Portfolio

When I started designing my portfolio, I knew I didn’t want a basic landing page. I wanted something that felt alive, something that showed not just my work but also a part of who I am. That’s why I created an interactive sound header using p5.js, combining motion, sound, and interaction to make a more engaging first impression.

Sound has always fascinated me, not just as something we hear but as something we feel. Just like waves in nature, water ripples, wind currents, or even sound waves, this movement represents growth, transformation, and the way ideas evolve over time. It has movement, rhythm, and emotion, and I wanted to bring that energy into my design. I chose a minimalist, earthy, and fluid visual style to reflect my personality. The wavy forms in the header react to sound, creating a design that is always changing, just like how interaction design adapts to users. Instead of a static interface, I wanted an experience that feels responsive, organic, and personal.

Click here to see it working on my server

test2Lorem ipsum dolor sit amet, consectetur adipiscing elit

×

Powered by w3.css