User Testing – Mariam & Yesenia

Video:

For this week, we focused on our visuals. We wanted to have our countries and videos. We ran into multiple problems where the video is not always triggered even though our code was the same. There was also the problem of having the video to stop looping go back to the original page (image of the map). So far we have gotten the Mexico video to work, but when we try to add the other videos, they do not work.

Here is our code:

const pts = []
var size = 0.6;
let alpha = 255;
let left = 0;
let right = 0; 

let rVal0 = 0;
let rVal1 = 0;

let img1;
let vid0;
let vid1;


let playVid0 = false;
let playVid1 = false;

let playOnce0 = 0; 
let playOnce1 = 0;

function preload () {
  img1 = loadImage("outline map.png");
}

function setup() {
  createCanvas(innerWidth, innerHeight);
  pixelDensity(5);
  textSize(18);
  setUpSerial();
  vid0 = createVideo("mexico.mp4")
  vid0.position(220, 100)
  vid0.size(560, 315);
  vid0.volume(1);
  vid0.hide();
  vid0.showControls();
  vid0.onended(sayDone);

  // vid1 = createVideo("Ethiopia.mp4")
  // vid1.position(220, 100)
  // vid1.size(800, 315);
  // vid1.volume(1);
  // vid1.hide();
  // vid1.showControls();
  // vid1.onended(sayDone);
 
}
function keyPressed() {
  if (key == " ") {
    // important to have in order to start the serial connection!!
    setUpSerial(SELECT_PORT);
  }
}
function draw() {
  console.log(rVal0)
  // console.log(rVal1)
  fill(100);
  stroke(255);
  strokeWeight(1);


  if (!serialActive) {
    text("Press Space Bar to select Serial Port", 20, 30);
  } else {
    text("Connected", 20, 30);
  }
  background(img1, 0, 0, innerWidth, innerHeight);



  if (playVid0 == true && playOnce0 == 0){
      vid0.show();
      vid0.loop();
      vid0.volume(1); 
    }
    
    // if (playVid1 == true && playOnce1 == 0){
    //   vid1.show();
    //   vid1.loop();
    //   vid1.volume(1); 
    // }
  }
  function sayDone(elt) {
    alert('done playing ' + elt.src);
    playOnce0 = 1;
    // playOnce1 = 1;
  }

function readSerial(data) {
  ////////////////////////////////////
  //READ FROM ARDUINO HERE
  ////////////////////////////////////
 
  if (data != null) {
    // make sure there is actually a message
    // split the message
    let fromArduino = split(trim(data), ",");
    // if the right length, then proceed
    if (fromArduino.length == 1) {
      // only store values here
      // do everything with those values in the main draw loop
    rVal0 = fromArduino[0];
      if (rVal0 > 100){
             playOnce0= 0;
             playVid0 = true;
        }
      //   rVal1 = fromArduino[1];
      // if (rVal1 > 100){
      //        playOnce1= 0;
      //        playVid1 = true;
      //   }
   }

    //////////////////////////////////
    //SEND TO ARDUINO HERE (handshake)
    //////////////////////////////////
    let sendToArduino = "\n";
    writeSerial(sendToArduino);
  }
}

 

 

 

Leave a Reply