let y;

let bunnies;

let trails = true;

let t = 0;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

   x = random(0, windowWidth);

   y = 

  bunnies = [new Circle(x,y,70), new Circle(x,y,70), new Circle(x,y,70), new Circle(x,y,70), new Circle(x,y,70)];

  background("#eee")

}

​

function makeBunnies(n) {

  for (let i = 0; i<n; i++) bunnies.push(new Circle())

}

function draw() {

  // console.log(frameCount);

  if (frameCount < 2 || !trails) background("#eee")

​

  for (let bunny of bunnies) {

    bunny.drawBunny();

  }

}

​

​

class Circle {

  constructor(){

    this.pos = createVector(random(0, windowWidth),random(0, windowHeight))

    this.vel = createVector(10, 20);

    this.rad = random(70);

    this.textSize = random(10, 60);

    this.symbol = random(["🐇", "🐰"])

    this.opacity = random(30,250);

  };

​

  drawBunny(){

    // if (this.pos.x > windowWidth - 20 || this.pos.y > windowHeight - 20) {

    //    this.pos.x = random(0, windowWidth);

    //   this.pos.y = random(0, windowWidth);

    // } else {

    //     this.pos.x+= this.vel.x;

    //     this.pos.y += this.vel.y;

    // }

//     if (isColliding(other_bunny)) {

//     }

    let collision = this.getBoundingRectCollision(0, windowWidth, windowHeight, 0)

    if (collision === "left" || collision === "right") {

        let n = createVector(-1, 0);

      this.vel.reflect(n)

    }

    if (collision === "top" || collision === "bottom") {

        let n = createVector(0, -1);

      this.vel.reflect(n)    

    }

    this.pos.x+= this.vel.x;

    this.pos.y += this.vel.y;

    //console.log(collision)

    // console.log(this.pos.x, this.vel.x)

    // console.log("y")

    // console.log(this.vel.y)

    // this.opacity = random(255);

    push()

    textSize(this.textSize);

    // let opac = abs(map(cos(frameCount/10), -1, 1, 30, this.opacity));

    // fill(0, map(sin(frameCount/10), -1, 1, 30, this.opacity));

    fill(255, this.opacity);

    text(this.symbol, this.pos.x, this.pos.y)

    pop()

  }

​

  updatePosition(x,y){

    this.pos.x = x

    this.pos.y = y

  }

​

  isColliding(self, other){

    const sqDistBetweenCenters = Math.pow(other.pos.y - this.pos.y, 2) + Math.pow(other.pos.x -       this.pos.x, 2)

    const sqSumRad = Math.pow(this.rad + other.rad, 2);

    return sqSumRad >= sqDistBetweenCenters

  }

  getBoundingRectCollision(rectLeft, rectRight, rectBottom, rectTop){

    if (this.pos.x + this.rad <= rectLeft){

      return "left"

    } else if (this.pos.x - this.rad >= rectRight){

      return "right"

    } else if (this.pos.y - this.rad >= rectBottom){

      return "top"

    } else if (this.pos.y + this.rad <= rectTop){

      return "bottom"

    } else {

      return "none"

    }

  }

}

​

function mouseClicked(){

  makeBunnies(5);

  trails = !trails;

}

​

function keyPressed(e) {

  // this will download the first 5 seconds of the animation!

  if (key === 's' && e.ctrlKey) {

    saveGif('mySketch', 5);

  }

}