Week 2 Assignment

Concept

The inspiration came out of nowhere when my friends and I were telling a running joke about how we can each be a character in the Ratatouille movie over our dinner, and it struck me that it’d be fun to create a mouse chasing its cheese for this assignment.

Highlight

I thought it’d be fun to have the mouse be the “cheese” by linking an image to it and another so the first thing I set to watch was this video about acceleration towards the mouse. Then I set onto creating my canvas, uploading images, and so on.

For the images I used these cute clip arts of cheese and mouse.

Something that I struggled with in this assignment was trying to get the mouse image to be portrayed on top of the cheese image, because it looked a little weird when it was vice versa — it was almost as if the cheese was eating the mouse, not the other way around. I tried searching up solutions for it, but I still couldn’t figure out the answer in the end.

Despite this complication, I managed to add the elements of velocity, acceleration, etc. correctly in a way such that the object (mouse) will move towards the cursor (cheese), thus tracking its movement — this part of the code is shown below:

class Mickey {
  constructor(x, y) {
    this.pos = createVector(x, y);
    this.vel = p5.Vector.random2D();
    this.vel.mult(random(3));
  }

  update() {
    let mouse = createVector(mouseX, mouseY);
    this.acc = p5.Vector.sub(mouse, this.pos);
    this.acc.setMag(1);

    this.vel.add(this.acc);
    this.vel.limit(5);

    this.pos.add(this.vel);
  }

 

Embedded sketch

I ended up adding a maze background to make this look a little more fun and exciting, which I drew inspiration from this image.

And here’s the final sketch.

Reflection

I think this could become much better after revisions, such as figuring out how to overlay the mouse image over the cheese image as well as setting edges to work for the right side’s x and y values of the canvas — for some reason, it seemed like only the left side of the canvas’ edges were working. I also thought it’d be fun to potentially turn this into a game similar to the concept of the good old Packman game!