let x = 0;

let c1, c2;

var bubbles = [];

​

let a = 10; // amplitude of Wave

let b = 15; // frequency of Wave

​

function preload() {

  myData = loadJSON("data.json");

}

​

function setup() {

  createCanvas(700, 400);

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

    bubbles[i] = new Bubble();

  }

  c1 = color(255);

  c2 = color(63, 191, 191);

​

  for (let y = 0; y < height; y++) {

    n = map(y, 0, height, 0, 1);

    let newc = lerpColor(c1, c2, n);

    stroke(newc);

    line(0, y, width, y);

  }

}

​

function draw() {

  //background (50,180,250,100);

  for (var i = 0; i < bubbles.length; i++) {

    bubbles[i].move();

    bubbles[i].display();

​

    //fill(0)

    //text('Sailboat Traffic.', 20, height - 10);

  }

​

  // sailboat

  //stroke('green')

​

  fill("red");

  beginShape();

  vertex(145 + x, 190 + a * sin(x / b));

  vertex(155 + x, 210 + a * sin(x / b));

  vertex(260 + x, 210 + a * sin(x / b));

  vertex(270 + x, 190 + a * sin(x / b));

  vertex(145 + x, 190 + a * sin(x / b));

  endShape();

  //sail1

  fill("blue");

  //stroke('yellow')

  beginShape();

  vertex(206 + x, 190 + a * sin(x / b));

  vertex(206 + x, 115 + a * sin(x / b));

  vertex(167 + x, 185 + a * sin(x / b));

  vertex(206 + x, 185 + a * sin(x / b));

  endShape();

  fill("teal");

  stroke("teal");

  //sail2

  beginShape();

  vertex(210 + x, 123 + a * sin(x / b));

  vertex(210 + x, 185 + a * sin(x / b));

  vertex(240 + x, 185 + a * sin(x / b));

  vertex(210 + x, 123 + a * sin(x / b));

  endShape();

  if (x > width) {

    x = 0;

  } else {

    x = x + 1;

  }

​

  // motor boat

  //beginShape()

  //vertex

​

  // data

​

  for (let i = 0; i < myData.Sunday.sailboat.length; i++) {

    ellipse(myData.Sunday.sailboat[i] * 15, 100, 10, 10);

  }

​

  for (let i = 0; i < myData.Wednesday.sailboat.length; i++) {

    ellipse(myData.Wednesday.sailboat[i] * 60, 200, 10, 10);

  }

​

  for (let i = 0; i < myData.Saturday.sailboat.length; i++) {

    ellipse(myData.Saturday.sailboat[i] * 20, 100, 10, 10);

  }

}

​

// cloud function

​

function Bubble() {

  this.x = random(0, width);

  this.y = random(0, height);

​

  this.display = function () {

    stroke(255);

    strokeWeight(1);

    fill(255);

    ellipse(this.x, this.y, 24, 24);

    ellipse(this.x + 10, this.y + 10, 24, 24);

    ellipse(this.x + 30, this.y + 10, 24, 24);

    ellipse(this.x + 30, this.y - 10, 24, 24);

    ellipse(this.x + 20, this.y - 10, 24, 24);

    ellipse(this.x + 40, this.y, 24, 24);

  };

​

  this.move = function () {

    this.x = this.x += 1;

    this.y = this.y + random(-1, 1);

​

    if (this.x >= width) {

      this.x = 0;

    }

  };

}

​