var eyey = -5;

var tri1 = -50;

var tri2 = -20;

var tri3 = -50;

var tri4 = 20;

var tri5 = -15;

x = 400;

y = 0;

function setup() {

  createCanvas(900, 400);

  balls = [100];

  fish = new User(200,0,50);

  for (var i = 0; i < 11; i++) {

    balls[i] = new Ball(Math.random() * 100, Math.random() * 300, 40);

    //frameRate(4)

  }

}

​

function draw() {

  //background(Math.random()*255,Math.random()*255,Math.random()*255);

  //background(0,0,0)

  //background(255)

      fish.display();

​

  for (var i = 0; i < balls.length; i++) {

    balls[i].display();

    balls[i].move();

  }

for (var i = 0; i < balls.length; i++) {

   if(dist(x,y,balls[i].x,balls[i].y) < 70) {

     balls.splice(i,i+1);

   }

}

  if (key === "d") {

      x = x + 3;

    }

    if (key === "a") {

      x = x - 3;

    }

    if (key === "w") {

      y = y - 3;

    }

    if (key === "s") {

      y = y + 3;

    }

    if (y < 0) {

      this.changey = -this.changey;

      //this.size=-this.size

    }

    if (y > 400) {

      this.changey = -this.changey;

      //this.size=-this.size

    }

​

    if (x > 900) {

      this.changex = -this.changex;

    }

}

​

class Ball {

  constructor(x, y, size) {

    this.x = x;

    this.y = y;

    this.changex = 3;

    this.changey = 2;

    this.size = size;

  }

  display() {

    //non user

    // if (this.x == x) {

    //   fill(0);

    // }

    fill(Math.random() * 255, Math.random() * 255, Math.random() * 255);

    ellipse(this.x, this.y, this.size + 50, this.size);

    fill(255);

    ellipse(this.x + eyex, this.y + eyey, 10, 10);

    fill(0);

    ellipse(this.x + eyex, this.y + eyey, 5, 5);

    fill(255);

​

    //triangle(this.x-50,this.y-20,this.x-50,this.y+20,this.x-15,this.y);

    triangle(

      this.x + tri1,

      this.y + tri2,

      this.x + tri3,

      this.y + tri4,

      this.x + tri5,

      this.y

    );

    //triangle(mouseX+tri1,mouseY+tri2,mouseX+tri3,mouseY+tri4,mouseX+tri5,mouseY);

  }

  move() {

    this.x = this.x + this.changex;

    this.y = this.y + this.changey;

    //if(this.x<0 && !isFishBackward==false){

    if (this.x < 0) {

      this.changex = -this.changex;

      eyex = -eyex;

      eyey = eyey;

      tri1 = -tri1;

      tri2 = -tri2;

      tri3 = -tri3;

      tri4 = -tri4;

      tri5 = -tri5;

      //this.size=-this.size;

    }

    //if(this.x>900 && !isFishBackward==false){

    if (this.x > 900) {

      eyex = -eyex;

      tri1 = -tri1;

      tri2 = -tri2;

      tri3 = -tri3;

      tri4 = -tri4;

      tri5 = -tri5;

      //isFishBackwards=true

    }

    if (this.y < 0) {

      this.changey = -this.changey;

      //this.size=-this.size

    }

    if (this.y > 400) {

      this.changey = -this.changey;

      //this.size=-this.size

    }

​

    if (this.x > 900) {

      this.changex = -this.changex;

    }

  }

}

​

class User extends Ball {

  display() {

    //user

    //fill(Math.random() * 255, Math.random() * 255, Math.random() * 255);

    //fill(0)

    //ellipse(mouseX,mouseY,this.size+100,this.size+50);

    fill(0)

    ellipse(x, y, this.size + 75, this.size + 50);

    fill(255);

    ellipse(x + eyex, y + eyey, 10, 10);

​

    //ellipse(mouseX+eyex,mouseY+eyey,10,10);

    fill(0);

    //ellipse(mouseX+eyex,mouseY+eyey,5,5)

    ellipse(x + eyex, y + eyey, 5, 5);

    fill(255);

    fill(Math.random() * 255, Math.random() * 255, Math.random() * 255);

   triangle(x + tri1, y + tri2, x + tri3, y + tri4, x + tri5, y);

  }

}