// IIM Final Project Professor Shiloh

// December 13, 2022

​

// Description: A program that allows the user to interact with the Demogorgon's head from Stranger Things! Here we give the user an introduction to what they are dealing with and allow them to choose how they interact with it using Arduino.

​

let gameState = "start";

​

let font1;

let font2;

let font3;

let themeSong;

let coinGifLoad;

let coinSlot;

​

let selectionType;

​

var i = 0; // for flickering start screen

​

const serial = new p5.WebSerial();

let portButton;

let inData; // incoming serial data

let led = 0;

​

function preload() {

  coinGifLoad = loadImage("coin.gif");

  coinSlot = loadImage("coinSlot.png");

  elevenImg = loadImage("eleven-removebg-preview.png");

  vecnaImg = loadImage("vecna-removebg-preview.png");

  demoImg = loadImage("demogorgonback.jpg");

​

  font1 = loadFont("Benguiat.ttf");

  font2 = loadFont("Play-Regular.ttf");

  font3 = loadFont("PressStart2P-Regular.ttf");

​

  themeSong = loadSound("themesong.mp3");

  demoSound = loadSound("Stranger-Things-Demogorgon-Roar.mp3");

}

​

function setup() {

  // fullscreen

  createCanvas(windowWidth, windowHeight);

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

​

  // themeSong.loop();

  // themeSong.setVolume(0.6);

​

  noCursor();

​

  startScreen();

​

  // check to see if serial is available:

  if (!navigator.serial) {

    alert("WebSerial is not supported in this browser. Try Chrome or MS Edge.");

  }

​

  // if serial is available, add connect/disconnect listeners:

  navigator.serial.addEventListener("connect", portConnect);

  navigator.serial.addEventListener("disconnect", portDisconnect);

​

  // check for any ports that are available:

  serial.getPorts();

​

  // if there's no port chosen, choose one:

  serial.on("noport", makePortButton);

​

  // open whatever port is available:

  serial.on("portavailable", openPort);

​

  // handle serial errors:

  serial.on("requesterror", portError);

​

  // handle any incoming serial data:

  serial.on("data", serialEvent);

  serial.on("close", makePortButton);

}

​

function draw() {

  if (gameState == "start") {

    startScreen();

  } else if (gameState == "play") {

    instructionScreen();

  } else if (gameState == "end") {

    interactiveScreen();

  }

}

​

function makePortButton() {

  // create and positionOfBall a port chooser button:

  portButton = createButton("choose port");

  portButton.position(10, 10);

  // give the port button a mousepressed handler:

  portButton.mousePressed(choosePort);

}

​

// make the port selector window appear:

function choosePort() {

  if (portButton) portButton.show();

  serial.requestPort();

}

​

// open the selected port, and make the port

// button invisible:

function openPort() {

  // wait for the serial.open promise to return,

  // then call the initiateSerial function

  serial.open().then(initiateSerial);

​

  // once the port opens, let the user know:

  function initiateSerial() {

    console.log("port open");

  }

  // hide the port button once a port is chosen:

  if (portButton) portButton.hide();

}

​

// pop up an alert if there's a port error:

function portError(err) {

  alert("Serial port error: " + err);

}

​

// try to connect if a new serial port

// gets added (i.e. plugged in via USB):

function portConnect() {

  console.log("port connected");

  serial.getPorts();

}

​

function startScreen() {

  background(0);

  themeSong.loop();

  themeSong.setVolume(0.4);

​

  noFill();

  stroke("#FF0000");

  strokeWeight(2);

​

  textSize(50);

  textFont(font1);

​

  glow(color("#FF0000"), 20);

  text("INTERACTIVE", width / 2, height / 2 - 100);

  text("DEMOGORGON", width / 2 - 20, height / 2 - 50);

  glow(color("#FF0000"), 20);

  text("INTERACTIVE", width / 2, height / 2 - 100);

  text("DEMOGORGON", width / 2 - 20, height / 2 - 50);

​

  push();

  textSize(25);

  strokeWeight(1);

  glow(color("#FF0000"), 5);

  text("FROM", width / 2 + 150, height / 2 + 10);

  glow(color("#FF0000"), 10);

  text("FROM", width / 2 + 150, height / 2 + 10);

  pop();

​

  glow(color("#FF0000"), 20);

  text("STRANGER", width / 2 + 20, height / 2 + 100);

  text("THINGS", width / 2 + 80, height / 2 + 150);

  glow(color("#FF0000"), 20);

  text("STRANGER", width / 2 + 20, height / 2 + 100);

  text("THINGS", width / 2 + 80, height / 2 + 150);

 //for flash

  push();

  i = i + 1;

  if (i % 10 === 0) {

    stroke("#FFFFFF");

    rectMode(CENTER);

    glow(color("#FFFFFF"), 30);

    // fill with 50

    fill("#FFFFFF");

    rect(width / 2 + 200, height / 2 + 200, 300, 50);

  } else {

    // all the other times, fill with 255

    stroke("#FFFFFF");

    rectMode(CENTER);

    glow(color("#FFFFFF"), 30);

    fill(0);

    rect(width / 2 + 200, height / 2 + 200, 300, 50);

  }

​

  // stroke("#FFFFFF");

  // rectMode(CENTER);

  // glow(color("#FFFFFF"), 30);

  // rect(300, 500, 300, 50);

​

  textSize(20);

  glow(color("#FFFFFF"), 30);

  text("Insert Coin to Start", width / 2 + 90, height / 2 + 200);

  // image(coinSlot, 450, 452, 100, 100)

  pop();

​

  image(coinGifLoad, mouseX, mouseY, 50, 50);

​

  if (mouseIsPressed === true) {

    gameState = "play";

  }

}

​

//neon affect

function glow(glowColor, blurriness) {

  drawingContext.shadowBlur = blurriness;

  drawingContext.shadowColor = glowColor;

}

​

function instructionScreen() {

  background(0);

​

  image(elevenImg, width / 2 - 600, height / 2 + 100, 300, 300);

  image(vecnaImg, width / 2 + 500, height / 2 + 100, 400, 300);

​

  let introductionText =

    "Welcome. Today you will be able to interact with a Demogorgon's head. A Demogorgon is a monster that originated from the parallel dimension known as the Upside Down. It terrorizes local population as it hunts and kidnaps anyone it comes across with. This Demogorgon was captured by Eleven and is currently being studied. Here, you are able to come face to face with it without the fear of being dragged into the Upside Down. Enjoy. Don't forget to stay safe... just in case.";

​

  textFont(font3);

  textSize(30);

  text("Introduction", width / 2 - 50, height / 2 - 150);

  textSize(25);

  textFont(font2);

  text(introductionText, width / 2 - 150, height / 2 - 100, 600, 400);

  textFont(font3);

  textSize(18);

  text(

    "Press (Up) to play as Eleven, the protagonist",

    width / 2 - 200,

    height / 2 + 250

  );

  text(

    "...or (Down) to play as Vecna, the Mindflayer's evil General !",

    width / 2,

    height / 2 + 300

  );

  text("Press Enter to enter fullscreen mode", 30, 30);

  //the following code is to determine slection type based on what characters the player wants to play as, which will be recorded and transmitted

  text(inData, 30, 30, 30, 30);

  if (keyCode == UP_ARROW) {

    selectionType = 1;

    print("Up");

  } else if (keyCode == DOWN_ARROW) {

    selectionType = 2;

    print("Down");

  }

}

​

function keyPressed() {

  if (keyCode === ENTER) {

    let fs = fullscreen();

    fullscreen(!fs);

  }

}

​

function serialEvent() {

  inData = Number(serial.read());

  //if the player selects Eleven

  if (selectionType == 1) {

    serial.write(1);

  }

  //if the player selects Vecna

  else if (selectionType == 2) {

    serial.write(2);

  }

}

​

// if a port is disconnected:

function portDisconnect() {

  serial.close();

  console.log("port disconnected");

}

​

function closePort() {

  serial.close();

}

​