//   x0 = 0,

//   y0 = 0;

// let angle1 = 0,

//   x1 = 0,

//   y1 = 0;

// let angle2 = 0,

//   x2 = 0,

//   y2 = 0;

// let angle3 = 0,

//   x3 = 0,

//   y3 = 0;

let total=10

​

let myfish=[];

​

let pichead

let pic1

let pic2

let pic3

let pictail

​

function preload() {

pichead=loadImage("Untitled_Artwork 2.png")

pic1=loadImage("Untitled_Artwork 7.png")

pic2=loadImage("Untitled_Artwork 8.png")

pic3=loadImage("Untitled_Artwork 5.png")

pictail=loadImage("Untitled_Artwork 6.png")

}

​

function setup() {

  imageMode(CENTER)

  createCanvas(800, 700);

  colorMode(HSB)

  noCursor()

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

    myfish[i]= new fish(random(2,4), random(-1,1), random(10,30), random(0.07,0.1))}

}

​

function draw() {

  background(0);

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

  myfish[i].display();

  myfish[i].move();

  }

}

​

class fish {

  constructor(mx,my,d,hs) {

  this.angle0 = 0;

  this.x0 = 0;

  this.y0 = 0;

  this.angle1 = 0;

  this.x1 = 0;

  this.y1 = 0;

  this.angle2 = 0;

  this.x2 = 0;

  this.y2 = 0;

  this.angle3 = 0;

  this.x3 = 0;

  this.y3 = 0;

    this.x = 0-random(100,150);

    this.y = random(100,height-100);

    this.diameter = d

    // this.rangey = ry

    this.hue= 250

    this.speedx=mx

    this.speedy=my

    this.starthue=300

    this.endhue=150

    this.huespeed=hs

    this.wavespeed=random(1,15)/10

  }

​

  display() {

    noStroke();

    //bodylink4

​

    let r3 = this.diameter * 0.6;

​

    let dx3 = this.x2 - this.x3;

    let dy3 = this.y2 - this.y3;

​

    this.angle3 = atan2(dy3, dx3);

​

    this.x3 = this.x2 - (cos(this.angle3) * r3) / 2;

    this.y3 = this.y2 - (sin(this.angle3) * r3) / 2;

    this.hue-= this.huespeed

    fill(this.hue-30,80,80);

    if(this.hue<=this.endhue){

      this.hue=this.starthue}

​

    circle(this.x3, this.y3, r3);

    image(pictail,this.x3,this.y3,this.diameter*3.5,this.diameter*3.5)

    //picture

    //bodylink3

​

    let r2 = this.diameter * 0.7;

​

    let dx2 = this.x1 - this.x2;

    let dy2 = this.y1 - this.y2;

​

    this.angle2 = atan2(dy2, dx2);

​

    this.x2 = this.x1 - (cos(this.angle2) * r2) / 2;

    this.y2 = this.y1 - (sin(this.angle2) * r2) / 2;

    this.hue-= this.huespeed

    fill(this.hue-20,80,80);

    if(this.hue<=this.endhue){

      this.hue=this.starthue}

​

    circle(this.x2, this.y2, r2);

    image(pic3, this.x2, this.y2, this.diameter*3.5, this.diameter*3.5)

    //picture

    //bodylink2

​

    let r1 = this.diameter * 0.8;

​

    let dx1 = this.x0 - this.x1;

    let dy1 = this.y0 - this.y1;

​

    this.angle1 = atan2(dy1, dx1);

​

    this.x1 = this.x0 - (cos(this.angle1) * r1) / 2;

    this.y1 = this.y0 - (sin(this.angle1) * r1) / 2;

    this.hue-= this.huespeed

    fill(this.hue-10,80,80);

    if(this.hue<=this.endhue){

      this.hue=this.starthue}

​

    circle(this.x1, this.y1, r1);

    image(pic2, this.x1, this.y1, this.diameter*3, this.diameter*3)

    //picture

    //body link1

    let r0 = this.diameter * 0.9;

​

    let dx0 = this.x - this.x0;

    let dy0 = this.y - this.y0;

​

    this.angle0 = atan2(dy0, dx0);

​

    this.x0 = this.x - (cos(this.angle0) * r0) / 2;

    this.y0 = this.y - (sin(this.angle0) * r0) / 2;

    this.hue-= this.huespeed

    fill(this.hue,80,80);

    if(this.hue<=0){

      this.hue=360}

​

    circle(this.x0, this.y0, r0);

    image(pic1,this.x0,this.y0, r0*4, r0*4)

    //picture

    //head

    fill(this.hue,80,80);

    this.hue-= this.huespeed

    if(this.hue<=this.endhue){

      this.huedirection--}

​

    circle(this.x, this.y, this.diameter);

    image(pichead, this.x, this.y, this.diameter*3.5,this.diameter*3.5)

​

    //fish face

    //picture

    fill(255);

    circle(this.x, this.y, this.diameter / 2);

    fill(0);

    circle(this.x, this.y, this.diameter * 0.3);

  }

 move() {

  this.x+= this.speedx

  this.y+= (sin(frameCount*0.1)*this.wavespeed) // smoother

  if (this.x > width+100) {

    this.x = 0-100;

    this.y = random(100,height-100)

  }

  }

// rotatefish(){

// rotate(random(-PI/360,PI/360))

// }

//movement(random migration)

//spawn at different times

}