Module 2 Formstorming

Weekly Activity Template

Xinyu Lu

Project 2

Module 2

This project is an interactive website based on the song Get A Guitar. I used p5.js to create guitar string effects that move when users interact with them, making the visuals feel alive. I also added particle effects to make the experience more dynamic. I explored different versions of the song and learned some basic guitar elements to improve my design. Through this project, I improved my coding, photography, and visual effects skills. Even though I faced challenges, like syncing lyrics with music, I found creative ways to make the project more engaging and fun.

Activity 1

How did you engage with the project theme?
I engaged with the project theme by recording various everyday sounds and observing how they contribute to our understanding of different environments. This helped me focus on the importance of sound in setting a scene or conveying an atmosphere.

What was successful?
The most successful part of this project was capturing diverse sounds that clearly represented their sources, like the crunching of snow or the bustling noise of a cafeteria, which vividly brought those scenes to life through sound alone.

What was challenging?
One challenge was recording sounds without interference from background noise, which sometimes made it difficult to isolate the sounds I wanted to capture clearly.

How did you explore the lecture content?
I explored the lecture content by directly applying concepts discussed, such as the characteristics of sound and its role in environmental perception. This guided my approach to capturing and selecting meaningful sounds for the project.

A neatly folded blanket with a geometric pattern, representing the soft rustling sounds of fabric being adjusted and smoothed.

A metal door handle in the act of being used, symbolizing the click and creak as the door opens or closes.

A vacuum cleaner at work near the base of a white wall, emphasizing the whirr and suction noise while cleaning.

A sunny side up egg frying in a pan, capturing the sizzle of the egg as it cooks.

A pot of boiling water on a stove, visually representing the bubbling and popping sounds of a liquid reaching boiling point.

A blender filled with fruits, depicting the loud blending noise as it purees its contents.

An open drawer filled with various snack packages, illustrating the sound of rustling plastic and packaging as someone searches through it.

Fresh coffee beans in a grinder, ready to be ground, highlighting the crushing and grinding sounds typical of coffee preparation.

Water flowing from a modern faucet into a sink, showing the sound of water splashing and flowing during hand washing.

A modern electric kettle showing bubbling water, capturing the alert sound when the water reaches boiling temperature.

Water being poured from a kettle into a mug, illustrating the fluid sound of water flowing from one container to another.

An empty mug positioned to suggest the sound of sipping or drinking water.

A tape dispenser with a clear roll of tape, representing the sticky sound as tape is pulled and torn off.

A bottle of vitamin D supplements, symbolizing the rattling sound of pills being shaken out of the bottle.

A notebook with a blue pen on top, depicting the sound of a pencil writing on paper.

Scissors lying on a piece of cardboard, suggesting the sharp slicing sound of cutting through paper.

A book titled 'A Room of One's Own' open slightly, evoking the soft rustling sound of pages turning.

A lint roller with a dirty adhesive sheet, capturing the sound of it picking up lint and debris from fabric.

A pink hairbrush, showing the bristles passing through hair, associated with the sound of brushing.

A large mound of snow with footprints, capturing the crunching sound of footsteps through fresh snow.

A bright green commuter train in motion beside a snowy platform, representing the powerful rumble and whoosh of a moving train.

pThe interior of a train showing a staircase with 'Quiet Zone' signs, evoking the clear, mechanical voice announcing stops over the train’s speaker system.

A busy cafeteria with many people seated and talking, depicting the bustling sounds of conversations and laughter among diners.

An indoor concert scene with performers on stage and large screens displaying the action, capturing the loud music and cheering crowd at a live performance.

Activity 2

How did you engage with the project theme?
I engaged with the project theme by focusing on how the dynamics of sound can influence visual effects in digital animations. I experimented with coding to create visuals that respond to audio inputs, specifically linking the features of the sound to the behavior of the graphics.

What was successful?
The successful part of my project was not limiting myself to only using P5.js effects. I expanded my exploration by researching and learning how to create sketch.js effects from resources on OpenProcessing and GitHub. This approach allowed me to apply a broader range of visual representations linked to sound dynamics.

What was challenging?
The challenging aspect was figuring out how to integrate these effects with the specific sounds I chose, like determining how the dynamics of the effects could be driven by the frequency of sound waves. I also had to learn how to modify the effects I found, such as changing colors and patterns to better suit the audio-visual interaction I envisioned.

How did you explore the lecture content?
I explored the lecture content by applying the theories and examples discussed in class to my project. This included understanding the relationship between sound and visual perception, which helped me think critically about how to synchronize audio inputs with visual outputs in my coding experiments.

This GIF shows a visual representation of dynamic audio waveforms in a black and white contrast. As I write with the Apple Pencil on the iPad, the waveforms move up and down with the sound. The waves jump visually whenever the pencil touches the screen, creating a rhythmic experience of sight and sound.

In this GIF, a purple circle is in the center with light purple fragments spreading around it. The fragments seem to disperse in sync with the intensity of the sound from the Apple Pencil writing. This creates a beautiful connection between what I hear and what I see.

This is a minimalist GIF with just a cursor moving on a white background. Each time I write with the Apple Pencil, the cursor slightly shakes or moves as if mimicking the vibration from the sound of the pencil touching the iPad screen.

This GIF displays random yellow lines and shapes on a red background. The shapes and lines change randomly, seemingly reacting to the rhythm of the Apple Pencil writing sound. Each touch of the pencil on the iPad screen alters the visual elements in an abstract manner.

This GIF features a dynamic visual effect of a galaxy spinning with points of light and particles swirling around the center. The lights expand or contract based on the volume and pitch of the sound made by writing with the Apple Pencil, creating an immersive audio-visual experience.

This GIF displays a simple, high-contrast scene with a white circle on a black stripe between white areas. As I listen to the sound of an egg frying, the circle gently expands and contracts. The sizzling sound influences the visual, making the circle behave as if it's reacting to the intensity of the sizzling.

In this GIF, small turquoise squares appear against a dark background. The sound of the egg frying seems to control the movement of the squares. Each pop and sizzle from the frying pan causes the squares to jump slightly, creating a lively dance that matches the rhythm of the frying sounds.

This GIF shows large blue blobs that move and merge dynamically. The crackling sound of the egg frying is synced with the movement of the blobs. As the egg sizzles louder, the blobs expand and when the sizzling eases, they contract, creating a visual that mirrors the cooking sound.

This GIF features soft, floating circles in shades of pink and orange on a light pink background. The bubbles in the GIF rise and change size as if responding to the sound of the egg frying. Each sound of sizzle adds a bubble or makes one grow, simulating how bubbles form and change in a real frying pan.

put a description here or you will lose grades

This GIF shows two circles against a dark background. The larger circle pulses gently as the sound of soup boiling plays. Each bubble and pop from the boiling soup makes the circle expand or contract slightly, mimicking the rhythm and intensity of the boiling sound.

In this GIF, a large circle on a red background appears to throb in response to the boiling soup's sound. The circle's movement is synchronized with the soup's bubbling, growing larger with louder pops and settling down as the sounds soften, creating a visual representation of the soup's dynamic boiling process.

This GIF features a chain of circles forming a larger arc against a soft blue background. The circles move like bubbles rising in boiling soup. As the soup's bubbling intensifies, the circles move faster and expand, reflecting the energetic activity in a boiling pot.

This GIF presents a field of stars twinkling against a dark sky. The twinkling of the stars intensifies with the crescendo of the boiling sound, simulating the chaotic, energetic bubbling of a vigorously boiling soup. Each pop and bubble in the soup seems to cause a star to brighten momentarily.

This GIF shows an array of shifting geometric shapes in warm tones. As the soup boils more intensely, the shapes rearrange and shift more rapidly, simulating the movement of bubbles in a pot. The visual changes directly correspond to the variations in the boiling sounds, creating a lively and engaging interaction between sound and sight.

This GIF shows vertical black bars on a white background that move rhythmically. As I listen to the sound of water pouring, the bars fluctuate in height. Each sound of water hitting a surface causes the bars to rise or fall, mirroring the flow and volume of the water.

In this GIF, colorful circles of various sizes float against a dark background. The movement of these circles is synchronized with the sound of water pouring. When the water flows steadily, the circles gently drift, and when the water splashes, they bounce and interact more vibrantly, creating a playful and dynamic visual.

This GIF features a white spray of particles shooting across a green background. The particles move faster and spread wider with the intensity of the pouring water sound. This visual mimics the splashing and scattering of water as it is poured quickly.

In this GIF, a cluster of pink geometric shapes pulses and expands in a mesmerizing pattern. The expansion and contraction of these shapes are closely tied to the ebbing and flowing sound of water being poured. The louder the sound, the more aggressive the visual transformation.

This GIF displays a colorful, wavy line that stretches across a light background. The line undulates in sync with the sound of water pouring, rising and falling with the pitch and intensity of the sound. This provides a serene and harmonious visual representation of the sound of water flowing smoothly.

This GIF shows pink vertical bars on a dark background that rhythmically move up and down. The sound of flipping book pages causes each bar to rise or fall sharply, mimicking the quick flicks of the pages being turned. This synchronization creates a visual rhythm that matches the pace of page turning.

In this GIF, red linear patterns appear to draw and redraw themselves chaotically. The sound of book pages flipping guides the intensity and speed of the lines' movements. As the pages turn faster, the lines become more chaotic, representing the flurry of motion in flipping through a book rapidly.

This GIF is a simple white screen. If imagining a possible interaction with the sound of flipping pages, the white space could subtly change in brightness or texture with each page turn, perhaps creating faint shadows or movements that give the impression of pages moving in the background.

This GIF shows a single small blue star in a vast black space. Each sound of a page being turned might cause the star to flicker or pulse, symbolizing the moment of discovery or realization that often comes with reading new information on each page.

This GIF displays a dynamic scene of colorful circles and dots exploding like fireworks against a dark background. The popping sounds of the book pages being turned could cause bursts of new circles to appear and existing ones to expand, mimicking the dynamic and exciting process of exploring new content in a book.

Project 2

Final Project 2 Design

P5 Interactive Audio Web Header Portfolio

"Get a Guitar - Music Experience" is a website designed to showcase three unique versions of the song "Get a Guitar": the regular version, the Chromeo remix, and a special guitar & bass version. Each version is paired with interactive visuals that respond to the music, creating a distinctive and immersive experience. This allows users to explore the different sounds and styles of guitar music in an engaging and accessible way.

Click here to see it working on my server

test2Lorem ipsum dolor sit amet, consectetur adipiscing elit

Powered by w3.css