var intro = "Hello! Thank you for visiting!";

var perm1 = "The Stargaze Camera is a camera that";

var perm2 = "brings the glittering night sky";

var perm3 = "whenever you want, wherever you are.";

var perm4 = "By allowing the program to access your camera,";

var perm5 = "you will be able to see";

var perm6 = "your reflection in the night sky.";

​

var check1 = "Please check the boxes below";

var check2 = "to give the Stargaze Camera permission to:"

​

let permBut;

let cameraAccess;

let bday;

​

sceneNum = 0;

timer = 347;

​

//Experimental Camera

let sky = 0;

let w = 0,

  h = 0;

let tracker;

let capture;

​

//stars

let x, y; //location for stars

let c; //color of stars

let lights;

let stars = [];

​

//face

let points = {

  bothEyes: [23, 24, 25, 26, 28, 29, 30, 31, 63, 64, 65, 66, 67, 68, 69, 70],

  nose: [37, 41, 42, 43],

  mouth: [44, 50, 56, 57, 58, 59, 60, 61],

  outline: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]

}

​

//button

let buttonmonth, buttonday, button;

let monthcount = 0;

let daycount = 0;

​

//zodiac

let zassign = 0;

let zodiacSign = 0;

​

function preload() {

  myFont = loadFont('jd_stars.ttf');

  aries = loadImage('Aries.png');

  taurus = loadImage('Taurus.png');

  gemini = loadImage('Gemini.png');

  cancer = loadImage('Cancer.png');

  leo = loadImage('Leo.png');

  virgo = loadImage('Virgo.png');

  libra = loadImage('Libra.png');

  scorpio = loadImage('Scorpio.png');

  sagittarius = loadImage('Sagittarius.png');

  capricorn = loadImage('Capricorn.png');

  aquarius = loadImage('Aquarius.png');

  pisces = loadImage('Pisces.png');

  music = loadSound('bgm.mp3');

}

​

function setup() {

  w = 750;

  h = 400;

  createCanvas(w, h);

  background(0);

  music.play();

​

  //for bg stars

  x = width / 2;

  y = height / 2;

  c = 255;

​

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

    stars[i] = new Star(random(w), random(h), random(255), random(0.1, 3), random(1));

  }

​

  //consentful interface

  //Permissions Page

  let col = color(255);

  let cols = color(0);

  permBut = createButton("To Permissions Page");

  permBut.position(280, 300);

  permBut.size(200, 30);

  permBut.style("font-family", 'Courier New');

  permBut.style("color", cols);

  permBut.style("background-color", col);

  permBut.mousePressed(permPage);

  permBut.hide();

  // back button

  backBut = createButton("Go Back");

  backBut.position (10, 10);

  backBut.size(80, 30);

  backBut.style("font-family", 'Courier New');

  backBut.style("color", cols);

  backBut.mousePressed(permPage);

  backBut.hide();

​

  //Checkboxes

  cameraAccess = createCheckbox('Access your camera & ask your birthday', false);

  cameraAccess.style("font-family", "Courier New");

  cameraAccess.style("font-size", "15px");

  cameraAccess.style("color", col);

  cameraAccess.changed(toBoth);

  cameraAccess.position(230, 200);

  cameraAccess.hide();

​

  onlyCamera = createCheckbox('Access camera only', false);

  onlyCamera.style("font-family", "Courier New");

  onlyCamera.style("font-size", "15px");

  onlyCamera.style("color", col);

  onlyCamera.changed(onlyCam);

  onlyCamera.position(230, 220);

  onlyCamera.hide();

​

  birthdayAccess = createCheckbox('Ask birthday only', false);

  birthdayAccess.style("font-family", "Courier New");

  birthdayAccess.style("font-size", "15px");

  birthdayAccess.style("color", col);

  birthdayAccess.changed(onlyBday);

  birthdayAccess.position(230, 240);

  birthdayAccess.hide();

}

​

function draw() {

​

  if (sceneNum == 1) {

    permBut.show();

  } else {

    permBut.hide();

  }

​

  if (sceneNum == 2) {

    cameraAccess.show();

    onlyCamera.show();

    birthdayAccess.show();

  } else {

    cameraAccess.hide();

    onlyCamera.hide();

    birthdayAccess.hide();

  }

​

  switch (sceneNum) {

​

    case 0:

      introScene();

      console.log('scene 0');

      break;

​

    case 1:

      sceneOne();

      console.log('scene 1');

      break;

​

    case 2:

      sceneTwo();

      console.log('scene 2');

      break;

​

    case 3:

      expCamera();

      console.log('scene 3');

      break;

​

    case 4:

      cameraOnly();

      console.log('scene 4');

      break;

    case 5:

      bdayOnly();

      console.log('scene 5');

      break;

  }

}

​

function introScene() {

  typeWriter(intro, 0, 120, 210, 200);

  if (frameCount % 2 == 0 && timer > 0) {

    timer--;

  }

  if (timer == 0) {

    sceneNum = 1;

  }

}

​

function sceneOne() {

  background(sky);

  // for bg stars

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

    stars[i].twinkle();

    stars[i].showStar();

  }

​

  textSize(30);

  textAlign(CENTER);

  text(perm1, width / 2, 80);

  text(perm2, width / 2, 110);

  text(perm3, width / 2, 140);

  text(perm4, width / 2, 170);

  text(perm5, width / 2, 200);

  text(perm6, width / 2, 230);

}

​

function sceneTwo() {

  background(sky);

  // for bg stars

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

    stars[i].twinkle();

    stars[i].showStar();

  }

​

  textSize(30);

  textAlign(CENTER);

  text(check1, width / 2, 100);

  text(check2, width / 2, 130);

​

}

​

function permPage() {

  sceneNum = 2;

  backBut.hide();

}

​

function toBoth() {

  if (cameraAccess.checked()) {

    capture = createCapture(VIDEO);

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

    capture.size(width, height);

    capture.hide();

​

    tracker = new clm.tracker();

    tracker.init();

    tracker.start(capture.elt);

    sceneNum = 3;

  }

}

​

function onlyCam() {

  if (onlyCamera.checked()) {

    capture = createCapture(VIDEO);

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

    capture.size(width, height);

    capture.hide();

​

    tracker = new clm.tracker();

    tracker.init();

    tracker.start(capture.elt);

    sceneNum = 4;

  }

}

​

function onlyBday() {

  if (birthdayAccess.checked()) {

    sceneNum = 5;

  }

}

​

function typeWriter(sentence, n, x, y, speed) {

  if (n < (sentence.length)) {

    fill(255);

    textSize(50);

    textFont(myFont);

    textAlign(LEFT);

    text(sentence.substring(0, n + 1), x, y);

    n++;

    setTimeout(function() {

      typeWriter(sentence, n, x, y, speed)

    }, speed);

  }

}

​

function expCamera() {

  background(sky);

​

  //buttons

  buttonmonth = createButton('Birth Month');

  buttonmonth.mousePressed(addMonth);

  buttonmonth.position(275, 315);

​

  buttonday = createButton('Birth Day');

  buttonday.mousePressed(addDay);

  buttonday.position(475, 315);

​

  button = createButton('Show My Zodiac');

  button.mousePressed(zodiacpick);

  button.position(350, 340)

  button.style('font-size', '15px');

​

  button.style('background-color', color(255));

  buttonmonth.style('background-color', color(255));

  buttonday.style('background-color', color(255));

  //Back Button

  backBut.show();

​

  // for bg stars

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

    stars[i].twinkle();

    stars[i].showStar();

  }

​

  //clmtraker face points

  push();

  translate(w, 0); //mirror

  scale(-1, 1); //mirror

  let positions = tracker.getCurrentPosition();

​

  //pupils

  if (positions.length > 0) {

    var leftEye = positions[27];

    var leftEyeX = leftEye[0];

    var leftEyeY = leftEye[1];

​

    fill(255);

    noStroke();

    ellipse(leftEyeX, leftEyeY, random(3, 5));

​

    var rightEye = positions[32];

    var rightEyeX = rightEye[0];

    var rightEyeY = rightEye[1];

​

    fill(255);

    noStroke();

    ellipse(rightEyeX, rightEyeY, random(3, 5));

  }

​

  //face points

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

    let xPos = positions[i][0];

    let yPos = positions[i][1];

​

    if (points.bothEyes.includes(i) === true) {

      ellipse(xPos, yPos, 2);

    } else if (points.nose.includes(i) === true) {

      ellipse(xPos, yPos, 1);

    } else if (points.mouth.includes(i) === true) {

      ellipse(xPos, yPos, 2);

    } else if (points.outline.includes(i) === true) {

      ellipse(xPos, yPos, 2);

    }

  }

  pop();

​

  //buttons

  textAlign(LEFT);

  fill(255);

  textSize(25);

  text(monthcount, 300, 300);

  fill(255);

  textSize(25);

  text(daycount, 495, 300);

​

  //zodiac image

  if (zassign == 0) {

    //for 0, 0

    textSize(45);

    text('Input', 265, 385);

    text('Your', 355, 385);

    text('Birthday', 430, 385);

  }

  if (zassign == 1) {

    //capricorn

    zodiacImage(capricorn);

  }

  if (zassign == 2) {

    //aquarius

    zodiacImage(aquarius);

  }

  if (zassign == 3) {

    //pisces

    zodiacImage(pisces);

  }

  if (zassign == 4) {

    //aries

    zodiacImage(aries);

  }

  if (zassign == 5) {

    //taurus

    zodiacImage(taurus);

  }

  if (zassign == 6) {

    //gemini

    zodiacImage(gemini);

  }

  if (zassign == 7) {

    //cancer

    zodiacImage(cancer);

  }

  if (zassign == 8) {

    //leo

    zodiacImage(leo);

  }

  if (zassign == 9) {

    //virgo

    zodiacImage(virgo);

  }

  if (zassign == 10) {

    //libra

    zodiacImage(libra);

  }

  if (zassign == 11) {

    //scorpio

    zodiacImage(scorpio);

  }

  if (zassign == 12) {

    //saggittarius

    zodiacImage(sagittarius);

  }

}

​

function cameraOnly(){

  background(sky);

   // for bg stars

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

    stars[i].twinkle();

    stars[i].showStar();

  }

​

  //clmtraker face points

  push();

  translate(w, 0); //mirror

  scale(-1, 1); //mirror

  let positions = tracker.getCurrentPosition();

  //Back Button

  backBut.show();

​

  //pupils

  if (positions.length > 0) {

    var leftEye = positions[27];

    var leftEyeX = leftEye[0];

    var leftEyeY = leftEye[1];

​

    fill(255);

    noStroke();

    ellipse(leftEyeX, leftEyeY, random(3, 5));

​

    var rightEye = positions[32];

    var rightEyeX = rightEye[0];

    var rightEyeY = rightEye[1];

​

    fill(255);

    noStroke();

    ellipse(rightEyeX, rightEyeY, random(3, 5));

  }

​

  //face points

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

    let xPos = positions[i][0];

    let yPos = positions[i][1];

​

    if (points.bothEyes.includes(i) === true) {

      ellipse(xPos, yPos, 2);

    } else if (points.nose.includes(i) === true) {

      ellipse(xPos, yPos, 1);

    } else if (points.mouth.includes(i) === true) {

      ellipse(xPos, yPos, 2);

    } else if (points.outline.includes(i) === true) {

      ellipse(xPos, yPos, 2);

    }

  }

  pop(); 

}

​

function bdayOnly(){

  background(sky);

​

  //buttons

  buttonmonth = createButton('Birth Month');

  buttonmonth.mousePressed(addMonth);

  buttonmonth.position(275, 315);

​

  buttonday = createButton('Birth Day');

  buttonday.mousePressed(addDay);

  buttonday.position(475, 315);

​

  button = createButton('Show My Zodiac');

  button.mousePressed(zodiacpick);

  button.position(350, 340)

  button.style('font-size', '15px');

​

  button.style('background-color', color(255));

  buttonmonth.style('background-color', color(255));

  buttonday.style('background-color', color(255));

​

  // for bg stars

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

    stars[i].twinkle();

    stars[i].showStar();

  }

  //Back Button

  backBut.show();

​

  //buttons

  textAlign(LEFT);

  fill(255);

  textSize(25);

  text(monthcount, 300, 300);

  fill(255);

  textSize(25);

  text(daycount, 495, 300);

​

  //zodiac image

  if (zassign == 0) {

    //for 0, 0

    textSize(45);

    text('Input', 265, 385);

    text('Your', 355, 385);

    text('Birthday', 430, 385);

  }

  if (zassign == 1) {

    //capricorn

    zodiacImage(capricorn);

  }

  if (zassign == 2) {

    //aquarius

    zodiacImage(aquarius);

  }

  if (zassign == 3) {

    //pisces

    zodiacImage(pisces);

  }

  if (zassign == 4) {

    //aries

    zodiacImage(aries);

  }

  if (zassign == 5) {

    //taurus

    zodiacImage(taurus);

  }

  if (zassign == 6) {

    //gemini

    zodiacImage(gemini);

  }

  if (zassign == 7) {

    //cancer

    zodiacImage(cancer);

  }

  if (zassign == 8) {

    //leo

    zodiacImage(leo);

  }

  if (zassign == 9) {

    //virgo

    zodiacImage(virgo);

  }

  if (zassign == 10) {

    //libra

    zodiacImage(libra);

  }

  if (zassign == 11) {

    //scorpio

    zodiacImage(scorpio);

  }

  if (zassign == 12) {

    //saggittarius

    zodiacImage(sagittarius);

  }

}

​

class Star {

  constructor(tx, ty, tc, tf, tl) {

    this.x = tx;

    this.y = ty;

    this.c = tc;

    this.f = tf;

    this.lights = tl;

  }

​

  showStar() {

    stroke(this.c);

    point(this.x, this.y);

  }

​

  twinkle() {

    if (this.c >= 255) {

      this.lights = true;

    }

    if (this.c <= 0) {

      this.lights = false;

    }

    if (this.lights) {

      this.c -= this.f

    } else {

      this.c += this.f

    }

  }

}

​

function addMonth() {

  if (monthcount < 12) {

    monthcount++

  } else {

    monthcount = 0

  }

}

​

function addDay() {

  if (daycount < 31) {

    daycount++

  } else {

    daycount = 0

  }

}

​

function zodiacImage(zodiacSign) {

  imageMode(CENTER);

  image(zodiacSign, 110, 310);

  zodiacSign.resize(150, 150);

}

​

function zodiacpick() {

  if (monthcount == 1) {

    if (daycount <= 19) {

      zassign = 1

    } else {

      zassign = 2

    }

  }

  if (monthcount == 2) {

    if (daycount <= 18) {

      zassign = 2

    } else {

      zassign = 3

    }

  }

  if (monthcount == 3) {

    if (daycount <= 20) {

      zassign = 3

    } else {

      zassign = 4

    }

  }

  if (monthcount == 4) {

    if (daycount <= 19) {

      zassign = 4

    } else {

      zassign = 5

    }

  }

  if (monthcount == 5) {

    if (daycount <= 20) {

      zassign = 5

    } else {

      zassign = 6

    }

  }

  if (monthcount == 6) {

    if (daycount <= 20) {

      zassign = 6

    } else {

      zassign = 7

    }

  }

  if (monthcount == 7) {

    if (daycount <= 22) {

      zassign = 7

    } else {

      zassign = 8

    }

  }

  if (monthcount == 8) {

    if (daycount <= 22) {

      zassign = 8

    } else {

      zassign = 9

    }

  }

  if (monthcount == 9) {

    if (daycount <= 22) {

      zassign = 9

    } else {

      zassign = 10

    }

  }

  if (monthcount == 10) {

    if (daycount <= 22) {

      zassign = 10

    } else {

      zassign = 11

    }

  }

  if (monthcount == 11) {

    if (daycount <= 21) {

      zassign = 11

    } else {

      zassign = 12

    }

  }

  if (monthcount == 12) {

    if (daycount <= 21) {

      zassign = 12

    } else {

      zassign = 1

    }

  }

}