let fillcolor = 255;

let button = false;

​

let transparent = [0, 0, 0, 0];

​

let img;

let video;

​

function preload() {

  img = loadImage("App_background.jpg");

}

function setup() {

  createCanvas(302, 536);

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

  colorMode(HSB, 360, 100, 100, 100);

  rectMode(CENTER);

  noFill();

  strokeWeight(20);

  angleMode(RADIANS);

}

​

function draw() {

  //Trigger process

  if (Voice == true) {

    AI();

    // CameraButton();

  } else if (Voice == false) {

    welcome();

  }

  //Gradient

  let gradient = drawingContext.createLinearGradient(

width/2-200, height/2-200, width/2+200, height/2+200);

  gradient.addColorStop(0, color(310, 100, 100, 100));

  gradient.addColorStop(1, color(150, 100, 100, 100));

  drawingContext.strokeStyle = gradient;

}

​

function welcome() {

  fill(255);

  ellipse(151, 268, 100, 100);

  fill(0);

  text("START", 121, 276);

  textSize(20);

  text("WELCOME", 100, 100);

}

​

// function CameraButton() {

//   fill(255, 0, 0);

//   ellipse(151, 450, 50, 50);

// }

​

function mousePressed() {

  if (mouseX > 51 && mouseX < 251 && mouseY > 168 && mouseY < 368) {

    Voice = true;

  } else {

    Voice = false;

  }

​

//   if (mouseX > 51 && mouseX < 76 && mouseY > 425 && mouseY < 475) {

//     button = true;

//   }

}

​

function AI() {

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

  fill(fillcolor);

  ellipse(width/2, height/2, 200, 200);

  rotate(frameCount*0.01);

}

​

function keyPressed() {

  if (key == "ArrowLeft" && fillcolor == transparent) {

    fillcolor = 255;

  }

​

  if (key == "ArrowRight" && fillcolor == 255) {

    // stroke(255);

    // strokeWeight(4);

    fillcolor = transparent;

  }

}

​