//Michael Zhou

//This sketch asks the user to capture a barcode, and play sound base on the barcode.

​

//Variables: Video Part

let cam;

let count;

​

//Audio Part

// Note ratios

let notes = [1, 1.125, 1.25, 1.334, 1.5, 1.667, 1.875, 2];

// Base frequency

let playhead = 0;

let barcode = [];

let sound;

let n;

​

function preload() {

  sound = loadSound('bell.wav');

}

​

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  cam = createCapture(VIDEO);

  cam.size(640, 480);

  cam.hide();

  count = 0;

}

​

function draw() {

  background(219, 0, 26);

  //Background Texz

  noStroke();

  fill(194, 0, 0);

  textAlign(LEFT);

  textSize(150);

  textStyle(BOLD);

  textLeading(120);

  text('CO-\nDEs\n+of\nCHRISTMAS', width / 2 - 600, height/2+20 );

​

  cleanUp(barcode);

  // console.log(playhead);

  //Displaying Barcode

  if (count > 0) {

    rectMode(CORNER);

    for (let x = 0; x < barcode.length; x++) {

      push();

      translate((width - barcode.length * 2) / 2, 0);

      noStroke();

      if (barcode[x] == 1) fill(219, 0, 26, 0);

      else fill(4, 71, 39);

      rect(x * 2, 0, 1 * 2, height);

      pop();

    }

  }

​

  //Showing camera in the middle

  //The camera is mirrored

  push();

  translate((width - cam.width) / 2, (height - cam.height) / 2);

  push();

  scale(-1, 1);

  copy(cam, 0, 0, 640, 480, -640, 0, 640, 480);

  pop();

  pop();

​

  //Decrating Elements

  //Barcode scaning area in the middle

  rectMode(CENTER);

  stroke('red');

  strokeWeight(5);

  fill(255, 255, 255, 100);

  rect(width / 2, height / 2, 250, 100);

  strokeWeight(3);

  line((width - 250) / 2, height / 2, (width - 250) / 2 + 250, height / 2);

  //Border of the camera capture

  noFill();

  strokeWeight(20);

  stroke(255);

  rect(width / 2, height / 2, cam.width, cam.height);

  //Text

  noStroke();

  fill(255);

  textAlign(LEFT);

  //Title

  textStyle(BOLD);

  textSize(24);

  textLeading(21);

  text('Discover\nthe\nCHRISTMAS\nTUNE\nof\nyour\ncode!', width / 2 + cam.width / 2 + 30, height / 2 - cam.height / 2 + 7);

  //Instruction

  textStyle(NORMAL);

  textSize(18);

  textLeading(19);

  text('*\nPlace your barcode in the center box\nand press \'return\'.\n👈🏻', width / 2 + cam.width / 2 + 30, height / 2 - cam.height / 2 + 180);

​

  //Playing bell sound

  if (count > 0) {

    if (frameCount % 5 == 0) {

      // if it's a black pixel bar increase the note

      if (barcode[playhead] == 0) {

        if (n == 7) n = n;

        else n++;

      } else { // if it's a white pixel bar decrease the note

        if (n == 0) n = n;

        else n--;

      }

​

      f = notes[n];

      sound.rate(f);

      sound.play();

      playhead++;

    }

​

    //Stop playing if reaches the end

    if (playhead >= barcode.length) {

      playhead = 0;

      sound.stop();

      count--;

    }

  }

}

​

//Deleting white spaces at the two end of the barcode scan

function cleanUp(codes) {

  //cleaning the beginning part

  for (let c = 0; c < codes.length; c++) {

    if (codes[c] == 1) {

      codes.splice(0, 1);

    } else {

      c = codes.length;

    }

  }

  //cleaning the ending part

  for (let c = codes.length - 1; c > 0; c--) {

    if (codes[c] == 1) {

      codes.pop();

    } else {

      c = 0;

    }

  }

}

​

​

//Capturing barcodes

function keyPressed() {

  if (keyCode == RETURN) {

    barcode = [];

    cam.loadPixels();

    let p = cam.width - (cam.width - 250) / 2;

    for (let x = 0; x < 250; x++) {

      // //Get the color array [r,g,b,a] at x

      let pixelColorInMiddle = cam.get(p, cam.height / 2);

​

      // Test for a brightness threshold of 50

      let b = brightness(pixelColorInMiddle);

      if (b > 60) {

        barcode[x] = 1;

      } else {

        barcode[x] = 0;

      }

      p--;

    }

    cam = createCapture(VIDEO);

    cam.hide();

    count++;

    n = 3;

  }

}