let state = 1; 

​

// variable to hold an instance of the p5.webserial library:

const serial = new p5.WebSerial();

​

​

//////////////////GLOBAL VARIABLES//////////////////

let title = "DISTANCE MAKES THE\n HEART GLOW FONDER";

​

////////////////VARIABLES FOR GLOWING EFFECT////////

let offset = 0; 

let textColor; 

let heartColor; 

​

////////////////////BUTTONS////////////////

let titleBtn; 

let undoBtn; 

let nextBtn; 

let flickerBtn; 

let waveBtn; 

let pulseBtn;

let sendAnotherBtn; 

​

​

///////////////////COLOR PICKER////////

let picker; 

let colors; 

​

////////////////BOOLEANS TO CONTROL INPUT DATA///////////

let colorChosen = false; 

let lightChosen = false; 

let readyToSend = false; 

let lightMode;      //outgoing data 

let colorValue;     ///outgoing data 

let outData; 

let portButton;

​

​

///////a/////////IMAGES//////////////////////

let lightning;

let wave;

let pulse; 

let bulb; 

let hand;

​

let lastX =0; 

let lastY= 0; 

let displayed = false; 

​

​

//////////Aaaaaaaaa///

let pixelInfo;

​

​

​

function preload() {

  colorWheel = loadImage('assets/color-wheel.png');

  lightning = loadImage('assets/lightning.png');

  wave = loadImage('assets/wave.png');

  pulse = loadImage('assets/beat.png');

  bulb = loadImage('assets/lightbulb.png'); 

  hand = loadImage('assets/hand.png'); 

  wheel = loadImage('assets/wheel.png'); 

}

​

function setup() {

  createCanvas(800, 600);

  textAlign(CENTER); 

  rectMode(CENTER); 

  imageMode(CENTER); 

  textFont('Barlow'); 

  textColor = color(248, 0, 122); 

  heartColor = color(197, 46, 247); 

  colors = [color(251, 127, 254), color(40, 255, 255), color(192, 255, 6), color(197, 0, 225), color(21, 142, 253), color(9, 35, 252), color(114, 30, 252), color(249, 43, 251), color(253, 38, 150), color(252, 31, 28), color(253, 119, 6), color(254, 225, 2), color(145, 231, 8), color(30, 219, 4), color(33, 224, 201), color(255, 255, 255)]; 

​

  titleBtn= new Button(width/2, 3*height/4, 200, 40, "-> SEND A LIGHT <-");

  titleBtn.fontColor = color(197, 46, 247);

  titleBtn.fontSize = 30; 

  undoBtn = new Button(width/5, 3*height/4, 50, 30, "UNDO"); 

  undoBtn.fontColor = color(197, 46, 247); 

  undoBtn.fontSize = 20; 

  nextBtn = new Button(4*width/5,3*height/4, 50, 30, "NEXT"); 

  nextBtn.fontColor = color(197, 46, 247); 

  nextBtn.fontSize = 20; 

  flickerBtn = new Button(width/4, 3*height/4, 100, 30, "FLICKER"); 

  flickerBtn.fontColor = color(197, 46, 247); 

  flickerBtn.fontSize = 30; 

  waveBtn = new Button(width/2, 3*height/4, 60, 30, "WAVE"); 

  waveBtn.fontColor = color(197, 46, 247); 

  waveBtn.fontSize = 30; 

  pulseBtn = new Button(3*width/4, 3*height/4, 80, 30, "PULSE"); 

  pulseBtn.fontColor = color(197, 46, 247); 

  pulseBtn.fontSize = 30; 

  sendAnotherBtn = new Button(width/2, height/2, 200, 40, "-> SEND ANOTHER <-"); 

  sendAnotherBtn.fontColor = color(37, 241, 242); 

  sendAnotherBtn.fontSize = 30; 

  picker = new colorPicker(width/2, height/3, 250); 

​

​

  //checking for a serial connection 

  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("close", makePortButton);

}

​

function draw() {

  if (state == 0){

    background(0);

    textSize(50);  

    noFill(); 

    stroke(255); 

    strokeWeight(2);  

    heartNeon(); 

    textNeon("DISTANCE MAKES THE\n HEART GLOW FONDER", width/2, 200);

    if ((frameCount - titleBtn.age) > 120){

      titleBtn.display(); 

    }

  }

  if (state == 1){

    displayed = true; 

    background(0); 

    textSize(40); 

    textNeon("1. CHOOSE A COLOR", width/2, 100); 

    glow(0,0); 

    picker.changeColor(); 

    picker.display(); 

//     image(wheel, width/2, height/2);

//     undoBtn.display(); 

//     nextBtn.display();

//     glow(0,0); 

//     if (!colorChosen){

//       pixelInfo = wheel.get(mouseX-width/2+125, mouseY-height/2+125, 50, 50);

//       lastX = mouseX; 

//       lastY = mouseY; 

//       image(pixelInfo, mouseX-25, mouseY-25, 50, 50);

//       stroke(0);

//       noFill();

//       rect(mouseX-25, mouseY-25, 50, 50); 

//     }

//     else { 

//       pixelInfo = wheel.get(lastX-25, lastY-25, 50, 50); 

//       image(pixelInfo, lastX-25, lastY-25, 50, 50);

//       stroke(0);

//       noFill();

//       rect(lastX-25, lastY-25, 50, 50); 

//     }

  }

  if (state == 2){

    displayed = true;

    background(0); 

    textSize(40); 

    textNeon("2. CHOOSE A LIGHT PATTERN", width/2, 100); 

    flickerBtn.display(); 

    waveBtn.display(); 

    pulseBtn.display(); 

    imageNeon(lightning, width/4, height/2, 100, 100, color(255, 255, 0), "f"); 

    imageNeon(wave, width/2, height/2, 150, 75,  color(37, 241, 242), "w"); 

    imageNeon(pulse, 3*width/4, height/2,120, 120, color(36, 246, 8), "p");

    if (lightChosen){

      nextBtn.fontColor = color(248, 0, 122); 

      nextBtn.y=3*height/4+50; 

      nextBtn.display(); 

    }

  }

  if (state == 3) {

    displayed = true; 

    background(0); 

    textSize(40); 

    textNeon("3. TOUCH THE LAMP TO SEND", width/2, 100); 

    imageNeon(bulb, 2*width/3, height/2, 150, 200, color(255, 255, 0), 'b');

    imageNeon(hand, width/3, height/2, 200, 100, color(255, 255, 255), 'h')

    if (readyToSend) { 

      console.log('the color you chose:', colorValue); 

      console.log('the light mode you chose:', lightMode);

      outData  = [lightMode]; 

      console.log(outData); 

      serial.write(outData); 

      displayed = false; 

      state = 4; 

    }

​

  }

  if (state == 4){ 

    displayed = true; 

    background(0); 

    textSize(40); 

    textNeon("YOUR LIGHT HAS BEEN SENT!", width/2, 200); 

    if ((frameCount - sendAnotherBtn.age > 120)) { 

      sendAnotherBtn.display(); 

    }

  }

}

​

function heartNeon(){

  //heart

  glow(color(197, 46, 247, flicker()), 12); 

  noFill(); 

  stroke(255,flicker()); 

  heart(width/2, 150,200);

  heart(width/2, 150,200);

  glow(color(197, 46, 247, flicker()), 60); 

  heart(width/2, 150,200);

  heart(width/2, 150,200);

  glow(color(197, 46, 247, flicker()), 400); 

  heart(width/2, 150,200);

  heart(width/2, 150,200);

  //rect 

  noStroke(); 

  fill(0); 

  glow(0,0); 

  rect(width/2, 210, width, 90);

}

​

function textNeon(message, x, y) {

  //text

  noFill(); 

  stroke(255); 

  glow(textColor, 12); 

  text(message, x, y);

  text(message, x, y);

  glow(textColor, 50); 

  text(message, x, y);

  text(message, x, y);

  glow(textColor, 60); 

  text(message, x, y);

  text(message, x, y);

​

}

​

function imageNeon(img, x, y, w, h, glowColor, choice){

  if (choice == 'f' || choice == 'b'){

    tint(20, 20, 20, 255); 

    glow(glowColor, 0); 

    image(img, x, y, w, h);

    tint(255, 255, 255, flicker()); 

    glow(glowColor, 160);

    image(img, x, y, w, h); 

    glow(glowColor, 80);

    image(img, x, y, w, h); 

    glow(glowColor, 12);

    image(img, x, y, w, h); 

    tint(255, 255, 255, 255); 

​

  }

  else if (choice == 'w' || choice == 'h'){

    glow(glowColor, 160);

    image(img, x+sin(frameCount/20)*10, y, w, h); 

    glow(glowColor, 80);

    image(img, x+sin(frameCount/20)*10, y, w, h); 

    glow(glowColor, 12);

    image(img, x+sin(frameCount/20)*10, y, w, h); 

  }

  else if (choice == 'p') {

    push(); 

    glow(glowColor, 160);

    image(img, x, y, w+sin(frameCount/20)*20, h+sin(frameCount/20)*15); 

    glow(glowColor, 80);

    image(img, x, y,  w+sin(frameCount/20)*20, h+sin(frameCount/20)*15); 

    glow(glowColor, 12);

    image(img, x, y,  w+sin(frameCount/20)*20, h+sin(frameCount/20)*15);

    pop(); 

  }

​

​

}

​

function glow(glowColor, blurriness) {

  drawingContext.shadowColor = glowColor; 

  drawingContext.shadowBlur = blurriness; 

}

​

function heart(x, y, size) {

  beginShape();

  vertex(x, y);

  bezierVertex(x - size / 2, y - size / 2, x - size, y + size / 3, x, y + size);

  bezierVertex(x + size, y + size / 3, x + size / 2, y - size / 2, x, y);

  endShape(CLOSE);

}

​

function flicker(){

  offset+=0.08; 

  let n = noise(offset); 

  if (n<0.30) { 

    return 0; 

  }

  else { 

  return 255; 

  }

}

​

function mouseClicked(){ 

  if (state == 0){

    if (titleBtn.mouse_over()){

      titleBtn.hover = false; 

      state=1;

    }

  }

​

  if (state == 1 && displayed) {

    // if ((mouseX >= width/2 - colorWheel.width/2) && (mouseX <= width/2 +colorWheel.width/2) &&(mouseY >= 350-colorWheel.height/2) &&(mouseY<=350+colorWheel.height/2)){

    colorChosen = true; 

    let pixel = colorWheel.get(lastX, lastY); 

    colorValue = pixel; 

    if (colorChosen) { 

      if (undoBtn.mouse_over()) { 

        colorChosen = false;

      }

      if (nextBtn.mouse_over()) { 

        colorChosen = false; 

        nextBtn.hover = false; 

        displayed = false; 

        state=2; 

      }

    } 

  }

  if (state == 2 && displayed){ 

    if (flickerBtn.mouse_over()) { 

      lightChosen = true; 

      lightMode = 1; 

      flickerBtn.lightChosen = true; 

      waveBtn.lightChosen = false; 

      pulseBtn.lightChosen = false; 

    }

    if (waveBtn.mouse_over()) { 

      lightChosen = true; 

      lightMode = 2; 

      waveBtn.lightChosen = true; 

      flickerBtn.lightChosen = false; 

      pulseBtn.lightChosen = false; 

    }

    if (pulseBtn.mouse_over()) { 

      lightChosen = true; 

      lightMode = 3; 

      pulseBtn.lightChosen = true; 

      waveBtn.lightChosen = false; 

      flickerBtn.lightChosen = false; 

    }

    if (nextBtn.mouse_over()){

      waveBtn.lightChosen = false; 

      flickerBtn.lightChosen = false; 

      pulseBtn.lightChosen = false; 

      lightChosen = false; 

      displayed = false; 

      state=3; 

    }

  }

  if (state == 4 && displayed) { 

    displayed = false; 

    sendAnotherBtn.hover = false; 

    colorChosen = false; 

    lightChosen = false; 

    state = 1; 

  }

​

}

​

function keyPressed(){ 

  if (state == 3 && displayed){

    readyToSend = true; 

  }

}

​

class colorPicker { 

  constructor(x, y, s) { 

    this.x = x; 

    this.y = y; 

    this.s  = s; 

    this.age = frameCount; 

    this.i = 0; 

    this.color = colors[this.i]; 

  }

  display() {

    beginShape();

    stroke(this.color); 

    fill(this.color); 

    glow(this.color, 80); 

    vertex(this.x, this.y);

    bezierVertex(this.x - this.s / 2, this.y - this.s / 2, this.x - this.s, this.y + this.s / 3, this.x, this.y + this.s);

    bezierVertex(this.x + this.s, this.y + this.s / 3, this.x + this.s / 2, this.y - this.s / 2, this.x, this.y);

    endShape(CLOSE);

  }

  changeColor() { 

    if (((frameCount -  this.age) % 8) == 0) { 

      this.color = colors[this.i % colors.length];

      this.i++;   

    }

  }

}

class Button {

  constructor(x, y, w, h, msg){

    this.x = x; 

    this.y = y; 

    this.w = w; 

    this.h = h; 

    this.msg = msg; 

    this.age = frameCount; 

    this.fontSize = null; 

    this.fontColor = null; 

    this.opacity = 255; 

    this.hover = false;

    this.lightChosen = false; 

  }

  display(){ 

  if (mouseX < this.x+this.w/2 &&

        mouseX > this.x - this.w/2 &&

        mouseY > this.y-this.h/2 && 

        mouseY < this.y+this.h/2){ 

      this.hover = true; 

    }

    else { 

      this.hover = false;

    }

    if (this.hover) {

      this.opacity = 180; 

    }

    else { 

      this.opacity = 255; 

    }

    glow(this.fontColor, 20);

    strokeWeight(1); 

    stroke(255, this.opacity); 

    textSize(this.fontSize); 

    text(this.msg, this.x, this.y); 

    text(this.msg, this.x, this.y);

​

    //make itinto a "show box" function that is specific to each icon.

    //in mouseClicked, say xbutton.showBox()

  if (this.lightChosen) {

    noFill(); 

    stroke(255); 

    strokeWeight(1); 

    rect(this.x, this.y-10, 140, 30); 

    }

//   if (state == 4) { 

//     noFill(); 

//     stroke(255); 

//     strokeWeight(1); 

//     rect(this.x, this.y-10, 220, 50); 

//     rect(this.x, this.y-10, 220, 50); 

//     }

  }

  mouse_over() {  

    return this.hover; 

    }

}

​

​

​

​

//////////////////FUNCTIONS FOR SERIAL COMMUNICATION /////////

//////////WILL REMOVE LATER 

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

  if (portButton) portButton.show();

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

}

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

}

function closePort() {

  serial.close();

}

​