Module 2 Formstorming

Weekly Activity Template

Ada Walia


Project 2


Module 2

For Activity 1 I went around my home and found the sounds that everyday objects make.
Throughout Activity 2, I was very engaged in many different ideas. This is part of the reason why I have used AI very heavily in my activity 2 (all links to the AI chat can be found in the description of each photo). I wanted to quickly see if my ideas were feasible and or possible. So when it came time to conceptualize my final idea I struggled a lot! I brainstormed many different ideas and then it hit me that the first couple of iterations were the ones I was most drawn to. I loved how I could connect math, art, and sound all together. Additionally, there are YouTube links to watch the videos with sound.

Activity 1

Sound of Paper Towel Ripping Boiling Water in Kettle Pouring Water Spraying Cleaner Opening and closing door Sound of Vacuum Cleaner Sticking Magnet on Fridge Putting on flower hair clip Turning on lighter Using Mircowave Using Scissors Sweeping with a broom Moving paper bag Opening and closing lip balm Using glass oil dropper Opening and closing toothpick holder Drawing with a pen Opening a can of ice tea A sink with water Using a post it note Using a hole puncher A zipper on a pencil case Velcro Opening an umbrella Keys clicking together

Activity 2

Every time the button is clicked it plays a sound and shows the sine curve that corresponds to the amp and frequency of the sound. <a href='https://youtu.be/CBGMm4ij3_g?si=3sWvbGzZBWXw6ECs' target='_blank'>Watch the video here</a> The colors change as the frequency of the sound changes. https://chatgpt.com/share/67fb2f53-a06c-8011-a270-16b3ca03d96b <a href='https://www.youtube.com/embed/Hqb5HwIGDzI?si=d1klMVYUqLDGRjod' target='_blank'>Watch the video here</a> Two sliders affect the amplitude and frequency of the sound. A corresponding sin curve appears on the screen to visually represent it. https://chatgpt.com/share/67fb2f53-a06c-8011-a270-16b3ca03d96b <a href='https://youtu.be/00lWjtSHSfM' target='_blank'>Watch the video here</a> Here, you can manipulate a circle to make the water sound. This is supposed to be a calming, meditative activity. https://chatgpt.com/share/67fbde25-c5f4-8011-866c-b034cae2f655  <a href='https://youtu.be/aI1wCbCIQUw' target='_blank'>Watch the video here</a> This represents Indian bangles. The user can move them together. When they are put together the sound of clicking bangles plays. 2 or more of the sound overlaps. When the bangles don't touch it is silent. <a href='https://www.youtube.com/watch?v=w-UFGvA7uQ0' target='_blank'>Watch the video here</a> Here there are three circles, red, blue and yellow. Each has a specific sound associated with it: red - fire, blue - water, yellow - stones. Manipulating the circle will manipulate the sound. Overlapping circles will overlap the sounds. https://chatgpt.com/share/67fbf420-951c-8011-8496-a0c437c08479 <a href='https://youtu.be/BCyM5dDH-AM?si=urSs9MH9wKlpBbuu' target='_blank'>Watch the video here</a> In this code it sees if you are speaking quietly, if you are then it will say indoor voice. If you are speaking loudly then it will say outdoor voice. This could be used by teachers so their students have a visual representation of what is an appropriate speaking volume. https://chatgpt.com/share/67fbfe49-cf94-8011-a377-40260c3e9d9f <a href='https://youtu.be/YXdGs4f7C1A?si=YuUAGcfxT4itmcDk' target='_blank'>Watch the video here</a> Every time a person speaks it creates a Mandela pattern, it will be bigger if the sound input is bigger. Once the person stops talking and starts talking again the the colour will change. If you keep talking you can create a beautiful pattern. https://chatgpt.com/share/67fc2f60-d630-8011-b465-1ed61c8c1480 <a href='https://youtu.be/KnuVXFndqBI' target='_blank'>Watch the video here</a> When talking in a low tone it is red, when you talk loud it turns blue. https://chatgpt.com/share/67fc3a7b-214c-8011-b776-0d4dcb495f9e <a href='https://youtu.be/fao3-ehueG8?si=z5xS0GgkkgCzvHHu' target='_blank'>Watch the video here</a> When the need motivation button is clicked then the text-to-speech says a quote. https://chatgpt.com/share/67fc4778-e204-8011-a9c6-ade19292a70f <a href='https://youtu.be/298tPLoXj9g?si=QRj0ZaXg5sBfAFDO'>Watch the video here</a> This is an alarm clock-based interaction. When the webpage opens up (the user has to click the screen because of Chrome requirements) it begins saying Wake up, wake up. The user then has a slider that they must slide in the correct spot to turn it off. https://chatgpt.com/share/6806d31d-b568-8011-9a82-6299654ec0de This screen displays two shapes, a circle and a square. When you click the circle it says I am a circle and when you click the square it says I am a square. https://chatgpt.com/share/6806ef3f-91dc-8011-8cc9-4aafe7123228 This is a follow-the-path game where the user has to use their voice to get the square to follow the path, if they go off-path the game restarts. https://chatgpt.com/share/6807a3fd-308c-8011-9b8b-13220999c368 Here you can use your voice to create an artwork. You can change the colour of the circle and tell it what direction you want it to go. https://chatgpt.com/share/6807e06d-fc40-8011-9085-ce743c499cfd <a href='https://youtu.be/AX_kslCKT3E?si=9eE1Wb73e1UIaa3q'>Watch the video here</a> This is a rough colouring page of cupcakes and when the user clicks on different sections they can colour it in using their voice. https://chatgpt.com/share/6807f2e6-5ecc-8011-8351-a9e44e455933 <a href='https://youtu.be/iFo-raHYqvo?si=nA4xIMmgv2Y_RZkI'>Watch the video here</a> In this exploration, I tried creating my own sound model using tutorial 6. When there is background noise it is blank and then when I clap there is a clapping emoji.  The model is a little finicky and has many false clapping results. <a href='https://youtu.be/zliC3i_NiQc'>Watch the video here</a> In this exploration, I tried to add a waving emoji when the user says hello. The circles change colour and grow bigger depending on the volume of the input sound. https://chatgpt.com/share/67fc2f60-d630-8011-b465-1ed61c8c1480 <a href='https://youtu.be/ZskDjkBu3ZU'>Watch the video here</a> Here the colours stay and don't turn transparent. https://chatgpt.com/share/67fc2f60-d630-8011-b465-1ed61c8c1480 <a href='https://youtu.be/3cRcD6aCWJM'>Watch the video here</a> Here I attempted to make a sensor for different sounds. Talking = Black. Clapping = blue. Snapping = Purple. It didn't really work. https://chatgpt.com/share/67fc3a7b-214c-8011-b776-0d4dcb495f9e <a href='https://youtu.be/bzshUidMTDA'>Watch the video here</a> Playing around with the text-to-speech tutorial. https://chatgpt.com/share/67fc4778-e204-8011-a9c6-ade19292a70f <a href='https://youtu.be/0wJ01PA_hYs'>Watch the video here</a> Here I was trying to create the alarm clock slider but this version was a failure and the sound would not work. I think because there was no button to start the sound and Chrome won't allow sound to play without that. In the fixed version the user clicks the screen to start it. https://chatgpt.com/share/6806d31d-b568-8011-9a82-6299654ec0de Here I was trying to get a text-to-speech working where when the user tapped on a shape it would say what shape it was. This did not work, nothing happened when the shapes were pressed. Here I am trying to create a maze game that is navigated through voice. <a href='https://youtu.be/8_IeNghAWAI'>Watch the video here</a> Here I am trying to make the circles change colour on voice command, but it is not working. However, once I said up and it changed to the colour white but I was not able to record that. Overall though this iteration did not work well. <a href='https://youtu.be/aKjxaztvP70'>Watch the video here</a>

Project 2


Final Project 2 Design

P5 Interactive Audio Web Header Portfolio

I have created an interactive sound header that visualizes and manipulates sound frequencies using sine waves. I was inspired by existing sin function visualizers, Daniel Shiffman's coding examples, Desmos (an online graphing calculator), and my personal interest in the connection between Sine waves and sound. When I first started this project, I was very intrigued that this concept of sin that I learned in my high school functions math class was coming up again, and I wanted to create something with that interest. What I learned through my research was that there are already sine wave sound visualizers that allow the user to manipulate sound and have it reflect that wave either by inputting numbers or using sliders but I had yet to see something where a user could manipulate the wave itself, and use that sine wave to create artwork while simultaneously creating sound. Additionally, I learned that "all sounds can be built up out of pure tones" (R. Kulkarni) meaning that all sounds could be broken into many different sine wave frequencies so with that concept I set out to come up with a way for the user to overlap sine sounds. That is how I ended up with my final design, a tangible playful sound oscillator. Users can drag, stretch, and compress different colour sin waves to control the amplitude and frequency in real-time. By giving this freedom they can create artwork while creating a unique sound.

Click here to see it working on my server

test2Lorem ipsum dolor sit amet, consectetur adipiscing elit

×

Powered by w3.css