Category: 6. Final

I used teachable machine to create an audio project for my final project. I am a big music fan so I decided to make sketches to represent the biggest songs in music this year. For the teachable machine portion, when a user plays one of the top songs of 2021, the code will recognize it and a specific image will be displayed based on the song as a way of visualizing the year in music. The songs I included are Drivers License by Olivia Rodrigo, Good 4 U by Olivia Rodrigo, Levitating by Dua Lipa, Kiss Me More by Doja Cat and SZA, and Heat Waves by Glass Animals. I initially pulled inspiration from Spotify Wrapped, but as I did my sketches the song visualizations were influenced by either the lyrics of the song or the music videos. I wanted my illustrations to have more of a cartoon feel, so I utilized gifs and other animations to make the visualizations more fun and interactive.

Here is my code: https://editor.p5js.org/katrinamorgan/sketches/6SZFtAcml

Presentation with images: https://docs.google.com/presentation/d/1za9c38FQEdUSNIe6dUpTNRy5uJ1Y8q_trwWgYJLm_iY/edit?usp=sharing 

Bibliography:

https://editor.p5js.org/aferriss/sketches/H18ePMyqG

https://editor.p5js.org/awade5/sketches/BJHlo64z4 

https://editor.p5js.org/re7l/sketches/zt2ZJrpgo 

https://www.reddit.com/r/p5js/comments/qrxjw7/how_do_i_randomize_the_color_of_something/

https://editor.p5js.org/re7l/sketches/zt2ZJrpgo

Final Documentation – Interactive Generative Art

Brainstorm:

In the beginning of the semester, we did the generative project. I choose to do generative face, but I can’t say I’m satisfy with my outcome. I want to explore more about generative art. Few weeks ago we were introduced with a great tool called teachablemachine. It is very fun to play with the machine and use the output to make the “classify this ” project. So for my final, I want to combine the two project that I enjoy the most and make a interactive generative art. 

At the brainstorm stage of this project, my original concept was to use the image model to train the machine to recognize different shapes and draw the shapes on the canvas to create different art for different users. However, during the research process about generative line are, I came across Daniel Shiffman’s tutorial about Perlin noise flow field and loop. I was amazed by the art that this noise flow field was able to produce, so I decided that I want to do something with Perlin Noise. 

Outcomes

Code:  Interactive Generative Art

Demo

Bibliography

Shiffman, D., 2021. Perlin Noise Flow Field. [online] The Coding Train. Available at: <https://thecodingtrain.com/CodingChallenges/024-perlinnoiseflowfield.html> [Accessed 14 December 2021].

Imgur. 2021. PerlinVoid. [online] Available at: <https://imgur.com/t/generative_art/JNWkX> [Accessed 14 December 2021].

Suthar, N., 2021. Perlin Lines. [online] Dribbble. Available at: <https://dribbble.com/shots/9087305-Perlin-Lines> [Accessed 14 December 2021].

I used the sound library in p5js to create a keyboard instrument for my final project. The initial idea for my project is that the user can use both of the keyboard and the mouse to play a piece of music, and while the user is interacting with the keyboard or the mouse, a random geometric shape with different colors will be generated as well. However, throughout the process of making it, I realized that it could be more user friendly if I change the mouse interaction part on canvas into a grid, so that the user will know where to click for the sound that they want. 

 

Here is the code that I used in editor:

https://editor.p5js.org/ys4136/sketches/RIWpJhEHW

Here is the project in full screen:

https://editor.p5js.org/ys4136/full/RIWpJhEHW

The first thing that I did was to find the appropriate soundtracks that suited my project. I found this video on bilibili.com, and downloaded the zip file of the soundtracks that the video uploader has shared. Then I uploaded the soundtracks that I decided to use in my project to p5js. I used the function called preload to load the sound files in my sketch and used them by using .play(). I also used the function of mousePressed and keyPressed to play the soundtracks. Inside of the draw function, I drew the grid for the percussion instrument. 

Bibliography 

jonobr1. “PATATAP.” Patatap. Accessed December 14, 2021. https://patatap.com/.

【后期必备】60大类乐器音效，无套路免费分享，爱乐器爱音乐人士必入不悔！. 【后期必备】60大类乐器音效，无套路免费分享，爱乐器爱音乐人士必入不悔！_哔哩哔哩_bilibili, 2021. https://www.bilibili.com/video/BV1jM4y137wj?spm_id_from=333.999.0.0.

For my final project, I decided to make a riddle game. The story of the game is that the player is trying to escape a dungeon, and while the player is on their way to the exit, a monster mysteriously shows up. The monster then informs the player in order to survive, they must answer all of the monster’s riddles. The player will have three chances or lives to guess the answer correctly for each riddle. Otherwise, the monster will kill them. If the player guesses correctly, they will proceed to the next level, and the number of lives will reset back to three, making the monster angrier. The riddles will become more challenging as the levels progress. For the scope of this project, I decided to implement only nine riddles. The riddles will be randomly sorted within each difficulty level. If the player fails and loses the game, they can attempt the riddles again from the beginning (but the order of the riddles will be shuffled). I used the Bloodborne Soundtrack OST – Main Menu Theme to give the game an eerie ambiance. I also added more sound effects such that if the player guesses wrong, dies, or the “game over” message shows, etc., a sound will play respectively to respond to the situation to make the game more interactive.

Initial Sketch

Final Result

References

           Bat, Victoria. “The Smile of a Monster with Sharp Fangs.” Smile Monster Sharp Fangs Stock Vector (Royalty Free) 1965435370, https://www.shutterstock.com/image-vector/smile-monster-sharp-fangs-1965435370. 

           “Blood Splatter Png Transparent Background – Gunshot Blood Splatter PNG Image with Transparent Background PNG – Free PNG Images.” TopPNG, https://toppng.com/free-image/blood-splatter-png-transparent-background-gunshot-blood-splatter-PNG-free-PNG-Images_170589. 

           Bloodborne Soundtrack Ost – Main Menu Theme. https://www.youtube.com/watch?v=BhGZkdODoDM?list=PLCLeSTzz6trY_Qn_8vMnqO9TbqesAM4x6.

           “Desktop Dungeons HD Wallpaper: Background Image: 1920X1200.” Wallpaper Abyss, https://wall.alphacoders.com/big.php?i=621649.  

           Game Over Sound Effect – SFX. https://www.youtube.com/watch?v=4crYlyIOcp8&ab_channel=RealSoundEffects. 

           Gods of Egypt (2016) – the Riddle of the Sphinx Scene (7 … https://www.youtube.com/watch?v=CUYNZo-8cDM. 

           “Help Me.” Help Me Font, GGBot, https://www.dafont.com/help-me.font. 

           Monster Sound Effects. https://www.youtube.com/watch?v=Z-sSy8urj-c. 

           Myth: Oedipus and the Riddle of the Sphinx. https://www.mwpai.org/assets/Education/MA-Resources-9-15-2016/Myth-Oedipus-and-the-Riddle-of-the-Sphinx.pdf. 

           “The Riddler.” Batman Wiki, https://batman.fandom.com/wiki/The_Riddler.

Project Code: https://editor.p5js.org/aysabellegalvez/sketches/m8mnnFwvG

Project Description: 

My project is called “Reliever,” which is a program that is a series of anxiety-relieving computer activities. I programmed 3 different programs: 1) Object Focus, inspired by the 5-4-3-2-1 grounding method where a person lists characteristics of a physical object. In my program, you answer questions about a random shape that appears on screen. 2) Mantra repetition, inspired by positive affirmation methods with the goal of a person to feel better about themself. My program has the computer listen for the user, to keep the user accountable (and probably have to repeat because an imperfect computer is listening which makes it even more effective) positive affirmations about themselves. 3) Breather, which uses the inspiration for this whole project, a GIF that depicts a breathing exercise for the user to follow. 

Object Focus uses JSON to organize the characteristics of the shapes. Mantra uses the audio version of Teachable Machine to listen for the user’s repetition of the phrases (used tutorial by Daniel Shiffman from The Coding Train on Teachable Machine). Breather simply has a GIF. For the overall project, I used the p5.SceneManager library by “mveteanu” on GitHub. These 3 different activities and the main menu are organized with the library. 

Project Sketches from Proposal: 

Muscle Relaxation was in my proposal, but was rejected because of the complication of machine learning with different poses and camera angles. 

Bibliography:

mveteanu, “p5.SceneManager,” GitHub, 21 July 2021. 

https://github.com/mveteanu/p5.SceneManager

Gotter, Ana. “12 Ways to Stop a Panic Attack,” Heathline, 19 Oct 2021. 

https://www.healthline.com/health/how-to-stop-a-panic-attack

Shiffman, Daniel. “Teachable Machine 3: Sound Classification,” The Coding Train, 2019. 

https://editor.p5js.org/codingtrain/sketches/e3nrNMG7A