​

let cat1;

let cat2;

let cat3;

let cat4;

​

//* Next, I will create some stars.

​

let attractors = [];

let particles = [];

​

//* I will preload all of the cats to get them into the sketch.

​

function preload() {

  cat1 = loadImage('cat1.png');

  cat2 = loadImage('cat2.png');

  cat3 = loadImage('cat3.png');

  cat4 = loadImage('cat4.png');

}

​

//Next, I will create a cat array to make the cats appear on the sketch.

​

let catVar = [];

let catVar2 = [];

​

function setup() {

  // put setup code here

  createCanvas(1000, 1000);

  for (let i = 0; i < 10; i++) {

    catVar.push(new catObject((i + 5) * 10, (i + 5) * 10, 200));

​

  }

  for (let i = 0; i < 10; i++) {

    catVar2.push(new catObject2((i + 5) * 10, (i + 5) * 10, 200));

​

  }

​

}

​

//For the interactive element, I'm going to do a mouse pressed to make more stars appear. With the code I pulled in from The Coding Train, it actually makes an attractor and gets the stars bouncing around like they're going toward a black hole.

// Daniel Shiffman

// Attraction / Repulsion

// Video: https://youtu.be/OAcXnzRNiCY

// Code: https://editor.p5js.org/codingtrain/sketches/6WL2O4vq0

​

function mousePressed() {

  attractors.push(createVector(mouseX, mouseY));

}

​

//Entering the draw loop, the stars will be built as particles.

​

function draw() {

  // put drawing code here

  background(0);

  stroke(255);

​

  //Deviating from the original code, I'm making the particles a little bit larger to match the starts in the background of the images of the cats.

​

  strokeWeight(7);

  particles.push(new Particle(random(width), random(height)));

​

  //I am admittedly unsure of what splice is doing. But many thanks to The Code Train for making some cool particle stars!

​

  if (particles.length > 100) {

    particles.splice(0, 1);

  }

​

  //The stars will be able to move based on mouse pressed.

​

  for (let i = 0; i < attractors.length; i++) {

    stroke(0, 255, 0);

    point(attractors[i].x, attractors[i].y);

  }

​

  for (let i = 0; i < particles.length; i++) {

    var particle = particles[i];

    for (let j = 0; j < attractors.length; j++) {

      particle.attracted(attractors[j]);

    }

    particle.update();

    particle.show();

  }

​

  //Above concludes the Frankenstein code. Now, it's time to get the cats moving.

​

  for (let i = 0; i < catVar.length; i++) {

    catVar[i].update();

    catVar[i].render();

​

    let intersect = false;

    for (let j = 0; j < catVar.length; j++) {

​

      if (i != j && catVar[i].intersects(catVar[j])) {

        intersect = true;

      }

    }

    ///// *************** I moved this conditional into the 

    // appropriate for() loop

    if (intersect) {

      catVar[i].doSomething();

    }

  }

​

  for (let i = 0; i < catVar2.length; i++) {

    catVar2[i].update();

    catVar2[i].render();

​

    let intersect2 = false;

    for (let j = 0; j < catVar2.length; j++) {

​

      if (i != j && catVar2[i].intersects(catVar2[j])) {

        intersect2 = true;

      }

    }

    //When the cats intersect, they should turn into another cat. This isn't running quite perfectly since it visually looks like they're changing when they get near the edge.

​

​

    if (intersect2) {

      catVar2[i].doSomething();

    }

​

​

  }

}

​

//This class is the cat.

​

class catObject {

  constructor(_x, _y, _rad = 30) {

​

    //Next, I will define the cats' locations.

    this.x = _x;

    this.y = _y;

​

    //Next, I will determine the cats' sizes on the screen.

    this.rad = _rad;

​

    //Last, I will get the cats floating through space in random directions.

    this.xdir = random(-2, 2);

    this.ydir = random(-2, 2);

​

    //This was the first way I tried to make it switch between different cats, but this array didn't work.

​

    // this.randomCat = [cat1,cat2,cat3,cat4];

​

    this.randomX = random(10, width - 10);

    this.randomY = random(10, height - 10);

  }

​

  //This is the follow up code to get the cats floating through space.

​

  update() {

    this.x += this.xdir;

    this.y += this.ydir;

​

    if (this.x >= 800 || this.x <= 0) this.xdir = -this.xdir;

    if (this.y >= 800 || this.y <= 0) this.ydir = -this.ydir;

  }

​

  //Next, we'll check if they intersect, but it seems like they're not intersecting quite perfectly.

​

  intersects(othercat) {

    if (dist(this.x, this.y, othercat.x, othercat.y) <= this.rad + othercat.rad) {

      return true;

    } else {

      return false;

    }

  }

​

  //The cat will be drawn.

​

  render() {

    image(cat1, this.x, this.y, this.rad, this.rad);

  }

​

  //When they intersect, the cat is supposed to swap.

​

  doSomething() {

    //*   console.log("test");

    image(cat2, this.x, this.y, this.rad, this.rad);

​

  }

}

​

//Let's get more styles of cats in here!

class catObject2 {

  constructor(_x, _y, _rad = 30) {

​

    //Next, I will define the cats' locations.

    this.x = _x;

    this.y = _y;

​

    //Next, I will determine the cats' sizes on the screen.

    this.rad = _rad;

​

    //Last, I will get the cats floating through space in random directions.

    this.xdir = random(-2, 2);

    this.ydir = random(-2, 2);

​

    this.randomX = random(10, width - 10);

    this.randomY = random(10, height - 10);

  }

​

  //This is the follow up code to get the cats floating through space.

​

  update() {

    this.x += this.xdir;

    this.y += this.ydir;

​

    if (this.x >= 800 || this.x <= 0) this.xdir = -this.xdir;

    if (this.y >= 800 || this.y <= 0) this.ydir = -this.ydir;

  }

​

  //Next, we'll check if they intersect, but it seems like they're not intersecting quite perfectly.

​

  intersects(othercat) {

    if (dist(this.x, this.y, othercat.x, othercat.y) <= this.rad + othercat.rad) {

      return true;

    } else {

      return false;

    }

  }

​

  //The cat will be drawn.

​

  render() {

    image(cat3, this.x, this.y, this.rad, this.rad);

  }

​

  //When they intersect, the cat is supposed to swap.

​

  doSomething() {

    //*   console.log("test");

    image(cat4, this.x, this.y, this.rad, this.rad);

​

  }

}