IMG_6316.JPG

itp

ICM Week 2: Animation

This week’s assignment was SO MUCH FUN.

The Assignment: Create a sketch that includes (all of these):

  • One element controlled by the mouse.

  • One element that changes over time, independently of the mouse.

  • One element that is different every time you run the sketch.

Inspired by the TV show Bob’s Burgers, I decided to create a simple hamburger sketch with a color-shifting sign that allowed the user to squirt ketchup at the burger. I wanted the sign to resemble old-school neon signs, so I wanted the frame rate to shift slowly (about 2 frames per second). However, I also wanted the ketchup bottle to track with the user’s mouse pretty closely, and when the frame rate was so slow, it felt pretty laggy. When the sign changed at the normal frame rate (which I believe is 30 FPS) it gave me a headache, so I had to figure out a way to split the two (ketchup bottle and sign.)

I ended up getting around this issue by keeping the frame rate for the overall sketch normal, and declaring my own function called “changeColor()”, and then setting the interval for that function to change twice per second: setInterval(changeColor, 500). I then declared (but did NOT define) the variables r, g, b at the top of my sketch before setup(), and wrapped the randomization of the sign color in my changeColor() function after closing my draw() loop

function changeColor() {

r = random(100, 255);

g = random(255);

b = random(255);

}

(a big shoutout to fellow ITP-er Eva for helping me with this frame-rate issue!) This allowed me to get around the error p5 gets when trying to use the random() function outside of the draw loop.

Another useful function I found was the push(); and pop(); function, which allowed me to rotate the positioning of the ketchup bottle without rotating the sign or any elements of the burger.

Full code can be found here: https://editor.p5js.org/full/rJu6oE3dm

Requirements x my sketch:

  • One element controlled by the mouse (the ketchup bottle follows the user’s mouse, and if they press the mouse, ketchup squirts out of the bottle.)

  • One element that changes over time, independently of the mouse. (The sign changes color once per second.)

  • One element that is different every time you run the sketch. (The color of the sign when the user presses “play” on the sketch is different each time, as it is defined by the random() function.)

Messages Image(971894787).jpeg

Questions I had while making this sketch: How can I get my font to be bolded? How can I get the ketchup bottle to track more directly with the mouse (e.g. why is it so far below the user’s mouse?)

ITP, ICMCaroline NeelComment