let noiseSpeed = 0.03;

let noiseHeight = 30;

let rings = [];

const serial = new p5.WebSerial();

let knob = 0;

let button = 0;

let sound1, sound2;

​

// HTML button object:

let portButton;

let inData; // for incoming serial data

let outData; // for outgoing data

​

function preload(){

  sound1 = loadSound("Chopin.mp3");

  sound2 = loadSound("rain.mp3");

}

​

function setup() {

  createCanvas(windowWidth,windowHeight); // make the canvas

  // check to see if serial is available:

  if (!navigator.serial) {

    alert("WebSerial is not supported in this browser. Try Chrome or MS Edge.");

  }

  // if serial is available, add connect/disconnect listeners:

  navigator.serial.addEventListener("connect", portConnect);

  navigator.serial.addEventListener("disconnect", portDisconnect);

  // check for any ports that are available:

  serial.getPorts();

  // if there's no port chosen, choose one:

  serial.on("noport", makePortButton);

  // open whatever port is available:

  serial.on("portavailable", openPort);

  // handle serial errors:

  serial.on("requesterror", portError);

  // handle any incoming serial data:

  serial.on("data", serialEvent);

  serial.on("close", makePortButton);

noiseY = height * 3 / 4;

//sound1.play();

}

​

function draw() {

​

  //background from dark to light as knob moves

  background(0+knob*2.5, 15);

//create the stars

  noStroke();

  fill(255);   

  for (let i = 0; i < 6; i++) {

    let xrandom = random(width);

    let yrandom = random(height / 2);

    ellipse(xrandom, yrandom, 3, 3);

  }

​

//create the waves 

  for (let j = 0; j < 3; j++) {

    let offsetY = j * 100;

    noFill();

    stroke(0, 0, 255-knob, 10);

    strokeWeight(height / 2);

    beginShape();

    curveVertex(0, height / 2);

    for (let i = 0; i < width; i += 50) {

      let y = noise(frameCount * noiseSpeed + i + j) * noiseHeight + noiseY + offsetY;

      curveVertex(i, y);

    }

    curveVertex(width, height / 2);

    endShape();

  }

  //if (knob <= 3){

    //sound1.setVolume(0);

  //}else{

    //sound1.setVolume(1);

  //}

//create the raindrops

  for (let a = 0; a < rings.length; a++) {

    rings[a].display();

    rings[a].changeY();

    //rings[a].grow();

    rings[a].fade();

    //if (rings[a].alpha < 0) {

      //rings.splice(a, 1);

    //}  

  }

  //console.log("amount of rings in array:" , rings.length) 

}

​

// press to create a new Ring object

function startRain() {

  //let ring = new Ring(mouseX, mouseY)

  let ring = new Ring(random(0, width), random(0, height/2));

  rings.push(ring);

}

​

class Ring {

  constructor(x, y) {

    this.x = x;

    this.y = y;

    this.alpha = 255;

    //this.diameter = 0;

  }

  changeY(){

  this.y = this.y+5;

}

  display() {

    noFill();

    strokeWeight(2);

    stroke(255, this.alpha);

    //circle(this.x, this.y, this.diameter);

    point(this.x, this.y);

  }

​

  grow() {

    this.diameter += 0.1;

  }

  fade() {

    this.alpha -= 1.5;

  }

}

​

// if there's no port selected,

// make a port select button appear:

function makePortButton() {

  // create and position a port chooser button:

  portButton = createButton("choose port");

  portButton.position(10, 10);

  // give the port button a mousepressed handler:

  portButton.mousePressed(choosePort);

}

​

// make the port selector window appear:

function choosePort() {

  serial.requestPort();

}

​

// open the selected port, and make the port

// button invisible:

function openPort() {

  // wait for the serial.open promise to return,

  // then call the initiateSerial function

  serial.open().then(initiateSerial);

​

  // once the port opens, let the user know:

  function initiateSerial() {

    console.log("port open");

    serial.write("x");  

  }

  // hide the port button once a port is chosen:

  if (portButton) portButton.hide();

}

​

function serialEvent() {

  // read a string from the serial port

  // until you get carriage return and newline:

  let inString = serial.readStringUntil("\r\n");

  //check to see that there's actually a string there:

  if (inString){     

    let sensors = split(inString , "," );

​

//locV = map(int(sensors[1]), 0, 1023,0, height);

    //serial.write("x");

    //console.log(inString)

    const array = inString.split(",");

    knob = parseInt(array[0]);

    button = parseInt(array[1]);

    if (knob > 3){

      if (!sound1.isPlaying()){

        sound1.play();

      }

    }

    if (button == 1){

      startRain();

      if (!sound2.isPlaying()){

        sound2.play();

        sound2.setVolume(0.5);

      }

    } 

  }

}

​

// pop up an alert if there's a port error:

function portError(err) {

  alert("Serial port error: " + err);

}

​

// try to connect if a new serial port

// gets added (i.e. plugged in via USB):

function portConnect() {

  console.log("port connected");

  serial.getPorts();

}

​

// if a port is disconnected:

function portDisconnect() {

  serial.close();

  console.log("port disconnected");

}