let latestData = "waiting for data";

let newVal = 0;

let g = 100;

let grow = false;

let mask;

let vid;

​

​

function setup() {

  createCanvas(windowWidth, windowHeight);

​

  //background = (255, 0, 0);

​

  serial = new p5.SerialPort();

​

  serial.list();

  serial.open('/dev/tty.usbmodem142201');

​

  serial.on('connected', serverConnected);

​

  serial.on('list', gotList);

​

  serial.on('data', gotData);

​

  serial.on('error', gotError);

​

  serial.on('open', gotOpen);

​

  serial.on('close', gotClose);

  vid = createVideo('Tree shadows.mp4')

  mask = createGraphics(width, height)

  vid.loop();

  vid.class('vid');

  vid.hide();

  imageMode(CENTER);

}

​

function serverConnected() {

  print("Connected to Server");

}

​

function gotList(thelist) {

  print("List of Serial Ports:");

​

  for (let i = 0; i < thelist.length; i++) {

    print(i + " " + thelist[i]);

  }

}

​

function gotOpen() {

  print("Serial Port is Open");

}

​

function gotClose() {

  print("Serial Port is Closed");

  latestData = "Serial Port is Closed";

}

​

function gotError(theerror) {

  print(theerror);

}

​

function gotData() {

  let currentString = serial.readLine();

  trim(currentString);

  if (!currentString) return;

  console.log(currentString);

  latestData = currentString;

  //newVal = round(constrain(map(latestData,700,1023,0,500),0,500),2);

  newVal = latestData

  // console.log(latestData + " / " + newVal);

}

​

​

function draw() {

  background(0)

​

  //ellipse(windowWidth/2, windowHeight/2, latestData[0]*100);

  // ellipse(200,200,latestData[0]*50)

  vidMaskShape();

  vidMaskDisplay();

​

}

​

​

const vidMaskShape = () => {

  mask.ellipse(width/2,height/2,latestData[0]*50+100)

}

​

const vidMaskDisplay = () => {

  vid.mask(mask);

  image(vid, width/2, height/2, vid.width*2.4, vid.height*3);

}

​

// function mousePressed() {

//   if (mouseX > 0 && mouseX < windowWidth && mouseY > 0 && mouseY < windowHeight) {

//     let fs = fullscreen();

//     fullscreen(!fs);

//   }

// }

​

// function windowResized() {

//   resizeCanvas(windowWidth, windowHeight);

// }