Module 2 Formstorming

Weekly Activity Template

Yiyi yan

Project 2

Module 2

This module explores the relationship between sound and interaction. In Activity 1, I recorded everyday sounds and analyzed their textures, rhythms, and emotional impacts. In Activity 2, I experimented with P5.js to create sound-driven visuals, learning how sound waves can influence real-time graphics. These activities laid the foundation for my final project by helping me understand how sound can shape user interaction.

Activity 1

sound of walking down the stairs chewing sound paper bag sound The sound of the faucet. The sound of hand sanitizer The sound of brushing teeth The sound of a comb The sound of a microwave oven The sound of noodles Keyboard sounds Mouse sounds The sound of a zipper. Sound of stool dragging Luggage trolley sound The sound of a doorknob. Sound of blinds being pulled Sound of correction tape The sound of a bottle cap The sound of writing The sound of turning a book. The sound of a knife cutting vegetables. The sound of boiling water The sound of the stove. The sound of a hair dryer The sound of stepping on snow

Activity 2

The circle size changes based on the sound volume, creating dynamic visual feedback. A soundwave visualization where the waveform dynamically reacts to audio. A frequency spectrum bar chart where volume controls the bar height and colors. A colorful particle explosion driven by sound, dispersing dynamically. A rotating cube controlled by sound, with volume affecting its rotation speed or angle. A flowing waveform where smooth lines move in response to sound. A looping pattern of circles that may flicker or shift based on sound. Concentric ripple effects that simulate water waves or sound vibrations. A rotating purple triangle, possibly with its angle or size controlled by sound. Hidden shapes appear through sound, with volume affecting visibility. A 3D cube influenced by sound, where volume adjusts size or rotation speed. Mouse click generates glowing rings, with sound volume affecting their expansion. A smoky visual effect where sound influences the diffusion and motion. A structured grid of glowing dots, responding to sound movement and flickering. Clicking creates a glowing aura, with sound volume controlling its intensity and spread. Clicking draws connected lines, with sound volume affecting line thickness. A layered mountain landscape where volume determines height and color shifts. Floating flame-like particles that flicker and rise based on sound. A circular arrangement of dots that may rotate or scale with sound. Pixelated noise that changes dynamically, mimicking data flow or sound signals. A wavy sound-driven motion that mimics water ripples or terrain shifts. A dynamically shifting grid of lines, influenced by sound flow. Scattered glowing particles forming randomized motion trails. A vertical sequence of small dots, possibly a sound-driven frequency bar. A fireworks-like particle explosion where sound controls the dispersion.

Project 2

Final Project 2 Design

P5 Interactive Audio Web Header Portfolio

In this project, users can interact by dragging instruments onto the character to trigger visual changes and sound effects. When all instruments are placed, the full track will play, and the character transforms. Additionally, users can activate the full track by saying 'play'. The background features dynamic visual effects that react to the sound, enhancing the immersive experience. This project combines sound interaction, motion graphics, and user engagement through P5.js.

Click here to see it working on my server



×

Powered by w3.css