let latestData = "waiting for data";

let newVal = 0;

let currentVal = 1;

​

let g = 100;

let grow = false;

let mask;

let vid;

let maskImg;

​

function preload() {

  maskImg = loadImage("mask.png");

  darkMask = loadImage("Dark Mask.png");

  whiteMask = loadImage("White Mask.png");

  vid = createVideo('Colour Visuals.mp4');

}

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

​

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

​

  serial = new p5.SerialPort();

​

  serial.list();

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

​

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

  let currentString = serial.readLine();

  console.log(currentString);

}

​

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

  if(!isNaN(latestData)) {

    newVal = int(latestData);

  }

  // console.log("newVal",newVal)

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

}

​

​

function draw() {

  background(0)

​

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

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

  // vidMaskShape();

  // vidMaskDisplay();

  currentVal += (newVal-currentVal)*0.01;

  if (currentVal < 0) currentVal = 0;

  //this line makes the animation smooth - smoothens the data

  let scl = map(currentVal, 0,100, 1.3,0.5); //// Original Value: 0,100,1.3,0.5

  // mapping current value of  detected from 0 - 100 to 0.5 - 1.5 in scale

  image(vid, 0,0,width, height);

  let w = width*scl;

  let h = height*scl;

  // the *scl scales the box in a centre fashionnn

  image(maskImg, 0,0, w,h);

  //the masking w and h is determined by the scl

 //MAYBE TEST invscl and scl and darkScl

  let invscl = map(currentVal, 60,100, 0.4, 1.0); // Original Value: 0,100,0.4,1.0

  let nw = width*invscl;

  let nh = height*invscl;

  fill(0)

  noStroke();

  rect(0-1000,0-900,nw*4,nh*3/5);// Top rect border

  rect(width-250,height-200,-nw*3,-nh*3/5); // Bottom rect border

  rect(width-500,height-350,-nw*11/20,-nh*3);// right

  rect(0-1000,0-750,nw*15/40,nh*3);//left

     let darkScl = map(currentVal, 60,107, 2.5, 0);

  // Original Value: 0,107,2.5, 0 

  let dw = width*darkScl;

  let dh = height*darkScl;

  image(darkMask, 0,0, dw/2,dh/2);

  image(whiteMask, 0,0, dw*2/5, dh*2/5);

​

}

​

​

​

// const vidMaskShape = () => {

//   // mask.ellipse(width/2,height/2,latestData[0]*40)

//   mask.ellipse(width/2,height/2,newVal*10)

// }

​

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

}