let wave;

//declares a variable for the boat

let boat;

​

let slider;

​

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

  wave = 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);

  slider = createSlider(0, 2, 0, 0.01);

}

​

// function mousePressed() {

//   wave.amplitude += 1;

// }

​

function draw() {

  //displays the sketch with a cyan background

  background(50, 200, 255);

  beginShape();

  stroke(0);

  fill(0,0,100);

  //noFill();

  // Wave form

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

    let y = wave.evaluate(x);

    vertex(x,y+height/2);

  }

  vertex(width,height);

  vertex(0, height);

  endShape(CLOSE);

  wave.update();

  // Boat 

  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;

    this.angle = -PI/4;

  }

​

  update() {

    // this.x += 1;

    // this.y += 1;

    // TODO: add in angleV, angleA

    // maybe this changes with a force?

    // maybe it changes based on waves / mouse clicks?

    //this.angle += 0.1;

    this.angle = slider.value() * PI/4;

  }

​

  display() {

    angleMode(RADIANS);

    push();

    translate(this.x,this.y);

    // console.log(this.angle);

    rotate(this.angle);

    fill(255, 255, 255);

    ellipse(0,0,16,16);

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

    noStroke();

    fill('red');

    quad(- 200,  - 110, - 10, - 110,  - 30,  - 50,  - 170,  - 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)

    pop();

  }

}

​

//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) {

    let amp = slider.value() * this.amplitude;

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

  }

​

  update() {

    this.phase += 0.03;

  }

}