​

The canvas' visuals are generated entirely within the 'shapes.frag' file, a GLSL shader that manipulates the incoming webcam feed using only trigonometry (more info at https://thebookofshaders.com/01/). Since shaders need WebGL support to run properly, this will ONLY RUN PROPERLY IN CHROME.

*/

​

//this variable will hold our shader object

let theShader;

​

let w = 600;

    h = 600;

​

let eye1X;

let eye1Y;

let eye2X;

let eye2Y;

​

​

let picButton;

let trackerCheckbox;

let shaderCheckbox;

let positions;

let trackVar = 1;

let shadeVar = 1;

​

function preload(){

  theShader = loadShader('shapesvert.vert', 'shapes.frag');

}

​

function setup() {

    pixelDensity(1);

    trackerCheckbox = createCheckbox("Enable Eye Tracking", false);

    trackerCheckbox.changed(eyeTracking);

    shaderCheckbox = createCheckbox("Enable Shader", false);

    shaderCheckbox.changed(eyeTracking);

    picButton = createButton("Screencap");

    picButton.mousePressed(picPress);

  // shaders require WEBGL mode to work

    capture = createCapture({

        audio: false,

        video: {

            width: w,

            height: h

        }

    }, function() {

        console.log('Capturing:')

    });

    capture.elt.setAttribute('playsinline', '');

    createCanvas(w, h, WEBGL);

    capture.size(w, h);

    capture.hide();

    tracker = new clm.tracker();

    tracker.init();

    tracker.start(capture.elt);

}

​

function draw() {

​

//     loadPixels();

//   for (var i = 0; i < capture.pixels.length; i += 1) {

//     capture.pixels[i] *= 0;

//     capture.pixels[i + 1] *= 0;

//     capture.pixels[i + 2] *= 0;

// }

//   capture.updatePixels();

      let time = millis();

      let positions = tracker.getCurrentPosition();

      theShader.setUniform('time', [time]);

​

    if (positions.length > 0) {

        eye1X = map(positions[27][0], 0, w, 0.0, 1.0);

        eye1Y = map(positions[27][1], 0, h, 0.0, 1.0);

        eye2X = map(positions[32][0], 0, w, 0.0, 1.0);

        eye2Y = map(positions[32][1], 0, h, 0.0, 1.0);

        // print(faceX);

      if(trackVar == 0){

        theShader.setUniform('eyeLoc1', [eye1X, eye1Y]);

        theShader.setUniform('eyeLoc2', [eye2X, eye2Y]);

      }

      else{

        theShader.setUniform('eyeLoc1', [-1, -1]);

        theShader.setUniform('eyeLoc2', [-1, -1]);

      }

    }

  theShader.setUniform('tex0', capture);

  // theShader.setUniform('faceLoc', [0.5, 0.2])

  // shader() sets the active shader with our shader

  shader(theShader);

​

  // rect gives us some geometry on the screen

  if(shadeVar == 0){

  rect(0,0,width, height);

  }

  else{

    null;

  }

}

​

function picPress() { 

    saveCanvas('ShaderCam.jpg');

}

​

function eyeTracking(){

  if(this.checked()){

    trackVar = 0;

  }

  else{

    trackVar = 1;

  }

}

​

function shadeToggle(){

  if(this.checked()){

    shadeVar = 0;

  }

  else{

    shadeVar = 1;

  }

}

​