let fishY = [];

let fishSpeed = [];

let fishDirection = [];

let cloudX = [];

let cloudY = [];

let cloudSpeed = [];

​

function setup() {

  createCanvas(700, 500);

​

  // random 3 fish

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

    fishX.push(random(50, width - 40));  

    fishY.push(random(350, 480));        

    fishSpeed.push(random(1, 3));        

    fishDirection.push(random([1, -1])); 

  }

​

  // ramdom cloud speed and dire

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

    cloudX.push(random(width + 150)); 

    cloudY.push(random(20, 130)); 

    cloudSpeed.push(random(0.1, 0.5)); 

  }

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

    var y = 50;

   // fill("grey");

    //noStroke();

    //triangle(100,100,100);

​

}

​

function draw() {

  background("lightblue"); 

​

  //water

  fill("#3966a2");

  noStroke();

  rect(0, 300, width, 300); 

​

  // clouds

  drawClouds();

  //Mountains

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

    var y= 300;

  fill("grey");

   noStroke();

  triangle(x+100, y, x + 160, y - 120, x + 210, y);

  fill(90,90,90);

   noStroke();

   triangle(x, y, x + 60, y - 180, x + 110, y);

  }  

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

    // fish body

    fill(255, 204, 0); 

    ellipse(fishX[i], fishY[i], 80, 40);  

​

    // fish till

    fill(255, 165, 0); 

    if (fishDirection[i] === 1) {

      // swim to right

      triangle(fishX[i] - 40, fishY[i], fishX[i] - 70, fishY[i] + 20, fishX[i] - 70, fishY[i] - 20);

    } else {

      // swim to left

      triangle(fishX[i] + 40, fishY[i], fishX[i] + 70, fishY[i] + 20, fishX[i] + 70, fishY[i] - 20);

    }

​

    //update fish dire

    fishX[i] += fishSpeed[i] * fishDirection[i];  

​

    // swim back if the end

    if (fishX[i] > width - 40 || fishX[i] < 40) {

      fishDirection[i] *= -1;  

    }

  }

}

​

function drawClouds() {

  fill(255);

  noStroke(); 

​

  // cloud

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

    let cloudSize = random(80, 80); 

​

    // draw cloud

    ellipse(cloudX[i], cloudY[i], cloudSize, cloudSize * 0.6); // mid

    ellipse(cloudX[i] - cloudSize * 0.3, cloudY[i], cloudSize * 0.8, cloudSize * 0.5); // left

    ellipse(cloudX[i] + cloudSize * 0.3, cloudY[i], cloudSize * 0.8, cloudSize * 0.5); // right

​

    // update cloud dire

    cloudX[i] += cloudSpeed[i];  

​

    // if cloud mis in right, new cloud come form the left

    if (cloudX[i] > width + 50) {

      cloudX[i] = -50;  

    }

​

  }

}

​

​

​

​

​

​