Module 2 Formstorming

Weekly Activity Template

Mikhaela 'Kei' Masaba Sheridan Interaction Design
Proffesor: Jennifer Hambleton

Project 2

Module 2

Working with audio to create an interactive experience for users

Activity 1

I was playing around with 3D printing a lot more this semester since it's something that I took great interest in last semester. I've been practicing my skills related to 3D modeling since it's something I genuinely want to get better at outside of class, being motivated by how fun the process can be. I spend a lot of time with friends in a classroom that has one of these printers and I experiment with 3D printing from time to time, watching my improvement each time. The sound of the printer is loud and I instantly think of how the final 3D print is a culmination of hard work.<br><audio controls src='Noises/3D printer.m4a'></audio>

I've always collected trading cards, especially as a kid. It's a hobby that I've gotten back into especially now that I'm an adult with adult money. The binder is actually a collection binder that I have repurposed several times, I've owned it since I was a child and it's be used to hold music sheets, homework, pokemon cards and sometimes all 3. I find myself fiddling with things a lot and the sound of zippers is relaxing. It's a consistent sound, that either rises or falls in terms of the sound depending on the direction the zipper is going. Ascending or descending. <br><audio controls src='Noises/Binder zipping .m4a'></audio>

Recently, my sister got this gun cat toy that shoots propellers. it reminded me a lot of toys that I wasn't permitted to have when I was younger since my grandma wouldn't allow me, as it was too dangerous to use. I've been playing with it a lot, not just by myself, but with my two cats. They cboth come running when I begin to wind it up, sometimes chirping at me to launch the toy.<br><audio controls src='Noises/Toy hitting the wall.m4a'></audio>

This is one of my two cats, her name is Piscses, named after my grandma's star sign since we got her and her sister Peppercorn a month after she passed. Usually when I pet her, she lets out a meow, indicating if it's ok or if she's cranky. A little side tangent, but when I recorded this noisse, she hissed at me all of a sudden while I was petting her. I still don't know why.<br><audio controls src='Noises/Pisces meow.m4a'></audio>

Sometimes while I'm doing homework, Piscses will go onto her cat wheel and run on It, mostly for attention and pats, flopping over when someone gets close to her. Sometimes she runs so fast, all I can hear is the rumbling clacking noise and her paws running on the track.<br><audio controls src='Noises/Cat wheel.m4a'></audio>

I'm commonly tapping fingers on my desk when I'm concentrating or need some kind of audio stimulation to do my work. I work well with audio or music, or at least something happening in the background while I work. I'm commonly working on something even if the world around me is chaos.<br><audio controls src='Noises/Fingers tapping on desk.m4a'></audio>

I got this dice set when I got back into collecting pokemon cards, I used to play games that involved using dice like monopoly and just to help decide if I'm having difficulty. There's something about dice rolling that I find so satisfying, whether its the cool die rolling around in my hand, clicking against each other and then winning a bet after seeing the result. Whether that means I'm in love with gambling or the concept of destiny and fated outcomes, I like playing with dice. It also makes a very satisfying sound.<br><audio controls src='Noises/Dice roll.m4a'></audio>

I open and close my door often, More so the latter for the sake of privacy. When I close my door, it's usually a sign that I'm about to work or study, or more often than not talking with friends over voice call. When People see my door, they are exposed to how chaotic my room is after seeing the various posters plastered on the door, that's just the first impression.<br><audio controls src='Noises/Door opening and closing .m4a'></audio>

I got this DS after getting hit with a bug, or feeling to own one again. I had one to my name when I was younger, but it was given away without my consent by my family. It had a lot of games I liked to play, but unfortunately, I lost the original system and the original save files that contained hours upon hours of gameplay. One of my faovurite things to do was tapping the screen, so much so that I broke the screen of my original DS, making the touch screen not work properly, as some areas weren't calibrated to where the stylus is tapping.<br><audio controls src='Noises/Phone tapping.m4a'></audio>

My cats own a lot of toys, some of them, like the one depicted above. They're very loud since there's several bells mixed in and the cats either go crazy for it, chasing after it and play fighting, gnawing on the feather attachments. <br><audio controls src='Noises/Cat toys jingling.m4a'></audio>

I do a lot of journaling, so much so that I have a little section of my desk dedicated to all my materials. I flip through my papers and sticker sheets when deciding on a theme for the page I'm designing. I find a lot of joy and it's calm to do, a nice way to destress after any chaotic or stressful day I have. Collaging is very fun and it's a head empty no thoughts scenario<br><audio controls src='Noises/Flipping through pages.m4a'></audio>

I have a plushie corner in my room that's mostly hidden behind my door. Sometimes I have days where I just lie down and toss one of my plushies at the wall. When I'm upset or having a bad day, there's the rare ocassion that I end up throwing a plushie at the wall and it has a soft thud, or I punch it because I'm extremely excited about something. It's not just anger that triggers this action and noise.<br><audio controls src='Noises/Hitting plushies.m4a'></audio>

I own a mechanical keyboard on my desk, it lights up when I use it. One of my more expensive purchases, but definetly worth it in the end. When I first got it, I was questioned, specifically by my mom since I could just get a regular keyboard for cheaper. What makes this one special Is that it was originally reccomended by me by a friend and i worked hard to finally afford it. There's something about tapping the keys and hearing that mechanical click while typing that helps me to focus.<br><audio controls src='Noises/Keyboard click clack.m4a'></audio>

There's this metal rod at the entrance, that I fail to remember the name of near the entrance of my of my house that I knock over often, scaring my cats and making a loud noise as a result. It's sudden and gets my attention, so maybe using it would cause my user to also get their attention, if i decide to incorporate the noise into my final. I think doing that would be funny.<br><audio controls src='Noises/Metal clanging.m4a'></audio>

I'm a barista outside of school and at home, I have a cheap espresso machine that makes a loud start up noise since it is constantly heating up water, ready to be used. I use it for myself and my sister a lot to make coffee when one of us feel a little peckish<br><audio controls src='Noises/Milk steamer.m4a'></audio>

Everyone uses a mouse, I tend to use mine a lot, clicking a lot and whenever I'm trying to concentrate. I click on an empty area in a rhythm or rapidly until I have a solution to whatever it is I'm thinking of. I Use it everyday, sometiems to the point that I kill the battery. There are people who find this habit annoying purely because of the clicking noise. If I wanted to make a tedious interactive page for my final. I could use this noise just to get a reaction out of my users.<br><audio controls src='Noises/Mouse clicking.m4a'></audio>

I write a lot, whether it's in my journal or when I'm sketching an idea physically in My sketchbook. I like collecting pens, some of them make different clicking noises when I use them. It's an everyday sound that most people are failliar with or recognize.<br><audio controls src='Noises/Pen click.m4a'></audio>

One way that people can identify if I'm coming is through keychains. I have a lot on my phone and keep a lot on my bags. they click against one another, making a slightly annoying sound depending on who hears it. It's funny when I get called out for it. The keychaisn that I own usually feature characters from series that I enjoy and created by small or lesser known fanartists that had art that appealed to me.<br><audio controls src='Noises/Phone shake.m4a'></audio>

The cutting noise the scissors make when I'm using them for this pair in particular is extremely clean cut and satisfying. No pun intended at all. Teal is my favourite color and I've owned this particular pair for a while. I use it a lot for scrapbooking and journaling.<br><audio controls src='Noises/Scissors.m4a'></audio>

I do tarot card readings for myself and my friends pretty often and do fortune telling. One of the things I do when telling someone's fortune is shuffling the cards until I find it right to pull a card or one that falls out while I'm shuffling. It represents my love for fate really well and is a noise that helps me to concentrate on my tasks. <br><audio controls src='Noises/Deck shuffling.m4a'></audio>

I like coffee a lot and I usually spin it inside of the drink, hitting it on the rim of the glass absentmindedly, contemplating a lot.<br><audio controls src='Noises/Stirring straw.m4a'></audio>

Trash can makes a loud Noise and it sounds like a drum. I think of when I'm bucket drumming a lot, something that was mandatory when I was in elementary school. Sometimes you press the pedal so much to the point you keep doing it just for the fun of it.<br><audio controls src='Noises/Trash can opening.m4a'></audio>

I open my water bottle a lot to drink water while I'm looking. The sound itself is quick, but it dampens out because of the rubber attachments in place that prevent it from getting damaged. <br><audio controls src='Noises/Water bottle opening.m4a'></audio>

My cat's water fountain.<br><audio controls src='Noises/Cat water fountain.m4a'></audio>

I draw often when I'm not focused on school Or work related tasks, one of the noises aside from my keychains that you'll hear from Me is the sound of my stlus dragging across the screen of my ipad. I love drawing and use it as a way to relax and to also, be creative.<br><audio controls src='Noises/Pen tablet sketching.m4a'></audio>

Activity 2

I played around with a Lot of the audio waveforms, referencing the original template provided for the activity. I'm very used to creating the equivelent in after effects. I found It very difficult to navigate the positions and understanding where the waveforms would go.

I started playing with different variations, curved or straight versions of the audio waveforms and this resulted in a messy composition ony my end.

Playig around with the hieght of the audio waveforms made playing around with the final audio hard since if the waveform was off the screen, suddenly seeing it appear came across as rather jarring for me.

I wanted to play with the automatic rotation feature in P5JS, it produced a lot of different results. It made it seem like sparks were flying watching it in motion as the audio was playing.

I started to play around with the different colors and stroke widths in Order to create something visually pleasing to see. Unfortunately with most of these attempts, this resulted in it looking akin to paint blobs on a canvas ruining the overall Picture. I wanted to also play around with color gradients since I personally find gradients fun and when coding, it's more difficult to create gradients.

I began with analyzing code existing and not really caring too much about color choice. I frankly hate the colors I chose here and at the time, I think I was mostly focused on making the sketch work before focusing on making visual changes.

Starting to play around with the different stroke widths In P5JS but not so much the position of the waveforms in this image. I was getting frusturated purely because I didn't know how to move the waveforms, or didn't really consider placement while coding at this stage.

Changing the background color changed a lot of the overall vibe and aesthetic of the overall composition

I decided to go haywire crazy with the parameters of the waveforms and wanted to capture the waveforms being active. This sight was bright and colorful but I found it too harsh after seeing It popup several times, even finding it a bit straining on My eyes.

I put in particles and decreased the stroke width of the waveforms

Inactive screen shot of the composition in its earlier stages

Figuring out how to move the button to trigger the original Interaction I had in mind for this project

Snapshot of the code at the time

Before I imported the code for this project, I was using a default font and I found this unappealing, in Order to make this come off as my Idea of playful, I changed the font accordingly for this test

Coding itself feels like a Puzzle, figuring out which pieces go where and working it out. I played around with the different settings available for the waveforms. I took a screenshot of the code purely because I wanted to show how important it is to parent or type the correct code, if I don't do this, the whole sketch ceases to operate.

The earliest screenshot of the initial sketch where I had absolutely no clude on what to do at the time

testing different audio waveform sketches, referencing ones I saw on the internet and trying to replicate them.

I attempted to put wave forms on all 4 sides of the composition to create an Image or a flower of sorts at the time. It looked cool, but unfortunately playing it for longer periods of time made my laptop slow down and my web browser eventually crash. This was unsolveable even if I Had plugged my computer in. I predict that it was due to a lack of ram or lacking the processing speed needed.

Another glimpse of the code at the time

Figuring out placement for the waveforms.

i didn't use much Of p5JS when starting this project, so I was basically refreshing my knowledge on the application.

Took a screenshot at a random point in time during the playback just to test if it worked. When I was first figuring out the audio waveforms, I spent a few hours doing this, so I felt happy and relieved at the time when I saw that it was fully operational.

I thought that the initial audio waveforms looked like fireworks and for some reason, that resonated me and motivated me into wanting to make it work somehow

Playing around with the different audio visualizers I could make and watching different tutorials and examples helped a lot

One of the screenshots I was able to take before my computer lagged and chrome had to force itself to shut down as a result. This heavily reminds me of a tv glitch, or the static you could see on tv, like the ones my family owned while I was growing up.

Project 2

Final Project 2 Design

P5 Interactive Audio Web Header Portfolio

I decided on using an audio visualizer that picked up on microphone audio, the image never remaining still since the microphone is constantly picking up on audio.

Click here to see it working on my server

test2Lorem ipsum dolor sit amet, consectetur adipiscing elit

Powered by w3.css