const serial = new p5.WebSerial();

​

let sliderX;

let sliderY;

let sliderS;

​

// HTML button object:

let portButton;

let inData; // for incoming serial data

let outData; // for outgoing data

​

//Original sketch

let bbs = [];

let canvasSize = 600;

let speedX = 0;

let speedY = 0;

let size = 2;

​

function setup() {

  let cnv = createCanvas(600, 600);

  let newCanvasX = (windowWidth - 600) / 2;

  let newCanvasY = (windowHeight - 600) / 2;

  cnv.position(newCanvasX, newCanvasY);

​

  //x and y slider sliders

  sliderX = createSlider(0, 5, 0, 0.05);

  sliderY = createSlider(0, 5, 0, 0.05);

  sliderS = createSlider(0.5, 2, 2, 0.01);

​

  //slider styles class

  sliderX.addClass("mySliders");

  sliderY.addClass("mySliders");

  sliderS.addClass("mySliders");

​

  //slider styles

  //맨밑 맞음

  sliderX.position(

    (windowWidth - width) / 2 - 2,

    (windowHeight - height) / 2 + 603 

  );

​

  //맨왼쪽 

  sliderY.position(

    (windowWidth - width) / 2 -320,

    (windowHeight - height) / 2 + 286

  );

  sliderY.style("transform", "rotate(-90deg)");

​

  //맨오른쪽 

  sliderS.position(

    (windowWidth - width) / 2 + 316,

    (windowHeight - height) / 2 + 286

  );

  sliderS.style("transform", "rotate(-90deg)");

​

  //added

  // check to see if serial is available:

​

  if (!navigator.serial) {

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

  }

​

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

​

  bbsSetup();

}

​

function bbsSetup() {

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

    let d = random(5, 20);

    let x = random(

      (d * sliderS.value()) / 2,

      canvasSize - (d * sliderS.value()) / 2

    );

    let y = random(

      (d * sliderS.value()) / 2,

      canvasSize - (d * sliderS.value()) / 2

    );

    // let x = random(d / 2, canvasSize / 2);

    // let y = random(canvasSize / 2, canvasSize - d / 2);

    let b = new bb(x, y, d);

    bbs.push(b);

  }

}

​

function draw() {

  background(248, 240, 227);

​

  for (let b of bbs) {

    b.move();

    b.bounce();

    b.show();

    let collide = false;

    for (let others of bbs) {

      if (b !== others && b.intersects(others)) {

        collide = true;

      }

    }

    if (collide) {

      b.changeColor(0);

    } else {

      b.changeColor(255);

    }

  }

}

​

class bb {

  constructor(x, y, d) {

    this.x = x;

    this.y = y;

    this.d = d;

​

    this.xSpeed = random(0, 2);

    this.ySpeed = random(-2, 0);

    this.brightness = 255;

  }

​

  intersects(others) {

    let d = dist(this.x, this.y, others.x, others.y);

    return (

      d <= this.d * sliderS.value() / 2 + others.d * sliderS.value() / 2

    );

  }

​

  changeColor(brightness) {

    this.brightness = brightness;

  }

​

  move() {

    // one value from arudino, one for the p5js

    this.x = this.x + this.xSpeed * speedX;

    this.y = this.y + this.ySpeed * speedY;

    // console.log(speedX,speedY);

  }

​

  bounce() {

    if (

      this.x >= width - this.d * sliderS.value() / 2 ||

      this.x <= this.d * sliderS.value() / 2

    ) {

      this.xSpeed = this.xSpeed * -1;

    }

    if (

      this.y >= height - this.d * sliderS.value() / 2 ||

      this.y <= this.d * sliderS.value() / 2

    ) {

      this.ySpeed = this.ySpeed * -1;

    }

  }

​

  show() {

    noStroke();

    fill(this.brightness);

    circle(this.x, this.y, this.d * sliderS.value());

  }

}

​

//added

// 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");

  }

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

  if (portButton) portButton.hide();

}

​

// read any incoming data as a byte:

function serialEvent() {

  // read a string from the serial port

  // until you get carriage return and newline:

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

  // console.log(inString);

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

  if (inString) {

    // console.log("inserialEvent",speedX,speedY);

    // split the string on the commas:

​

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

    // console.log(sensors);

​

    if (sensors.length >= 3) {

      if (sensors[0] == 1) {

        //A0 and A1 for analog value

        speedX = map(sensors[1], 0, 1023, 5, 0);

        speedY = map(sensors[2], 0, 1023, 5, 0);

        size = map(sensors[3], 0, 1023, 2, 0.5);

        sliderX.value(speedX);

        sliderY.value(speedY);

        sliderS.value(size);

        console.log("inserialEvent", speedX, speedY, size);

      }

    }

  }

}

// 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");

}

​