let waves;

//declares a variable for the boat

let boat;

​

function setup() {

  //creates canvas size for running the sketch

  createCanvas(700, 500);

​

  //for loop to create array of ocean waves with random amplitude, period, and phase

  waves = new Wave(20, 180, TWO_PI);

  //creates a new boat object from the boat variable 

  boat = new Boat();

  boat.leftCorner = createVector(boat.x - 200, boat.y);

  boat.rightCorner = createVector(boat.x, boat.y);

​

}

​

function draw() {

  //displays the sketch with a cyan background

  background(50, 200, 255);

​

  for (let x = 0; x < width; x += 1) {

    let y = 1;

    y += waves.evaluate(x);

    if (x == floor(boat.x)) {

      boat.y = y + height / 1.5 + 40;

      // boat.y = y * height/1000;

      boat.leftCorner.y = waves.evaluate(x - 200);

​

      // boat.leftCorner.y = boat.y;

      boat.rightCorner.y = boat.y;

      boat.angle = boat.leftCorner.angleBetween(boat.rightCorner);

    }

​

    noStroke();

    fill(30, 120, 255);

    ellipse(x, y + height / 2 + 90, 240 / 5);

    ellipse(x, y + height / 2 + 130, 240 / 5);

    ellipse(x, y + height / 2 + 170, 240 / 5);

    ellipse(x, y + height / 2 + 210, 240 / 5);

    ellipse(x, y + height / 2 + 250, 240 / 5);

  }

  waves.update();

​

  boat.display();

  boat.update();

}

​

//creates and uses a class for the boat object

class Boat {

  constructor(x, y) {

    //declares and initializes constructor variable for x position of boat

    this.x = width / 1.5;

​

    //declares and initializes constructor variable for y position of boat

    this.y = height / 1.5;

    // this.leftCorner;

    // this.rightCorner;

    // this.angle;

  }

​

  update() {

    // this.x += 1;

    // this.y += 1;

  }

​

  display() {

    angleMode(radians);

    // console.log(this.angle);

    // rotate(this.angle)

    //displays the body of the boat as a quadrangle with a red color

    noStroke();

    fill('red');

    quad(this.x - 200, this.y - 110, this.x - 10, this.y - 110, this.x - 30, this.y - 50, this.x - 170, this.y - 50);

​

    //displays the main sail of the boat as a triangle with a white color

    noStroke();

    fill('white');

    triangle(this.x - 160, this.y - 110, this.x - 90, this.y - 110, this.x - 90, this.y - 225);

​

    //displays the secondary sail of the boat as a triangle with a white color

    noStroke();

    fill('white');

    triangle(this.x - 80, this.y - 110, this.x - 40, this.y - 110, this.x - 80, this.y - 200)

  }

}

​

//creates and uses a class for the ocean waves

class Wave {

  constructor(amp, period, phase) {

    //declares and initializes constructor variable for amplitude of waves

    this.amplitude = amp;

    //declares and initializes constructor variable for period of waves

    this.period = period;

    //declares and initializes constructor variable for phase of waves

    this.phase = phase;

  }

​

  evaluate(x) {

    return sin(this.phase + (TWO_PI * x) / this.period) * this.amplitude;

  }

​

  update() {

    this.phase += 0.03;

  }

}