Module 2 Formstorming

Weekly Activity Template

Celine Heidie Hermanto

Project 2

Module 2

As part of the header of a web page, this project will focus on diegetic sounds to create an impressional digital product that utilizes sound in conjunction with a responsive visual tool to keep users engaged.

Activity 1

The sound of opening and closing the fridge door

The sound of opening and closing the kitchen drawers

The sound of using a knife slicing on a cutting board

The atmosphere at the Marquee in Sheridan College in the Trafalgar Campus

The sound of opening and closing a lipstick case

The sound of dragging a chair out to sit on it

The sound of opening and closing a zipper

The sound of my glasses case opening and closing

The sound of the dryer on the tumble dry setting

The sound of a tennis ball bouncing on the ground

Sound of cards being distributed when playing card games

Activity 2

The audio spectrum wave was created by watching a youtube tutorial https://www.youtube.com/watch?v=8vdBrWE9V2I, through it I learned how to use FFT to extract the amplitude and shape the effect, in this case using a sin function to create this looping shape.

This is what the wave looks like normally when the sound isn't being played

This is what the wave looks like when the music has a strong base, experimented with the epiphany music file.

Further experimentation by taking out all the colors in the wave, creating a dark black outline that resembles a cloud

Also discovered a way to lower the opacity by lowering certain parameters.

By manipulating the opacity and the vibrancy of the wave I was able to create a softer version of the wave.

By increating the value of the wave I was able to create a lighter pastel look, leading to potential for more modern or minimalist graphics.

By manipulating the values of the color spectrum I was able to limit the wavelength the code picked up and create this interesting neon effect.

Again, by manipulating the light and the opacity of the wave I was able to soften the earlier iteration.

Manipulating the wavelength values again allowed me to limit the colour range to largely 3 colours.

Experimenting by changing the colors in the provided

Experimenting with FFT again making sure the amplitude values are captured in the console

Creating a sound visualzer similar to voice-memos, based on this youtube video: https://www.youtube.com/watch?v=8O5aCwdopLo&t=708s

Created a graph based on the time domain of the sound, using the epiphany music file given

What the time domain graph looks like when drums or base/larger pitch is detected.

Adding a frequency domain graph based on the youtube video, one change I made was by adding a button based on the previous code provided to make experimentation clearer, additionally I discovered my browser wouldn't play sounds outimatically without the button/changing values in the code so this was a workaround.

THis is what the frequency domain graph looks like when the freqyency is higher and the music is more turbulent.

Experimenting by changing the position of the frequency domain graph.

Experimenting with these graphics and layering the made me realize I could create interesting patterns by creating a gric and only activating certain cells as they synthesize and reach to the sounds.

U added another layer to fill the grid and make the pattern more visible

I attempted to input a song with a stronger base to trigger larger amplitudes and it creates an almost swirling effect.

I attempted to activate cells to make a C shape for my initials

I once again experimented with different sound effects to trigger different shapes.

I made sure the cells would resize when you adjust browser width instead of move to the next line to preserve the intended design despite the rectangle grids.

Creatng my initials by triggering more cells, my next idea is to make the cross diagonal as the design is starting to remind me of cros-stiching and has the potential to create an interesting header image.

Project 2

Final Project 2 Design

P5 Interactive Audio Web Header Portfolio

The project examines and explores sound and interactive visualizers, encompassing contextual and technical research surrounding diegetic sounds to examine how creatively designed header page can create a beneficial experience for users. The final deliverable for the project includes a coded fun interactive page header that helps users focus and lowers stress.

Click here to see it working on my server

As part of the header of a web page, this project will focus on diegetic sounds to create an impressional digital product that utilizes sound in conjunction with a responsive visual tool to pull users in.