Assingment 3: Seven Lives /ᐠ｡ꞈ｡ᐟ\

Concept:

In this project I wanted to create something cute and there’s nothing cuter than cats! So, adding the saying “cats have seven lives” I implemented it by adding my very own drawing of a cat that appears within seven clicks. After clicking seven times the background restarts.

Cat speedDraw

Highlight of Code: 

Using this class code I have set the randomness of my images to follow a certain pattern within a limited sized canvas.

class Cat {
  constructor(x, y, img) {
    this.x = x;
    this.y = y;
    this.img = img;
    this.angle = random(TWO_PI);
    this.speedX = random(1, 3);
    this.speedY = random(1, 3);
  }

  update() {
    this.x += this.speedX * cos(this.angle);
    this.y += this.speedY * sin(this.angle);

    if (this.x < 0 || this.x > width) {
      this.angle = PI - this.angle;
    }

    if (this.y < 0 || this.y > height) {
      this.angle = -this.angle;
    }
  }

  display() {
    imageMode(CENTER);
    image(this.img, this.x, this.y);
  }
}

In this set of codes I was able to put together the idea of clicking the screen seven times to make the program alternate between a random image of both my drawings. When making the eighth click the program restarts.

function mouseClicked() {
  if (numClicks < maxClicks) {
    let catImage = catImages[numClicks % 2]; // Alternate between cat images
    let cat = new Cat(mouseX, mouseY, catImage);
    cats.push(cat);
    numClicks++;
  } else {
    // Reset after 7 clicks
    cats = [];
    numClicks = 0;
  }
}

Reflection and Ideas for Future Work:

This work took me so long and probably the ones with the most errors. I keep forgetting to add my class codes. I also had a problem with uploading my images without adding any additional local programs as suggested in different websites. After resizing my images and going through my code multiple times I finally got it running.

Edit: https://editor.p5js.org/mariamalkhoori/sketches/6hPD6jbgn