let lecture = 0;

let val;

let connectBtn;

​

function setup() {

  port = createSerial();

  createCanvas(700, 400);

  //frameRate(1);

  connectBtn = createButton('Hello!');

  connectBtn.position(290, 370);

  connectBtn.mousePressed(connectBtnClick);

}

​

function draw() {

  if (port.available()>0){

    lecture = port.readUntil('\n');

    if(lecture) {

      lecture = int(lecture)

      console.log(val)

      val = map(lecture, 0, 255, 0, 650);

    }

  }

  background(20);

  fill(100, 204, 0);

  rect(20, 200, val, 100);

  fill(255);

  textSize(200);

  text(lecture,val/2,150);

  if (!port.opened()) {

    connectBtn.html('Connect');

  } else {

    connectBtn.html('Disconnect Serial');

  }

}

​

function connectBtnClick() {

  if (!port.opened()) {

    port.open(9600);

  } else {

    port.close();

  }

}