Exquisite Corpse

Description

This clock drops a cupnoodle every 3 minutes. When i think of a way to tell time, it would be "a cup noodle takes 3 minutes to be ready" Cupnoodle was an essential for me when I studied high school in a far away from civilization prep school. It was almost a currency atour school (prison lol ) The waiting time is always slow when you are standing in front of a cupnoodle waiting for it to be soaked up and ready.

Design Process

I started with figuring between createImage() and loadImage(), finding one that works best for me. At first I thought you could only upload a image via url so i uploaded the cupnoodle photo onto my server and linked the url to createImage. Turns out you could upload files to the p5.js web editor! Thanks to Lan's recommendation of the coding train youtube channel, I figured that part out with no issue. Then I did the digital clock timer, found a p5.js by TeddRrout where he layed out the explaination of creating one pretty cleary. I first set the h, m, s as hours, minutes and seconds, h%24 to indicate the 24 hour time mode. Also added if m is in single digit, adding a zero before the single digit m. Did that for the second() too. Another thing I learnt from coding train as that you could upload a .js to the web editor, which helps with making your code more clean. I learnt that you could put in parameters into function brackets! Did that for the cupnoodle.js which is the constructor for my loop, set the parameters with img and tempX, tempY, tempW. Then I did the this.display() with the img first, x and y and width coordinates and lastly something I found online to keep the image into original ration. Adding speed when cupnoodle spawns, add gravity to speed and reverse speed when it hits bottom. These are the codes I found online and learnt the mechanics behid those. One issue came up was that I didnt know the draw function is 60 frame per second meaning it will non stop loop my cupnoodle loop 60 times a second. I had to fix this by setting the interval and into 1000 milli sec. Tried doing my if statement inside draw function but didnt work for me, so I just did a new clock2 function and did it there instead. I learnt about the % symbol as wel as when you only do m%3, the cup noodles will nonstop loop after the first 3 minute mark. I changed it with a && invetween and s===0 and worked out perfectly finally.

Reflection

I was a lil frustrated at first because I had some trouble figuring the code and it was my first time not using an object or something drawn with p5.js. But overall a really great learning experience haha. Cupnoodle is one of my childhood memories since I studied in a boarding prep school out of no where in Massachusetts. It was almost a currency at the school, very much like a prison lol. I once had a dorm parent who has high came in and just took one of my cup noodles lol. But anyway, this exercise was fun for me eventhough I didn't complete it fully on the due date ahahha, sorry!