let img2;

let img3;

​

function preload(){

  img1 = loadImage("assets/hook.png");

  img2 = loadImage("assets/coral.png");

  img3 = loadImage("assets/water.gif");

}

​

​

function setup() {

  createCanvas(1280, 720);

   background(199, 229, 237);

 bg = loadImage("assets/water.gif")

}

function draw() {

  noStroke();

  background(bg)

  //*tail

   fill(249, 204, 225)

  triangle(200, 200, 200, 400, 400, 300,);

  fill(250, 190, 195)

  triangle(640,500, 640, 600, 740, 550);

  //*top fin

   fill(250, 190, 195)

  triangle (400, 60, 400, 250, 550, 300);

  fill(249, 204, 225)

  triangle (800, 400, 870, 550, 800, 600);

  //*bottom fin

  fill(250, 190, 195)

  triangle (400, 420, 400, 550, 550, 300);

  fill(249, 204, 225)

  triangle(800, 700, 870, 550, 800, 500);

  //* body

  fill(250, 250, 169)

  triangle(300, 100, 300, 500, 600, 300);

  fill(250, 244, 190)

  triangle(700, 400, 700, 700, 900, 550);

    //*body shapes

  fill(249, 204, 225);

  triangle(350, 250, 350, 350, 400, 300);

  fill(250, 190, 195);

  triangle(730, 530, 730, 580, 760, 560);

  fill(255);

  ellipse(500, 300, 50, 50);

  fill(190,203,250);

  ellipse(500, 300, 25, 25);

  fill(255);

  ellipse(830, 550, 50, 50);

  fill(190,203,250);

  ellipse(830, 550, 25, 25);

//*bubbles

  fill(255)

  if(mouseIsPressed == true)

    {

      fill(190, 225, 250, 0);

    }

  ellipse(600, 50, 30, 30)

  ellipse(650, 120, 30, 30)

  ellipse(590, 200, 30, 30)

    if(mouseIsPressed == true)

    {

      fill(190, 225, 250, 0);

    }

  ellipse(900, 300, 30, 30)

  ellipse(950, 350, 30, 30)

  ellipse(890, 430, 30, 30)

  image(img1, 975, mouseY*-2);

  image(img2, 0, mouseY*2);

}

​

​