let video;

​

//assign an array to draw text

let textArray = [];

​

//set variables for the loading effect

let loading = [];

let interval = 60;

let rectX = 285;

let rectCount = 0;

​

//assign variable counting display time

let lastDisplayTime = 0;

​

//load music

function preload() {

  song = loadSound("music3.MP3");

}

​

function setup() {

  createCanvas(960, 600);

  textFont("Helvetica");

  song.play();

​

  //create video

  video = createVideo("mouth.mp4");

  video.size(800, 700);

  video.loop();

  video.hide();

​

  //push texts into textArray

  textArray.push("Welcome to ShoutAtMe");

  textArray.push("Come to the Dance Fool");

  textArray.push("Here are Four Sections");

  textArray.push("Choose One for YourSelf");

  textArray.push("1: N");

  textArray.push("2: E");

  textArray.push("3: S");

  textArray.push("4: W");

}

​

function draw() {

  background(0);

​

  //add video to the screen

  imageMode(CENTER);

  image(video, 480, 340, 460, 360);

​

  //show the dancing floor

  lines(200, 190, 200, 490);

  lines(760, 190, 760, 490);

  lines(480, 130, 480, 550);

  lines(200, 340, 760, 340);

​

  lines(280, 130, 680, 130);

  lines(280, 550, 680, 550);

​

  lines(200, 190, 280, 130);

  lines(760, 190, 680, 130);

  lines(200, 490, 280, 550);

  lines(680, 550, 760, 490);

​

  //rotate the needle

  push();

  translate(480, 340);

  rotate(angle);

  line(0, 0, 0, 210);

  angle += 0.01;

  pop();

​

  //draw text

  paragraph();

​

  //draw bottom left box

  push();

  fill("rgba(0,201,0,0.11)");

  rect(40, 350, 110, 200);

  strokeWeight(0.7);

  line(40, 350, 40, 550);

  line(40, 350, 150, 350);

  line(40, 550, 150, 550);

  line(150, 350, 150, 550);

  stroke("rgba(0,201,0,0.5)");

  for (let i = 0; i < 10; i++) {

    line(40, 350 + 20 * i, 150, 350 + 20 * i);

  }

  for (let i = 0; i < 5; i++) {

    line(40 + 22 * i, 350, 40 + 22 * i, 550);

  }

  for (let i = 0; i < 11; i++) {

    textSize(8);

    text(i, 28, 353 + 20 * i);

  }

  noStroke();

  fill("rgb(10,156,10)");

  rectMode(CENTER);

  rect(62, 500, 12, 100);

  rect(84, 530, 12, 40);

  rect(106, 510, 12, 80);

  rect(128, 480, 12, 140);

  pop();

​

  //draw top right box

  push();

  fill("rgba(0,201,0,0.14)");

  rect(800, 150, 110, 210);

  strokeWeight(0.7);

  line(800, 150, 910, 150);

  line(800, 150, 910, 150);

  line(800, 150, 800, 360);

  line(800, 360, 910, 360);

  line(910, 150, 910, 360);

  strokeWeight(0.5);

  line(830, 150, 830, 360);

  line(885, 150, 885, 360);

  fill("rgb(10,156,10)");

  rect(800, 150, 110, 15);

  rect(800, 345, 110, 15);

  rect(800, 190, 5, 130);

  rect(905, 190, 5, 130);

  translate(850, 183);

  rotate(HALF_PI);

  textSize(20);

  text("SECURE AREA", 0, 0);

  pop();

​

  //draw bottom right shape

  push();

  strokeWeight(0.7);

  for (i = 0; i < 17; i++) {

    line(800, 400 + 10 * i, 810, 400 + 10 * i);

    line(900, 400 + 10 * i, 910, 400 + 10 * i);

  }

  noStroke();

  fill("rgb(10,156,10)");

  rectMode(CENTER);

  rect(855, 420, 30, 40);

  fill("rgba(10,156,10,0.8)");

  rect(855, 455, 30, 30);

  fill("rgba(10,156,10,0.66)");

  rect(855, 490, 30, 40);

  fill("rgba(0,201,0,0.38)");

  rect(855, 535, 30, 50);

  pop();

​

  //draw title

  fill("rgb(6,162,6)");

  textSize(30);

  text("CONNECTING:", 40, 64);

  textSize(15);

  text("System Loading...", 710, 47);

  text("Joining the Team n/?", 710, 72);

​

  //draw loading frame

  fill("rgba(0,201,0,0.14)");

  rect(280, 30, 400, 50);

  strokeWeight(1.5);

  stroke("rgba(0,201,0,0.74)");

  line(280, 30, 680, 30);

  line(280, 80, 680, 80);

  line(280, 30, 280, 80);

  line(680, 30, 680, 80);

​

  //push a new x position to rectarray every 1 sec

  if (frameCount % interval === 0 && rectCount < 16) {

    loading.push(rectX);

    rectX += 25;

    rectCount++;

  }

​

  //draw rects in the loading frame using array

  for (i = 0; i < loading.length; i++) {

    noStroke();

    fill("rgb(10,156,10)");

    rect(loading[i], 37, 15, 35);

  }

​

  //let "NESW" flicker every half sec

  let elapsedTime = millis() - lastDisplayTime;

​

  if (elapsedTime < 500) {

    //draw the center circles

    circles();

    fill("rgb(6,162,6)");

    textSize(80);

    text("N", 315, 265);

    text("E", 592, 265);

    text("S", 316, 475);

    text("W", 580, 475);

  } else {

    lastDisplayTime = millis();

  }

}

​

//helper function to build the shapes

function lines(x1, y1, x2, y2) {

  noFill();

  strokeWeight(0.7);

  stroke("rgb(0,201,0)");

  line(x1, y1, x2, y2);

}

​

//helper function to build the center circles

function circles() {

  push();

  noFill();

  // fill("rgba(0,201,0,0.1)");

  strokeWeight(0.7);

  stroke("rgba(0,201,0,0.74)");

  circle(480, 340, 100);

  circle(480, 340, 250);

  circle(480, 340, 420);

  pop();

}

​

//helper function to hold the text array

function paragraph() {

  push();

  strokeWeight(0.5);

  fill("rgb(8,172,8)");

  line(32, 148, 32, 303);

  for (let i = 0; i < textArray.length; i++) {

    textSize(10);

    text(textArray[i], 40, 160 + i * 20);

  }

  pop();

}

​