let pulse = 255;

let left = 0;

let right = 0;

let stars = [];

let ellipseVisible = false;

let starsVisible = false;

let keyPressedOnce = false;

let showAdditionalText = false;

let mPressed = false;

​

function setup() {

  createCanvas(2000, 1300);

  textSize(34);

  createStars();

}

​

function draw() {

  background(0);

  fill(255);

  textAlign(CENTER, CENTER);

//Code that ensures that the instructions for the interaction, and the serial port appear before the ellipse and stars appear

  if (!serialActive) {

    text("PRESS SPACE TO SELECT SERIAL PORT", width / 2, height / 2);

  } else if (!ellipseVisible && !starsVisible) {

    text("LIGHTLY TOUCH YOUR FINGER TO THE PULSE SENSOR", width / 2, height / 2);

  } else if (ellipseVisible || starsVisible) {

//Responsible for making the ellipse glow     

    drawingContext.shadowBlur = 80;

    drawingContext.shadowColor = color(255);

// Maps ellipse to arduino board, making it pulse

    let ellipseSize = map(pulse, 0, 255, 10, 300);

// Determines dimensions of ellipse

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

  }

​

// Once the ellipse and stars appear, the text taking you through the interaction appears too

  if (ellipseVisible && !starsVisible) {

    text("GIVE THE SENSOR TIME TO PICK UP ON YOUR PULSE\nBUT ONCE YOU SEE YOUR HEART BEATING, ACKNOWLEDGE\nTHAT THIS PULSE IS YOU, ALIVE AND BREATHING\n\nPress 'n'", width / 2, height - 180);

  } else if (starsVisible && !keyPressedOnce) {

// ensures that the stars appear and keep moving with each frame

    moveStars();

    displayStars();

    text("YOU ARE ALIVE AND BREATHING IN THE UNIVERSE\nLOOK AT AT ALL THE STARS\nBUT SOMETIMES, THE UNIVERSE SEEMS SO BIG\n IT'S EASY TO FEEL SMALL\n\nPress 'm'", width / 2, height - 180);

  } else if (starsVisible && !showAdditionalText) {

    moveStars();

    displayStars();

    text("BUT THE UNIVERSE IS ALIVE WITH YOU TOO\n\nPress 'v'", width / 2, height - 180);

  } else if (showAdditionalText) {

    moveStars();

    displayStars();

    text("TELL YOUR FRIENDS YOU LOVE THEM\nREMEMBER TO FEEL YOUR HEARTBEAT WHEN YOU\n LOOK UP AT THE SKY, BECAUSE SOMEDAY\nYOU'LL WISH YOU COULD'VE LIVED IT ALL OVER AGAIN", width / 2, height - 180);

  }

}

​

function createStars() {

// Defines speed and number of stars

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

    let x = random(width);

    let y = random(height);

// Makes sure the stars are randomly different sizes within these constraints to give them that 'starry sky' effect

    let radius = random(1, 3);

// Defines random speed of stars within these constraints

    let speedX = random(1, 3) * (random() > 0.5 ? 1 : -1);

    let speedY = random(1, 3) * (random() > 0.5 ? 1 : -1);

    stars.push({ x, y, radius, speedX, speedY });

  }

}

​

function moveStars() {

  for (let star of stars) {

// After the speed of the stars has been defined, use moveStars to make sure they keep moving through the entire project 

    star.x += star.speedX;

    star.y += star.speedY;

​

// Makes sure stars move within the display screen

    if (star.x < 0 || star.x > width || star.y < 0 || star.y > height) {

      star.x = random(width);

      star.y = random(height);

    }

  }

}

​

// Ensures the stars never disappear with each changing slide

function displayStars() {

  noStroke();

  for (let star of stars) {

// Makes stars glow after key 'm' is pressed 

    if (mPressed) {

      fill(255, 255, 255, 180);

// Defines the size of the shadow that gives the stars their 'glow' effect

      ellipse(star.x, star.y, star.radius * 7);

      // for (i = 0; i < 100; i++) {

      //   ellipse(star.x, star.y, (star.radius * i * 1) / 20);

      // }

    }

    fill(255);

    ellipse(star.x, star.y, star.radius * 2, star.radius * 2);

  }

}

​

// My attempt to make the stars pulse, but I was okay with them simply glowing, so I never used updateStars but I kept it just in case

function updateStars() {

  let rValMapped = map(rVal, 0, 255, -0.1, 0.1);

  let pulseMapped = map(pulse, 0, 255, 1, 3);

  let pulsingFactor = map(pulse, 0, 255, 0.5, 2);

​

  for (let star of stars) {

    star.speedX += rValMapped;

    star.speedY += rValMapped;

​

    star.radius = pulseMapped * pulsingFactor;

  }

}

​

​

// These are all the instructions so that the project knows to move to the next slide when certain kets are pressed

function keyPressed() {

  if (key == " " && !serialActive) {

    setUpSerial();

  } else if (key == "n" && ellipseVisible && !starsVisible) {

    starsVisible = true;

  } else if (key == "m" && starsVisible && !mPressed) {

    keyPressedOnce = true;

    mPressed = true;

  } else if (key == "m" && starsVisible && mPressed) {

    mPressed = false;

  } else if (key == "v" && starsVisible && keyPressedOnce) {

    showAdditionalText = true;

//Code that allows one to exit our of and enter fullscreen by pressing the key 'f'

  } else if (key == "f") {

    if (!fullscreen()) {

      fullscreen(true);

    } else {

      fullscreen(false);

    }

  }

}

​

// How P5JS knows to read from Arduino in order to give the ellipse the pulse

function readSerial(data) {

  if (data != null) {

    let fromArduino = split(trim(data), ",");

    if (fromArduino.length == 2) {

      rVal = fromArduino[0];

//The pulse from Arduino that P5JS was able to read to make the ellipse pulse

      pulse = fromArduino[1];

    }

​

    let sendToArduino = left + "," + right + "\n";

    writeSerial(sendToArduino);

// If a pulse greater than 0 is detected from the sensor and the ellipse is visible, then the pulsing begins

    if (pulse > 0 && !ellipseVisible) {

      ellipseVisible = true;

    }

  }

}

​

​

// Ensures stars and ellipse stay visible when mouse is pressed 

function mousePressed() {

  if (!starsVisible && ellipseVisible) {

    keyPressedOnce = true;

    starsVisible = true;

  }

}

​