let sel;

let img;

let img2;

let img3;

let img4;

let img5;

let img6;

let bdg;

let bdg2;

​

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

let lengths = [84,100];

let index = 0;

​

let sceneNum = 0;

​

let next;

let lee;

let chris;

let allow;

let back;

let dontallow;

let end;

​

//text

let cl = 'Make A Video Call From The Contact List';

​

//***********************************************************

​

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

  bdg = loadImage('background.jpg');

  bdg2 = loadImage('background2.png');

}

​

//***********************************************************

​

function setup() {

  createCanvas(640, 480); 

  capture = createCapture(VIDEO);

  capture.hide();

  sel = createSelect();

  sel.position(280, 420);

  sel.option('Hello');

  sel.option('Thank you');

  sel.option('Sorry');

  sel.option('Miss you')

  sel.hide();

  textSize(15);

  textStyle(NORMAL);

  next = createButton('Next')

  next.size(80, 30);

  next.position(280, 380);

  next.style('background-color', '#333333');

  next.style('color', '#ffffff')

  next.mousePressed(proceed);

  next.hide();

  lee = createButton('Call Lee');

  lee.size (150, 50);

  lee.position(240, 210);

  lee.style('font-size', '20px')

  lee.style('background-color', '#ffffff')

  lee.mousePressed(proceed);

  lee.hide();

  chris = createButton('Call Chris');

  chris.size (150, 50);

  chris.position(240, 300);

  chris.style('font-size', '20px')

  chris.style('background-color', '#ffffff')   

  chris.mousePressed(proceed);

  chris.hide();

  allow = createButton('Allow')

  allow.size(80, 30);

  allow.position(450, 400);

  allow.style('background-color', '#333333');

  allow.style('color', '#ffffff')

  allow.mousePressed(proceed);

  allow.hide();

  dontallow = createButton("Don't Allow")

  dontallow.size(100, 30);

  dontallow.position(110, 400);

  dontallow.style('background-color', '#333333');

  dontallow.style('color', '#ffffff')

  dontallow.mousePressed(before);

  dontallow.hide();

  back = createButton('Back');

  back.size(80, 30);

  back.position(275, 400);

  back.style('background-color', '#333333');

  back.style('color', '#ffffff')

  back.mousePressed(before);

  back.hide();

  end = createButton('End Chat');

  end.size(90, 40);

  end.position(530, 430);

  end.style('background-color', '#333333')

  end.style('font-size', '15px')

  end.style('color', '#ffffff')

  end.mousePressed(before);

  end.hide();

}

​

//***********************************************************

​

function draw() {

  background(255);

//change the scene

  switch (sceneNum){

    case 0:

     camIntro();

     break;

  }  

  switch (sceneNum){

    case 1:

    contactlist();

     break;

  }  

  switch (sceneNum){

    case 2:

     camPermission();

     break;

} 

  switch (sceneNum){

    case 3:

     startvideo();

     break;

  } 

//*************************************************************

function proceed(){

​

  sceneNum += 1;

}

function before(){

  sceneNum = 0;

}

​

//**************************camIntro****************************

//case 0: camera introduction

function camIntro(){

​

  imageMode(CENTER);

  image(bdg, width/2, height/2, 800, 480);

  next.show();

  allow.hide();

  dontallow.hide();

  lee.hide();

  chris.hide();

  back.hide();

  end.hide();

  sel.hide();

  noStroke();

  fill(255, 255, 255)

  rect(250, 60, 150, 60, 20);

  rect(82, 230, 480, 110, 20);

  fill(0);

  textSize(50)

  text('SIGN', 262, 108);

  fill(0)

  textSize(15);

  text('Sign is a camera applied in video chat that help users communicate', 100, 250);

  text('with people with impaired hearing. The camera provides users with ', 100, 270);

  text('hand gestures of casual expressions in sign language. Users follow', 100, 290);

  text('hints to learn basic sign languages and start communicating. Click', 100, 310);

  text('"next" to start!', 100, 330);

}

//**************************contactlist****************************

//case 1: view your contact list

function contactlist(){

  imageMode(CENTER);

  image(bdg2, width/2, height/2, 800, 480);

  lee.show();

  chris.show();

  next.hide();

  back.show();

  allow.hide();

  dontallow.hide();

  end.hide();

  sel.hide();

  fill(255)

  textSize(25);

  text(cl, 100, 120);

}

//**************************camPermission****************************

//case 2: Open the camera

function camPermission(){

​

  imageMode(CENTER);

  image(bdg2, width/2, height/2, 800, 480);

  lee.hide();

  chris.hide();

  back.hide();

  allow.show();

  dontallow.show();

  end.hide();

  sel.hide();

  fill(255);

  textSize(23);

  textStyle(BOLD);

  text('"SIGN" Would Like to Access Your Camera', 90, 200);

  textSize(15)

  textStyle(NORMAL);

  text('Click "Allow" to start the video chat', 200, 250);

}

​

//**************************startvideo****************************

//case 3: enter the camera

​

function startvideo(){

  next.hide();

  allow.hide();

  dontallow.hide();

  lee.hide();

  chris.hide();

  back.hide();

  end.show();

  sel.show();

  translate(width, 0);

  scale(-1, 1);

  imageMode(CORNER);

  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"){

    imageMode(CORNER);

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

    push();

    translate(width,0); 

    scale(-1,1);

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

    fill(0);

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

    pop();

  }

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

    imageMode(CORNER);

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

    fill(0);

    text("Hello", 40, 37);

    pop();

  }

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

    imageMode(CORNER);

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

    fill(0);

    text("Sorry", 40, 116);

    pop();

  }

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

    imageMode(CORNER);

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

    fill(0);

    text("Miss you", 40, 156);

    pop();

  }

​

}

}