//let tracker;

let sel;

let img;

let img2;

let img3;

let img4;

let img5;

let img6;

​

let vars = [20,60,100,140];

let lengths = [84,100];

let index = 0;

​

function preload() {

  //preload() runs once

  img = loadImage('gesture1.png');

  img2 = loadImage('gesture2.png');

  img3 = loadImage('gesture3.png');

  img4 = loadImage('gesture4.png');

  img5 = loadImage('gesture5.png');

  img6 = loadImage('gesture6.png');

}

​

function setup() {

  createCanvas(640, 480); 

  capture = createCapture(VIDEO);

  capture.hide();

  sel = createSelect();

  sel.position(250, 480);

  sel.option('Hello');

  sel.option('Thank you');

  sel.option('Sorry');

  sel.option('Miss you')

  textSize(15);

  textStyle(NORMAL);

}

​

function draw() {

  background(255);

  translate(width, 0);

  scale(-1, 1);

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

  push();

  translate(width,0); 

  scale(-1,1);

  noStroke();

  rect(30, vars[0], lengths[0], 25);

  rect(30, vars[1], lengths[0], 25);

  rect(30, vars[2], 84, 25);

  rect(30, vars[3], 84, 26);

  pop();

  if (sel.value()=="Thank you"){

    image(img,80,220,220,220);

    push();

    translate(width,0); 

    scale(-1,1);

    rect(30, vars[1], lengths[1], 25);

    text("Thank you", 40, 76);

    pop();

  }

  if (sel.value()=="Hello"){

    image(img2,360,260,200,190);

    image(img3,80,220,220,220);

    push();

    translate(width,0);

    scale(-1,1);

    rect(30, vars[0], lengths[1], 25);

    text("Hello", 40, 37);

    pop();

  }

  if (sel.value()=="Sorry"){

    image(img4,300,50,350,350);

    image(img5,240,260,300,300);

    push();

    translate(width,0);

    scale(-1,1);

    rect(30, vars[2], lengths[1], 25);

    text("Sorry", 40, 116);

    pop();

  }

  if (sel.value()=="Miss you"){

    image(img6,350,50,250,250);

    image(img2,80,260,200,190);

    push();

    translate(width,0);

    scale(-1,1);

    rect(30, vars[3], lengths[1], 26);

    text("Miss you", 40, 156)

    pop();

  }

​

}