Module 2 Formstorming

Project 2: Hear

Hannah Sancho


Project 2


Module 2

This module focuses on sound and it's application in a user's expirence and interactions with a design, as it acts as another layer of communication between the design. designer, and the user. The sounds/words and music that a person hears directly influences how they interpret and consume information, evoking different emotions and responses depending on their context. We spent time in the first activity building a sound library with interesting sounds in our lives. In the second activity we used these sounds to created interactive sketches using the p5js sound library, which became the basis for finished designs.

Activity 1

<br><audio controls src='/audio/tap.mp3'></audio><br>This is the sound of the faucet from my kitchen sink. I use this almost everyday for various uses and always associate it with dish washing. <br><audio controls src='/audio/stir.mp3'></audio><br>The sound of stirring with a spoon in a mug. This specific mug is the one designated to me in my family <br><audio controls src='/audio/spray.mp3'></audio><br>Sound of spraying this bottle of fragrnce mist. I don't own many of these, and I only use this for special occasions. <br><audio controls src='/audio/microwave.mp3'></audio><br>Sounds of pressing the keypad of and activating a microwave. <br><audio controls src='/audio/vacuum.mp3'></audio><br>Sound of turning on a mini vaccum cleaner. <br><audio controls src='/audio/candycanes.mp3'></audio><br>Sound of rustling through a box of candy canes that I occasionally snack on <br>Sicard. M (2022). a red and white striped fabric. Unsplash. https://unsplash.com/photos/a-red-and-white-striped-fabric-V9te95krT7I <br><audio controls src='/audio/case.mp3'></audio><br>My heaphones case makes a loud audible clicking sound whenever I close it.<br>description <br><audio controls src='/audio/curtain.mp3'></audio><br>Sound of rings of a curtain being dragged across a pole.<br>Rothley. image of a curtain pole. Rothley.com. https://www.rothley.com/collections/curtain-poles <audio controls src='/audio/presto.mp3'></audio><br>The sound of a presto card reader accepting a card. I commute to and from school, so I hear this quite often in my day to day.<br>Amara studios. (2021). Contactless credit card payments are being rolled out on GO Transit and select transit agencies in the GTHA. Toronto CityNews. https://toronto.citynews.ca/2022/08/18/go-transit-presto-credit-card-payment/ <br><audio controls src='/audio/tablet.mp3'></audio><br>Sounds of the stylus of my graphics tablet drawing on its surface. I use these two together whenever I illustrate.<br>Sikkema. K (2021). person holding silver fork on white paper. Unsplash. https://unsplash.com/photos/person-holding-silver-fork-on-white-paper-Dx1b5ucschA <br><audio controls src='/audio/clipper.mp3'></audio><br>Sound of nail clippers being used.<br>Jordan. B (2019). nail clipper. Unsplash. https://unsplash.com/photos/gray-nail-clipper-7Mo838geKCQ <br><audio controls src='/audio/fidget.mp3'></audio><br>Various sounds from the use of a fidget cube. It features multiple buttons/swtiches for a verity of sounds and textures.<br>Grant. B (2019). A close up of a dice on a table. Unsplash. https://unsplash.com/photos/a-close-up-of-a-dice-on-a-table-ey28WQOaTXk <br><audio controls src='/audio/plastic.mp3'></audio><br>Sound of a plastic bottle being crushed.<br>Mclean. E (2020). Blue plastic bottle on brown dried leaves. Unsplash. https://unsplash.com/photos/blue-plastic-bottle-on-brown-dried-leaves-GjCx5KhulZI <br><audio controls src='/audio/rake.mp3'></audio><br>Sound made from the railing of a fan. The wire material used for this fan remind me of the bars from a birdcage.<br>/Getty Images (2022). Bird in a cage with yellow feathers. Unsplash. https://unsplash.com/photos/a-bird-in-a-cage-with-yellow-feathers-Whj49u_O5sY <br><audio controls src='/audio/speaker.mp3'></audio><br>The successful connection sound of a bluetooth speaker connecting to a device.<br>/Bouchevereau. H (2022). Black Apple HomePod speake on table. Unsplash. https://unsplash.com/photos/black-apple-homepod-speaker-on-table-876c-F8YBrg <br><audio controls src='/audio/taperuler.mp3'></audio><br>The sound of a tape ruler retracting. <br><audio controls src='/audio/closet.mp3'></audio><br>My sliding closet door makes a distinct sound since its older, and slightly jammed<br></Merchant. K (2025). Bedroom with tufted headboard and open closet. Unsplash. https://unsplash.com/photos/bedroom-with-tufted-headboard-and-open-closet-6qZDnrwcIQI <br><audio controls src='/audio/music.mp3'></audio><br>I own a mini piano that I sometimes play when I want to figure out the structure of a song. It uses a lot of synth sounds, which often remind me of larger keyboards and keytars.<br>Trenwith. R. (2024) Kyros / An Endless Sporadic / Kunal Singhal. https://theprogressiveaspect.net/blog/2024/09/02/kyros-an-endless-sporadic-kunal-singhal/ <br><audio controls src='/audio/fan.mp3'></audio><br>My computer can get incredibly loud if I used it for intensive work since the fan is on overdrive.<br></Vas. A (2018). MacBook Pro turned on. Unsplash. https://unsplash.com/photos/macbook-pro-turned-on-Bd7gNnWJBkU <br><audio controls src='/audio/trackpad.mp3'></audio><br>I also have a dependance on my laptop's trackpad. I tend to use it over my mouse even when keyboard shortcuts and a scroll wheel may be easier to use.<br>/Oakywood (2023). a person's hand on a mouse pad next to a keyboard. Unsplash. https://unsplash.com/photos/a-persons-hand-on-a-mouse-pad-next-to-a-keyboard-Zah7GC6mNKg <br><audio controls src='/audio/switch.mp3'></audio><br>One of the lamps in my room has an incredibly loud switch which I associate with darkness since I only turn it on at night.<br>/In Review (2023). a light that is on in the dark. Unsplash. https://unsplash.com/photos/a-light-that-is-on-in-the-dark-Jmh3tZL53jk <br><audio controls src='/audio/bell.mp3'></audio><br>One of the keychains I own has a bell which I can pull to make the wings of it flap up. The overall motion reminds me of how one would ring a real metal bell.<br>/Alez. R (2021). a bell hanging on a wall with a rope. Unsplash. https://unsplash.com/photos/a-bell-hanging-on-a-wall-with-a-rope-4OD7NWhwgi8 <br><audio controls src='/audio/zipper.mp3'></audio><br>Sound of a zipper being used both ways. I wear a lot of jackets, sweaters, and boots with zippers so I hear this sound often<br>/Cuk. N (2021). red and black zip pouch. Unsplash. https://unsplash.com/photos/red-and-black-zip-pouch-rObMPaCjEcE <br><audio controls src='/audio/squeek.mp3'></audio><br>Sound of the straw of a tumbler being adjusted. I have the habit of fidgeting with the straw out of boredom.<br>/Nair. R (2025). A yerba mate cup with a plant and buddha statue. Unsplash. https://unsplash.com/photos/a-yerba-mate-cup-with-a-plant-and-buddha-statue-ftS8LDs1waQ <br><audio controls src='/audio/beads.mp3'></audio><br>Sound of a beaded bracelet. I got this as a gift from a close friend, who made this themself using their own beads and string.<br>Vonvix (2022). a box filled with lots of different colored beads. Unsplash. https://unsplash.com/photos/a-box-filled-with-lots-of-different-colored-beads-58q-5Ls9pnM

Activity 2

<a href='https://editor.p5js.org/Orzrihh/full/axYmxWsp6'>Link to Sketch</a><br>I was a bit hesitant to expiriment with the code myself at first, so I started by changing a couple values for the colors of the tutorial code, and adjusting the position of the rectangle elements. <a href='https://editor.p5js.org/Orzrihh/full/7O3RXf1Ge'>Link to Sketch</a><br>Alongside changing the colors, I programmed my own sequence of notes to play by adjusting the array at the top of the code. I also tried to change the shape of the reactive elements, and make it follow the cursor for some interactivity. <a href='https://editor.p5js.org/Orzrihh/full/SKrvCFuwy'>Link to Sketch</a><br>In this sketch I tried to use a different sequence on notes and switched around the values for the fill. Customising the array to make it play a melody was interesting, but not being able to time them properly made it harder to player longer/more complex sequences. <a href='https://editor.p5js.org/Orzrihh/full/Fd76v8VWN'>Link to Sketch</a><br>This was my attempt at adjusting the wavform code. I duplicated some of the code to get an interesting layer effect, and just changed the colors of the different strokes. I didn't find this one too interesting at first. <a href='https://editor.p5js.org/Orzrihh/full/t_5_UisUx'>Link to Sketch</a><br>For this circle visualiser, I changed the background to make the circle look like its glowing. Changing the background parameters gave the sketch an echo effect, which was interesting since it almost felt like it was 'recording' peaks detected from frequencies. <a href='https://editor.p5js.org/Orzrihh/full/CdGPfFFMd'>Link to Sketch</a><br>I tried to apply the code used on the circles to other shapes, but I had some issues centering my shapes. At this stage I also tried to expiriment with adding fills to every shape, and combined with the previous code, made it look almost like ripples in a dark body of water. <a href='https://editor.p5js.org/Orzrihh/full/KHucedy9Z'>Link to Sketch</a><br>Combining ideas from both of the code, I made certain shapes spin around the center and kept them reactive. This resulted in the sketch leaving a visible trail behind it whenever it moved, and it 'recorded' the size it was at the time, giving a static visual of sound. <a href='https://editor.p5js.org/Orzrihh/full/GWLZA7Cac'>Link to Sketch</a><br>When I got a grasp of ploting reactive shapes, I started branching out to my own sketches. This one was created by adding multple reactive obejcts to the skech, including a shape following the cursor, and setting the who canvas to Overlay using blendMode();. This is one of my favorite sketches because it's so visually striking from afar. This sketch was inspired by various vaporwave-style backgrounds. It was simple enough to set up, and creating this reminded me how simpler designs can be as, if not more effective than complex designs since it only took shapes to get the mood across. <a href='https://editor.p5js.org/Orzrihh/full/YtZDnmw1C'>Link to Sketch</a><br>I went back to using other shapes besides circles for this sketch. This is also where I played around with altering the rotation of certain elements. stacking these together ended up creating an interesting kaleidoscope-like visual. <a href='https://editor.p5js.org/Orzrihh/full/zscgVRPFc'>Link to Sketch</a><br>An idea I had was to create some sort of illustrative audio visualiser to combine my interests in art and music together. This was my first attempt at 'drawing' something with my voice <a href='https://editor.p5js.org/Orzrihh/full/zscgVRPFc'>Link to Sketch</a><br>I still think that the concept is interesting, but it was hard to develop this since I was incredibly nit picky about making the sensation of drawing feel smooth, which was tricky when the opacity of the user's 'brush' couldn't always be consistent. <a href='https://editor.p5js.org/Orzrihh/full/zY-PpbvWi'>Link to Sketch</a><br>At this point, I was somewhat stuck of what I should expiriement with. I went back the oscilator code since I was partly interesting it using it for the final, but for this sketch I was mostly testing its limits. I changed the array to play a variety of notes to get an idea of how the shape would react to different frequencies. <a href='https://editor.p5js.org/Orzrihh/full/YD5c0OAcM'>Link to Sketch</a><br>I wanted to compare variations of the reactive color in this sketch, so I duplicated the wave form to see both of them at the same time. I also took this chance to compare sizes and sensitivity as well. <a href='https://editor.p5js.org/Orzrihh/full/zQwCFvq06'>Link to Sketch</a><br>Understanding how to apply user detected values made me question if I could use them with 3d elements. I first tested this with oscilator since I could feed the shape consistant values, and the results came out perfectly. To add some variety, I adjusted different combinations of rotation to get boxes to spin in different directions. <a href='https://editor.p5js.org/Orzrihh/full/ID723oMuB'>Link to Sketch</a><br>Figuring out how to manipulate 3d shapes changed the course I was going with this project, so I spent good amount of time practicing with them. This was the first sketch where I used mic inputs to adjust these shapes. <a href='https://editor.p5js.org/Orzrihh/full/4FPHo0hak'>Link to Sketch</a><br>This sketch used similar code to the previous two, but I used a torus instead to see how it would be affected. I also tried to use a lighter palette to compare to later. <a href='https://editor.p5js.org/Orzrihh/full/05bGOshGO'>Link to Sketch</a><br>I went back to more basic sketches since I planned to combine both 2d and 3d shapes together for the final design and wanted to see some more possibilities. This skecth was inspired by a design by Colorful Coding on YouTube. <a href='https://editor.p5js.org/Orzrihh/full/pAP02RBvz'>Link to Sketch</a><br>This was a simpler version of a plotting visualiser. Its meant to be connected by lines, but the sparse particle look was more interesting to me since it makes the peaks in audio very obvious at a glance <a href='https://editor.p5js.org/Orzrihh/full/ReImp4ZFu'>Link to Sketch</a><br>I found some code which could change the color of elements over time. I thought this could be potentially interesting to add together with elements in the final, so I tested it on the previous code. <a href='https://editor.p5js.org/Orzrihh/full/V4pPY0B-Q'>Link to Sketch</a><br>I wanted to start layering different pieces of code together. This sketch was the start of this expiriment where I made sure most of the code was set up. To keep it consistant, I used one of the sounds from activity 1 again to play <a href='https://editor.p5js.org/Orzrihh/full/X2WvwanBj'>Link to Sketch</a><br>After stacking multiple shapes, I changed each of their stroke colors to distinguish them from each other and each shape had a different combination of rotatations to make them spin in different directions. <a href='https://editor.p5js.org/Orzrihh/full/fEDQbqUDc'>Link to Sketch</a><br> I had the idea to build an actual scene with some 3d shapes, and ended up creaing a reactive shape that looked like Saturn. I also added some small reactive particles that mimicked tiny debris to orbit the sketch. <a href='https://editor.p5js.org/Orzrihh/full/TshgIS0qX'>Link to Sketch</a><br>This sketch is a lot more simple, consisting on multiple cylinders with their height reacting to the audio's frequency. I mainly used this a test for positioning multiple 3d objects around each other rather than on top of each other. <a href='https://editor.p5js.org/Orzrihh/full/LzgKfKpx5'>Link to Sketch</a><br>I felt that the previous sketches leaned to heavy on 3d objects, so I created this sketch which balances the reactivity of 2d elements, the lines, with a single 3d element

Project 2


Final Project 2 Design

P5 Interactive Audio Web Header Portfolio

Link to the header can be found here

For the final design, I created a header that focuses on the theme of bridging gaps and creating new things in unexpected ways. Whenever it detects mic levels from the user, certain elements will be pulse, the intensity of which is determined by how loud the user speaks. Everything moves in tandem with each other, and the user is encouraged to play around with their volume to discover different ways to display the design.



×

Powered by w3.css