Module 2 Formstorming

Weekly Activity Template

Ziqi Zhou

Project 2

Module 2

This module explores the relationship between sound and interaction. In Activity 1, I recorded everyday sounds. In Activity 2, I learned to use P5.js to create audio-driven interactive visual effects.

Activity 1

Flowing Water sound Dryer sound Water dispenser sound Toilet flushing sound Chair wheels turning sound Drawer sound Power switch button sound Mouse button sound Keyboard key sound Heating air outlet sound Barrier-free door opening button sound Door opening and closing sound Obstacle drag sound Walking sound The lid rotates sound Plastic bottle sound Zipper sound Clothing friction sound Key-press pen sound Tape tear sound Plastic bag sound Bell sound Headphone flip cover sound Sphere Landing sound Microwave oven sound

Activity 2

Control the height of the spectrogram via volume. Trigger cubes to appear via sound. Sound-triggered spectrogram. Click blank space to appear circle; sound triggers rhythmic pattern movement before fading. Sound-triggered spectrogram. Sound-triggered horizontal lines. Sound-triggered vertically mirrored spectrogram. Sound-triggered lines. Long-press mouse to draw lines that pulse rhythmically with sound. Sound-triggered three-layered circles composed of particles. Sound-triggered particle appearance. Sound-triggered random pentagram appearance. Sound-triggered particle fireworks. Sound-triggered “moving planet” to increase firepower. Sound-triggered growth of “hair” on spheres. Full-screen dot grid irregularly scales in sync with sound. Sound-triggered hexagons. Full-screen dot grid uniformly scales in sync with sound. Clicking empty areas generates various shapes with sound-triggered rhythmic patterns. Clicking empty areas generates circles with sound-triggered rhythmic patterns. These are exercises from the P5 tutorial. These are exercises from the P5 tutorial. These are exercises from the P5 tutorial. These are exercises from the P5 tutorial. These are exercises from the P5 tutorial.

Project 2

Final Project 2 Design

P5 Interactive Audio Web Header Portfolio

The following is the P5 Interactive Audio Web Header Portfolio. By studying and applying the contents of Module 2 Tutorial 1 to 6 in practice, as well as combining the new p5 code found later, I explored and presented a new visual form. All visual effects are driven by sound. Real-time conversion through microphone input brings about changes in visual effects. In the project built with p5.js, an immersive interactive digital experience is provided by delving into the synergy among sound frequencies, dynamic graphics, and user creativity.

Click here to see it working on my server



×

Powered by w3.css