let wave;

//declares variable for the boat

let boat;

//declares variable for y value offset of wave movement

let yoff = 0;

//declares variable for the slider object

let slider;

​

function setup() {

  //sets default angle measurement mode to radians

  angleMode(RADIANS);

  //creates canvas size for running the sketch

  createCanvas(700, 500);

  //creates new ocean wave object with an amplitude, period, and phase

  wave = new Wave(350);

  //creates new boat object with an x and y position on the canvas

  boat = new Boat(0, 320);

  //creates new slider object that adjusts the strength and intensity of waves

  slider = createSlider(0.1, 1.5, 0.1, 0.01);

}

​

function draw() {

  //displays the sketch with a cyan background

  background(50, 200, 255);

  //object class function to display the boat on the canvas

  boat.display();

  //object class function to display the boat's action updates

  boat.update();

  //object class function to display the wave's action updates

  wave.update();

}

​

//creates and uses a class for the boat object

class Boat {

  constructor(x, y) {

    // this.pos = createVector(x,y);

    // this.vel = createVector(1,0);

    // this.acc?

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

    this.x = x;

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

    this.y = y;

    //declares and initializes constructor variable for rotation angle of boat

    this.angle = 0;

  }

​

  update() {

    //gradually increments x position of boat on the canvas

    this.x += 1;

    //this.pos.add(this.vel);

  }

​

  display() {

    //push function to save current boat drawing settings

    push();

    //moves current x and y boat position over from top left of canvas to middle left

    translate(this.x, this.y);

    fill(0, 255, 0);

    ellipse(0,0,20);

    //makes the boat tilt and rotate on the canvas

    rotate(this.angle);

​

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

    noStroke();

    fill('red');

    quad(-150, -50, 150, -50, 100, 50, -100, 50);

​

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

    noStroke();

    fill('white');

    triangle(-110, -50, 10, -50, 10, -200);

​

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

    noStroke();

    fill('white');

    triangle(110, -50, 20, -50, 20, -180);

    //pop function to restore current boat drawing settings

    pop();

  }

}

​

//creates and uses a class for the ocean waves

class Wave {

  constructor(y) {

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

    this.y = y;

  }

​

  update() {

    //begins drawing of wave shape on the canvas

    beginShape();

    //displays ocean waves as a dark blue color without strokes

    noStroke();

    fill(30, 80, 200);

    //declares variable for x value offset of wave movement

    let xoff = 0;

    //for loop to create wave form and movement

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

      //increases intensity and height of wave along with slider adjustment

      let y = this.y - noise(xoff, yoff) * 120 * slider.value();

      vertex(x, y);

      //increases tilt and rotation of boat along with slider adjustment

      boat.angle = map(sin(y), -6, 6, -0.08, 0.08);

      //gradually increments x position offset of wave form and movement

      xoff += 0.01;

    }

    //gradually increments y position offset of wave form and movement

    yoff += 0.01;

    vertex(width, height);

    vertex(0, height);

    //ends drawing of wave shape on the canvas

    endShape(CLOSE);

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

    let boatxOff = boat.x * 0.01;

    //increases intensity and height of boat along with slider adjustment

    boat.y = this.y - noise(boatxOff, yoff) * 120 * slider.value();

  }

}