Animation Assignment 

  March 25,2024

*/

​

let cloudx = 100;

let cloudy = 100;

​

​

//global variable

var w = 100;

var a = 380;

var v = 300;

var e = 380;

var speed = 2;

var s = 100;

var h = 220;

var i = 160;

var p = 140;

​

function setup() {

  createCanvas(600, 400);

}

​

function draw() {

  background(135, 206, 250);

  ///clouds and Mountain//

  noStroke();

  fill("white");

  makeClouds(cloudx,cloudy-50);

  makeClouds(cloudx + 100, cloudy + 100);

  triangle(100,400,500,400,300,60)

  fill("LightGray")

  triangle(100,400,500,400,300,60);

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

  fill("white");

  rect(380, 220, 40, 10, 40, 12);

  rect(260, 100, 80, 10, 40, 12);

  //ship//

  fill("Black");

  rect(i,p,10,90);

  fill("SaddleBrown");

  rect(s,h,140,30,40,20);

  fill("Red");

  square(i,p,30,2);

  // Waves//

  fill("PaleTurquoise");

  circle(w,a,300);

  circle(v,e,300);

  circle(w,a,270);

  circle(v,e,270);

  circle(w,a,230);

  circle(v,e,230);

  circle(w,a,190);

  circle(v,e,190); 

  // w++;// Increment by 1 

 // v++;// Increment by 1

  //w += 2;//

 // v -= 2;//

  s = s + speed;

  h = h + speed;

  i = i + speed;

  p = p + speed;

  w = w + speed;

  v = v + speed;

 //if (w + 190 > width){

   // w = 200;//

   //  speed = -2;//

   //speed = speed * -1//

 // }

​

 // if ( w - 190 < 0) {

 // speed = 2;//

  //speed = speed * 1;//

//}

  if ( w + 190 > width || w - 190 < 0){

    speed *= 1;

  }

  // if (v + 150 > width){

   // v = 100;// reset v

    // speed = -2;//

   // speed = speed * 1;

 // }

  //if (v - 150 < 0){

   // speed = 2;//

   // speed = speed * -1;

 // }

  if ( v + 150 > width || v - 190 < 0){

    speed *= -1;

  }

   if (s + 50 > width || s - 50 < 0){

    speed *= 1;

  }

  if (h + 110 > width || h - 110 < 0){

    speed *= -1;

  }

  if ( i + 80 > width || i - 80 < 0){

    speed *= 1;

  }

  if ( p + 70 > width || p - 80 < 0){

    speed *= -1;

  }

}

​

function makeClouds(cloudx,cloudy){

  ellipse(cloudx,cloudy,70,50);

  ellipse(cloudx + 10,cloudy + 10, 70, 50);

  ellipse(cloudx - 10,cloudy + 10, 70, 50);

}