Module 2 Formstorming

Emily Revell

Project 2

Module 2

This week we were given the task to record and make sounds we encounter everyday. Many of the audio I captured was during my walks to and from the school such as walking in the snow, salt, and ice. The other audio samples were created but reflect sounds I hear often from my daily life such as keys jangling, jacket zippers, texting, typing, and boiling water from the kettle. Although I recorded larger samples I edited their length and file type in Adobe audition so that they could be uploaded to the phoenix server.

Activity 1

This is audio I recorded while walking outside around the school when there was a lot of salt spread on the sidewalk.

This is audio of my keychain jangling as that is how my roommates and I can tell when one another arrives home.

This is audio from the piano located in the SSU by the Booster Juice playing a descending scale.

This is audio of a pencil writing the phrase 'hello world' on a piece of paper.

This is audio of the ice in my Tim Hortons drink shaking while I walk back home.

This is the audio of my mechnical keyboard and the audio the switches(keys) create.

This is the audio of the mouse clicks my logitec superlight mouse creates.

This is the audio of multiple different buttons and triggers being clicked on a Playstation Dualsense controller.

This is audio of me putting my airpods back into their case.

This is audio of me walking on thick slabs of ice on my way back home.

This is audio of a windy day close to where I currently live (in person you can hear the rustling of the trees better).

This is audio of snow melting into the storm drain colse to where I live.

This is audio of me walking in fresh snow on my way to school.

This is audio of the performing arts students practicing tap dancing in hall H.

This is the audio of the zipper on my winter jacket.

This is the audio of a ziplock bag opening and closing.

This is the audio of the wrapper of a fortune cookie being crumpled.

This is the audio of a fortune cookie being eaten.

This is the audio of someone typing and sending a text message on an iPhone.

This is the environmental audio of the basement appartment my roommates and I share.

This is the start up audio of a nintendo Gameboy advance.

This is the audio of the water inside the kettle boiling.

This is the audio of when the kettle has completed boiling the water.

Activity 2

This week we were given the task to review a plethora of P5js tutorials to then create our own sketches and further learn how to trouble shoot P5js. These sketches showed us how audio interacts with sketches and visualizes the data input. Many of the sketches dealt with sliders, buttons, oscilation, pitch, and audio sythesization. I found trying to make compeltely different sketches based on these tutorials very difficult as I am not very confident in my P5 skills

For this first sketch in tutorial One I made it so when the play button is clicked the background colour is turned orange and that a rectangle that follows mouse movement is drawn.

For this sketch I mainly played it safe by exploring the behaviour of the synthesizer and how to change the scale array.

For this sketch I changed the background colour to yellow, the scale array to a non syncronous scale, and all the functions that change the behaviour of the sythesizer (attackTime, decayTime, and sustainRatio). Additionally, I attempted to edit the play button with purple text while also atempting to put a border radius on the button (it did not work out).

For the second sketch I futher played with the scale array to make a different tune and further changed the behaviour on how the synthesizer acts. In this situation it causes an odd delay before proceeding with the rest of the scale array.

When you click on the red the background changes into a linear gradient and the audio begins to play. I utlized part of the gradient code from a Patt Vira YouTube tutorial that shows you how to create a colour gradient block(https://www.youtube.com/watch?v=lPgscmgxcH0&t=700s).

For this sketch I mostly only worked on how to style a slider as it was a possible function I was thinking about using for my final project. I tried making it a square but kept it as an elipse, I also make it so the legnth of the slider had a round border radius to hug the elipse.

For this sketch I really only changed the values of the background and the fill colours of the elipses.

For this sketch I tried to add a quadrilateral that would act similarily to the circles. I could not figure out how to make all the points follow the position of mouseX and mouseY as a quadrilateral has eight points (2 per axis) while an elipse only uses three points (x, y, and diameter).

I continued a similar investigation but using a square as it has similar parameters to the eclipse (x, y, and size). In this situation possibly because of the order I drew the square they just turned into even smaller elipses.

In this sketch I tried to change one of the elipses into a triangle. Possibly because of the size or position I put mouseX and mouseY could attribute to the look of only the top of the triangle showing.

In this sketch I more successfully replaced one of the elipses with a new shape, in this situation I made a square. Unfortunatley, it still suffers the issue with the triangle but at least depending on the position of the mouse you can see the bottom of the square.

For this sketch I returned both of the elispes to their original values and just changed the colours of the background and stroke.

For this sketch I changed the alpha layer of the fill for each elipse and made it opposite colours to one another.

For this sketch I added another elipse to each existing elipse and further pushed the alpha layers to create something more visually chaotic.

For this sketch I once again attempted to add a square with the elipse where it turned out very similar to sketch 5.3. With the value changes of the stroke and background I tried to make them seem like evil eyes.

For this sketch I just changed the colours of the stroke to be themed to Charli xcx's brat album and played guess featuring Billie Eilish (you cannot tell because none of the audio was recorded). Music input shows how rhythms show the hidden patterns within the song with consistent reactions from the sythesizer.

For this sketch I made it so the louder more prominent waveform was lower than the wave in the middle.

Unfortunatley for this sketch I forget which values I changed to make it so the sketch would leave behind strokes after audio input (I'm guessing it is some sort of transparency in the stroke of the elipse). I showed how it reacts with super loud audio and with a rhythmic audio input such as music.

For this sketch I made the the fft value 1 which in turn made the sythesizer react faster to any audio input.

For this sketch I changed the fft value to 0.1 -1024 to see how it would effect the sketch. In this situation it seems that the audio must be louder to make the synthesizer react.

For this sketch I changeed the background into a dark grey. I also changed the modifier size to where the synthesizer doesn't really raise and just grows the amount of dots the louder the input aaudio is.

For this sketch I turned the background a pastel yellow and made the stroke weight super thick to create a sun like shape when the sythesizer picks up audio.

For this sketch I returned the stroke back to a thinner weight and played around with values that seemed to make the microphone more sensitive to noise as the sythesizer was more reactive.

For this sketch I turned the background colour to Charli xcx's iconic brat album. Additionally, I just read the first two lines of the song Apple which talks about intergenrational trauma. I thought it would be fun to forstorm as a tiny treat.

For this sketch I edited the alpha layer to create a chaotic visual representation of me reading the lines of the Canadian Anthem. Additionally for some odd reason the gif is not working when put into the template while the other one does.

Project 2

Final Project 2 Design

P5 Interactive Audio Web Header Portfolio

For my final interactive audio web header I made a voice activated ASMR experiecne to help calm the racing mind. There is a relaxing beach themed visual to lull you to your next nap, an almost touchless navigation experience, and a calming custom mixed beach ASMR soundscape. Unfortunatley due to the fact that the experience needs to use the mic my verbal instructions were not picked up in my original tutorial video. For your guidance there is an alert that will tell you all the information you need to know to interact with the header.

Click here to see it working on my P5js sketch

test2Lorem ipsum dolor sit amet, consectetur adipiscing elit