Concept:
Coffee is undoubtedly my favorite go-to drink, especially as a sleep-deprived college student. Everything about coffee is wonderful – whether it be the scent of the coffee beans, the warm, inviting atmosphere of cafes, or even its bitter aftertaste. So, naturally, I wanted to dedicate at least one of my projects to create an animation with coffee, although I wasn’t entirely sure what and how. Then an idea of having a coffee cup and a sugar cube being dropped inside it came randomly to me, so I decided to try and recreate that. It was perfect because it incorporated movement, which was something I wanted to try since day 1! Initially I wanted to create a kettle and have coffee pour out from it, but I quickly decided against it when I realized my skills weren’t that advanced enough to recreate that. Instead, I decided to create a simple clock to fill the empty space on the canvas.
Process/Coding:
I wanted my background to have a vintage vibe to it, so I decided to go with a slightly darker orange. Then I created the coffee cup, which took a while because I was still trying out and adjusting the position, length, etc. of the shapes. Eventually I was able to put the different shapes and lines together to create a mug with coffee inside, but then I had some trouble trying to empty the space between the handle and the mug’s body; because I colored the entire arc with white, it wasn’t letting me discolor the smaller arc space within it.
(it was this tiny space between the handle and the body of the mug.)
So in order to color that part as the same orange shade as the background, I simply decided to create an arc that will fit perfectly in that space and color it orange. Here’s the coding that I’ve used:
fill(230, 109, 69); arc(93, 240, 77, 130, radians(37), radians(143), CHORD);
Once that was done, I moved onto creating the clock, which I initially visioned to also have a bit of animation in it because I wanted to move the clock’s hands. However, when I tried to animate the clock hands only, it instead hid most of my coffee cup’s body, which is an error/mistake that I’m still trying to figure out. So, unfortunately, the clock hands are fixed and frozen for now.
Now, the true challenge was creating a “class,” because I had no clue where to begin or what it would do. Thankfully, one of our Intro to IM upperclassman was kind enough to teach me the basics – once I understood that a “class” was simply a cookie cutter (using Professor Shiloh’s metaphor from class), it was a little easier to plug in the characteristics of whatever object that I wanted to create in the “class.”
I decided to name my class “Sugarcube,” true to the image and the role of the little white square that I was dropping into the coffee via animation. Here are all the codes that I used to create sugarcube:
let yPos = 30;
let sc1;
class Sugarcube {
constructor() {
this.yPos = 30;
this.ySpeed = 2;
}
move() {
if (this.yPos < 250) {
this.yPos = this.yPos + 2;
}
}
draw() {
fill(255);
square(120, this.yPos, 30);
}
}
Then, in order to move it, all I had to do is plug in the below:
sc1.move(); sc1.draw();
And voilà, here’s the final product:
Reflection:
Although this was a pretty challenging assignment that I started off with very little knowledge in the function “class,” it definitely pushed me out of my comfort zone and learn new efficient skills! I realized just how convenient this function can be if it is used correctly, because all I need to do is plug in (variable name) move(); or (variable name) draw(); in order to reproduce the exact same variable.