Module 2 Formstorming

Weekly Activity Template

student name put a description here or you will lose grades

Project 2

Module 2

These are the various sounds and things that I interacted with for my formstorming. My various formstorming examples for code are shown under activity 2

Activity 1

This is audio I recorded while walking. Link to image - Luengo, A. (2019, February 12). close-up photography of person walking on pavement. Unsplash.com; Unsplash. https://unsplash.com/photos/close-up-photography-of-person-walking-on-pavement-jSvoR46Xk8Q ‌ Basketball 5. (2026). Freesound.org. https://freesound.org/people/zmobie/sounds/319784/ Link to image - Unsplash. (2023). Basketball Background Images: 900+ Free Images on Unsplash. Unsplash.com; Unsplash. https://unsplash.com/s/photos/basketball-background ‌ ‌ car_passing14.wav by inkaj. (2022). Freesound. https://freesound.org/people/inkaj/sounds/660171/ Link to image - Unsplash. (2024). Motion Blur Car Pictures | Download Free Images on Unsplash. Unsplash.com; Unsplash. https://unsplash.com/s/photos/motion-blur-car ‌ ‌ Dinosaur 3.wav by JarredGibb. (2026). Freesound. https://freesound.org/people/JarredGibb/sounds/233278/ Link to image - Unsplash. (2025). T Rex Pictures | Download Free Images on Unsplash. Unsplash.com; Unsplash. https://unsplash.com/s/photos/t-rex ‌ ‌ Motor. (2026). Freesound.org. https://freesound.org/people/dpsa/sounds/341596/ Link to image - Unsplash. (2023). Automobile Engine Pictures | Download Free Images on Unsplash. Unsplash.com; Unsplash. https://unsplash.com/s/photos/automobile-engine ‌ ‌ Tick Tock Clock - Close Mic.wav by Toby_Crane. (2026). Freesound. https://freesound.org/people/Toby_Crane/sounds/181035/ Link to image - Unsplash. (n.d.). Best 500+ Clock Images | Download Free Pictures on Unsplash. Unsplash.com. https://unsplash.com/s/photos/clock ‌ ‌ RAIN STICK A INCIDENTAL RATTLE 02.wav by sandyrb. (2026). Freesound. https://freesound.org/people/sandyrb/sounds/86356/ Link to image - Unsplash. (2022). 500+ Rain Drop Pictures [HD] | Download Free Images on Unsplash. Unsplash.com; Unsplash. https://unsplash.com/s/photos/rain-drop ‌ ‌ xbox360_power.m4a by MiscPractice. (2022). Freesound. https://freesound.org/people/MiscPractice/sounds/662693/ Link to image - Rohan. (2021, June 7). a video game controller laying on top of a lush green field. Unsplash.com; Unsplash. https://unsplash.com/photos/a-video-game-controller-laying-on-top-of-a-lush-green-field-3Y63DP4rPto ‌ ‌ Dry_leaves_and_parasol_creaks_02.wav by AlienXXX. (2016). Freesound. https://freesound.org/people/AlienXXX/sounds/350724/ Link to image - Unsplash. (2018, February 13). Photo by Nahil Naseer on Unsplash. Unsplash.com. https://unsplash.com/photos/green-leaf-plants-xljtGZ2-P3Y ‌ ‌ Switch Light 04.wav by tbrook. (2016). Freesound. https://freesound.org/people/tbrook/sounds/348219/ ‌ SFX_Car_Engine_Outside_Start.wav by GiocoSound. (2017). Freesound. https://freesound.org/people/GiocoSound/sounds/401558/ Link to image - Unsplash. (2023). Automobile Engine Pictures | Download Free Images on Unsplash. Unsplash.com; Unsplash. https://unsplash.com/s/photos/automobile-engine ‌ ‌ splash 1b by Logicogonist. (2025). Freesound. https://freesound.org/people/Logicogonist/sounds/807962/ ‌ Taser by JavierZumer. (2026). Freesound. https://freesound.org/people/JavierZumer/sounds/257236/ Link to image- Johannes Plenio. (2017, August 30). time lapse photo of lightning. Unsplash.com; Unsplash. https://unsplash.com/photos/time-lapse-photo-of-lightning-GmBT6GQEOs0 ‌ ‌ Another Airplane Toilet Flush.wav by lonemonk. (2026). Freesound. https://freesound.org/people/lonemonk/sounds/100839/ Link to image - Point3D Commercial Imaging Ltd. (2022, July). a toilet in a bathroom. Unsplash.com; Unsplash. https://unsplash.com/photos/a-toilet-in-a-bathroom-vwCEyRG1w00 ‌ ‌ pc_vent.wav by M-RED. (2026). Freesound. https://freesound.org/people/M-RED/sounds/38870/ ‌ KICK 073 by GioMilko. (2016). Freesound. https://freesound.org/people/GioMilko/sounds/353754/ Link to image - Cover, C. (2023, February 20). a group of drums sitting on top of a rug. Unsplash.com; Unsplash. https://unsplash.com/photos/a-group-of-drums-sitting-on-top-of-a-rug-Wn9JK4Y4ykY ‌ ‌ Piano.ff.E6-[AudioTrimmer.com].mp3 by dwengomes. (2017). Freesound. https://freesound.org/people/dwengomes/sounds/409468/ ‌ light punch by damnsatinist. (2019). Freesound. https://freesound.org/people/damnsatinist/sounds/493914/ ‌ Phone Ringing #1 by AUDACITIER. (2022). Freesound. https://freesound.org/people/AUDACITIER/sounds/629200/ ‌ SMG_Sund_Drum_Hat(2026). Freesound.org. https://freesound.org/people/stoltingmediagroup/sounds/597535/ Link to image - Cover, C. (2023, February 20). a group of drums sitting on top of a rug. Unsplash.com; Unsplash. https://unsplash.com/photos/a-group-of-drums-sitting-on-top-of-a-rug-Wn9JK4Y4ykY ‌ Locker Closing by 12065137. (2018). Freesound. https://freesound.org/people/12065137/sounds/449523/ ‌ dorm door opening.wav by pagancow. (n.d.). Freesound. https://freesound.org/people/pagancow/sounds/15419/ ‌ Vox Boing 1.mp3 by se2001. (2019). Freesound. https://freesound.org/people/se2001/sounds/462675/ Link to image - Cheek, B. (2018, July 18). man jumping above rock mountain. Unsplash.com; Unsplash. https://unsplash.com/photos/man-jumping-above-rock-mountain-GNk9IAiIvrg ‌ ‌ Link to image - (2026). Unsplash.com. https://images.unsplash.com/photo-1643114786355-ff9e52736eab?fm=jpg&q=60&w=3000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZWxlY3RyaWMlMjBrZXR0bGV8ZW58MHx8MHx8fDA= ‌ weird_guitar_2.wav by eliw777. (2018). Freesound. https://freesound.org/people/eliw777/sounds/433758/ ‌

Activity 2

This is a basic button that I made in p5. I decided to make a button that I could style and animate later on to make it more interactive. I used this button for the start and stop function in my full sketch. This is some of the first test code that I had when I first attempted to use sound on p5js. I watched a coding train tutorial to learn how to use sound. I later watched steves turotials for my other examples. This is a demonstration of the first attempt I had with this code. It mostly just randomizes colour and has a slider for volume. This is a screenshot of the button that I created. I made the fill blue and added a lightning bolt to make it look more interesting and to highlight that the user should click the button. I wanted to make it so on click, the button would go off. The animation would be a ripple. This is a demonstration of the colour to the beat of the music test. It works well. The triangle changes colour to the amp of the music. This is something that could help with my project if I want to make a colour changing button or icon. This can put emphasis on the button itself. This example demonstrates the button with the animation added. On click, the ripple animation starts behind the button and the button gives feedback telling the user they have clicked it. This can be utilized in my project in a way since I can make the button do something when a user clicks it or incentivise them to press it. This is a visulization of the speaker changing left to right audio. When a user slides the slider, the square roates to each side of the screen. This visualizes the change from the left to right speaker of the users computer. I could use this in my project to make dynamic sound effect. I added the colour randomizer to make the rotating square more unique Visualization of the colour randomizer and speaker changing combined. The square changes colour throughout the entire time and rotates to the left and right speaker. This is an example of how I can combine my elements I made. This demonstrates how I made a cube follow the users mouse pointer. This is something that I can use in my project to make an interactive and unique element on the users screen. This was how the cube turned to music. at first, I noticed it was jittery and not smooth so I made multiple iterations below to fix the way it moved. Based on the volume/amp the cube rotates. I imported a song into the sketch and when the song got loud the cube would rotate at a very fast pace. This image shows a audio visualizer that follows the mouse as the user moves their cursor around the screen. I used steves tutorial here and combined that concept with the square I made earlier that follows the users mouse. This shows how the mouse could be something involved in my interaction. The user could interact with elements on their screen with the mouse in my project. This is the end code that resulted in a Smooter rotate code. That is depicted in the image to the right of this one. This is an audio visualizer that was created. Its adapted from steves tutorial. I found online that helped me to import my own images onto the P5Js site. I used this to add an image over the spinning cube. I wanted to expand this idea further by adding a start and stop button that could control both the song and the rotating cube. When the user clicks, the animation starts along with the music It stops when the user stops clicks the play/pause button. If the user clicks pause when the cube is spinning at a fast rate, the cube will stop at that point and not reset to the original position or part of the song. This showed me that I could make the animation and music interactive in other ways. I changed the shapes on the tutorial to a square and triangle and lining them up forms a house as the user moved them around the screen, they would deform even more. I also put two squares on the template but wanted to expand on this. I wanted to make the shapes more unique and change how they looked more so they would warp when a user moves the shapes around. I went back to the original objects and modified the code so it would deform more. The triangle would also rotate on the mouse being moved around the canvas. This shows how the code functions since the shapes have moved down. I also messed around with some of the colours and transparency options to make the squares unique. This is how I modified the tutorial code and added different shapes and sizes. I could use something similar in my project to make an element that deforms or warps when a user tries to interact with it. I changed the visualizer code that steve made and amde it red and react less. I messed around with a bunch of colour and green was one of the best picks. I wanted to make the visualizer mounted on the left side of the users screen so that moving the mouse up and down would change the shape and look of it. I managed to get the visualizer on the left side of the users screen and changed some of the values to make the lines thinner. I thought that this colourn of red looked interesting so I kept with it. I expirimented with the size that the visualizer starts and found that making it longer did not look as good. I also changed the colours around but the best colour choice was still a light blue so I changed it to that in the final version. This was the final version of the visulizer that I made while using copilot to edit some of the code. The final result ended up being similar to the tutorials since I used the same file but this time the visulizer is fixed to the left side of the screen.

Project 2

Final Project 2 Design

P5 Interactive Audio Web Header Portfolio

This is how my Final Project Turned out. On start the user can make various faces and the system will use training data to detect what emotion the user is doing.

Click here to see it working on my server

test2Lorem ipsum dolor sit amet, consectetur adipiscing elit

×

Powered by w3.css