xxxxxxxxxx
248
// variable to hold an instance of the p5.webserial library:
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");
}