ICM Week 3 - Conditionals an

Instructions:

1. Move the mouse from left to right to see the animation

2. Ghost eyes will follow the up and down mouse movement

3. Press the mouse button to change the ghost color

Here's the code.

This week was a struggle for me for a few reasons. I was pretty swamped with life in general and didn't have as much time to spend on the homework assignment as I would have liked. Because I was running behind, I didn't get to hand off my drawing to my class partner (who is supposed to add their own spin on it) until the last minute. I will post the updated drawing below when I receive it:

What Didn't Work

In general I struggle a lot with conditional statements and logical operators and always have, especially when throwing variables into the mix. Not only does the syntax throw me off, but the logic itself and placement of the code snippet within the overall program is hard for me to process.

The hardest part of this week's assignment was figuring out how to get Ms. Pac-Man's mouth to move. I spent most of my time on it (4+ hours) and below you can see the farthest I got. I'm not entirely sure how to resolve this issue:

let uppermouth
let lowermouth
let speed = 0

function setup() {
  createCanvas(200, 200);
  angleMode(DEGREES);
}

function draw() {
  background(0);

  uppermouth = 320
  lowermouth = 40
  speed = speed + 1

  fill(255, 255, 0)
  circle(100, 100, 80)

  fill(0);
  arc(100, 100, 80, 80, (uppermouth += speed), (lowermouth -= speed))

  if (uppermouth > 350) {
    speed = !speed
  }
}

I know it has something to do with the math operations required to make the arc move - because I ended up having to borrow the formula from marynotari (Thank you!) to get the mouth to animate properly. I know why mine wasn't working - but I'm not sure how the fix it and the math was beginning to implode my brain. From what I can tell, the main difference in our code was this line:

arc(200, 200, 200, 200, 
      (i+=speed)*PI, (x-=speed)*PI, PIE);

I couldn't figure out why "*PI" needed to be in there for it to work properly. I also for the life of me cannot work in Radians. I ended up using degrees in my code in an attempt to help me understand better. I'm still struggling.

What Worked

Everything else went smoothly - surprise, surprise. However I do recognize that I used largely the same "if" statement throughout the entire drawing. I know I can definitely condense it to shorten the number of lines, but honestly I was just happy that everything worked this week. Learning how/forcing me to use objects and dot syntax notation would help make my code more efficient, which in turn would make me look cooler:

For those unfamiliar with the movie "Hackers" (1995), I recommend it. It's goofy.

What I Learned

Wow I learned a lot this week! I learned that I shouldn't just stew if I'm stuck or having trouble figuring something out. I also learned that physically writing down what I want to have happen in my drawing using english sentences helps my brain figure out what I need to write in p5.js.

This week was fun but equally frustrating, I hope things start to click a bit more for me as we go further along in class. Overall though I don't think I'm doing too bad.

- don't be so negative! (I still think this joke is hilarious)