var finGray;

var bodyPurple;

var bodyGray;

var circleX = 10;

var circleY = 10;

var movementY;

var bubbles = [];

var checkBubbles = false;

var offset = 1;

var strum = 1;

var overBowl = false;

var bloop = false;

var fx;

var fy;

​

function setup() {

  createCanvas(400, 400);

  finOrange = color(255, 115, 87);

  finGray = color(156, 144, 142);

  bodyPurple = color(155, 159, 242);

  bodyGray = color(113, 113, 117);

  bgColor = color(255, 247, 219);

}

​

function bubble(x,y) {

  fill(92, 209, 203, 80);

  ellipse(x, y, 15);

} 

​

function draw() {

  background(bgColor);

  noStroke();

  //seaweed

  fill(78, 186, 159);

  beginShape();

  vertex(y + 500, x);

  for(var x = 0; x < width; x++){

    //var angle = map(x, 0, width, 0, TWO_PI);

    var angle = offset + x * 0.03;

    // map x between 0 and width to 0 and Two Pi

    var y = map(sin(angle), -strum, strum, 180, 200);

    vertex(y - 70, x + 100);

  }

  vertex(110, 100);

  endShape();

  offset += 0.01;

  //cover top of seaweed

  //fill(bgColor);

  //rect(0, 0, 400, 130);

   //cover bottom of seaweed

  fill(bgColor);

  rect(0, 300, 400, 130);

  //fishbowl

  let fishbowl = map(mouseX, 0, width, 0, 100);

  fill(fishbowl, 180, 190, 90);

  ellipse(width / 2, height / 2, 300, 300);

​

  //bubbles

    bubble(140, movementY + 20);

    bubble(145, movementY + 10);

    bubble(150, movementY + 40);

 /* 

   if (

    mouseX > fx - width/2 &&

    mouseX < fx + width/2 &&

    mouseY > fy - width/2 &&

    mouseY < fy + width/2

  ) {

    overBowl = true;

    if (!bloop) {

    */

    if (movementY > 1) {

      movementY = movementY - 0.4

    }

    else {

      movementY = 150;

    }

    //fish fin colors

    let finColor = map(mouseX, 0, width, 0, 1);

    var fishFins = lerpColor(finOrange, finGray, finColor);

    fill(fishFins);

    //255, 115, 87

​

    //fish tail

    noStroke();

    arc(230, 220, 100, 100, TWO_PI - QUARTER_PI, TWO_PI + QUARTER_PI);

​

    //bottom fin

    noStroke();

    push();

    translate(180, 245);

    shearX(PI / 4.0);

    rect(0, 0, 50, 20, 20);

    pop();

​

    //top fin

    noStroke();

    push();

    translate(190, 170);

    shearX(-35);

    rect(0, 0, 50, 40, 20);

    pop();

​

    //front fin

    noStroke();

    push();

    translate(165, 245);

    shearX(PI / 4.0);

    rect(0, 0, 5, 20, 20);

    pop();

​

​

    //fish body

    //fill(155, 159, 242);

    noStroke();

    let bodyColor = map(mouseX, 0, width, 0, 1);

    var fishBody = lerpColor(bodyPurple, bodyGray, bodyColor);

    fill(fishBody);

    push();

    shearX(35);

    rect(40, 200, 100, 50, 5, 70, 10, 70);

    pop();

​

    // fish eye

    fill(255);

    ellipse(160, 215, 15, 15);

​

    // fish pupil

    push();

    fill(0);

    if (mouseX > width / 2) {

      ellipse(160, 215, 13, 13);

    } else {

      ellipse(160, 215, 10, 10);

    }

    pop();

    noStroke();

    fill(245, 147, 132);

    //arc(200, 300, 190, 90, 300, PI + QUARTER_PI, OPEN);

    arc(200, 300, 190, 100, TWO_PI, PI);

    //fishbowl-shaping rectangle

    fill(bgColor);

    rect(0, 0, 400, 100);

    //rect(50, 340, 300, 50);

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

    bubbles[i].move();

    bubbles[i].show();

    bubbles[i].update();

    }

  }

​

  /*

​

function mousePressed() {

  let d = dist(width / 2, height / 2, mouseX, mouseY);

  if (d < 120) {

    this.checkBubbles = true;

    bubbles.push(new Bubble(mouseX, mouseY, 10));

  }

}

​

class Bubble {

​

  constructor(x, y, r) {

    this.x = x;

    this.y = y;

    this.r = r;

    //this.speed = 0;

    this.lifespan = 255;

    this.bye = false;

  }

​

  move() {

    this.x = this.x + random(-1, 1);

    this.y = this.y + random(-1, 1);

  }

​

  show() {

    stroke(255);

    strokeWeight(1);

    fill(255, 50);

    ellipse(this.x, this.y, this.r * 2);

  }

​

  update() {

    let i = 0;

    //this.x = this.x + random(-1, 1);

    //this.y = this.y + random(-1, 1);

    this.lifespan--;

    if (this.lifespan < 0) {

      bubbles.splice(i, 1);

    }

  }

}

} */

​