Interactive Media Spring 2023 - Final Project

Irem Naz Celen, 11 May 2023

Title: "Journey"

*/

​

//function pre-loads the audio, videos, images and font that will be used in each tile and sketch script

function preload() {

  //loading the font

  myFont = loadFont("font.ttf");

​

  //tile 1 information

  paper = loadImage("paper.png");

  library = loadImage("library.jpg");

​

  //tile 2 information

  waltz = loadSound("CemKaracaWaltz.mp3");

  spotify = loadImage("spotify.png");

​

  //tile 3 information

  reel = createVideo("reelR.mp4");

  short = createVideo("shorterV.mp4");

  phone = loadImage("phone.png");

​

  //tile 4 information

  sky = loadImage("sky.jpeg");

  star = loadImage("mainstar.png");

  starry = loadImage("littleprincestars.png");

  moon = loadImage("moon.png");

  woman = loadImage("woman.png");

​

  //tile 5 information

  beach = createVideo("beach.mp4");

  sound = loadSound("circles.mp3");

}

​

//videos are set up to play when they are loaded 

//pre-cautins to stop and hide video information

function setup() {

  createCanvas(windowWidth, windowHeight);

  short.hide();

  short.stop();

  reel.hide();

  reel.stop();

  beach.hide();

  beach.stop();

}

​

//program selector variable

let selector = 0;

//the transition arc length counter in relation to step

let step = 1;

//arc length variable

let loc;

//hue of the range transition in the transition pages 

let hueLoad = 0;

​

let dataTile1, dataTile2, dataTile3, dataTile4, dataTile5;

​

//tile selection issue controller w/o arduino

let tileSelector = 0;

​

function draw() {

  //arc length end point assigned

  loc = -HALF_PI + ((step - 1) * (2 * PI)) / 5;

  //program runner is as follows

  switch (selector) {

    case 0:

      //main page, the journey option should be chosen

      prompt();

      //if force detection is felt on the 1st tile

      if (dataTile1 > 100) selector = 1;

      break;

    case 1:

      //tile 1 is run

      tile1Function();

      //transition controller

      if (tileSelector < 200) tileSelector++;

      break;

    case 2:

      //transition length controller

      if (tileSelector < 400) {

        step = 2;

        Transition();

        //increment the counter

        tileSelector++;

        hueLoad++;

        textFont(myFont, 50);

        strokeWeight(1);

        stroke(0);

        fill(0);

        textAlign(CENTER, TOP);

        //directions given

        text("Listen or Take a Step", width / 2, (13 * height) / 15);

      } else {

        //hueload is reset after each tansition page

        hueLoad = 0;

        //2nd tile event is called

        tile2Function();

      }

      break;

    case 3:

      if (tileSelector < 600) {

        step = 3;

        Transition();

        //transition length control

        tileSelector++;

        //change of hue during the transition page

        hueLoad++;

        //directions

        textFont(myFont, 50);

        strokeWeight(1);

        stroke(0);

        fill(0);

        textAlign(CENTER, TOP);

        text("Watch or Take a Step", width / 2, (13 * height) / 15);

      } else {

        hueLoad = 0;

        //3rd tile event is called

        tile3Function();

      }

​

      break;

    case 4:

      if (tileSelector < 800) {

        //arc length is updated 4/5 of a circle

        step = 4;

        Transition();

        tileSelector++;

        hueLoad++;

        //directions are given

        textFont(myFont, 50);

        strokeWeight(1);

        stroke(0);

        fill(0);

        textAlign(CENTER, TOP);

        text("Jump or Take a Step", width / 2, (13 * height) / 15);

      } else {

        hueLoad = 0;

        //4th tile event is called

        tile4Function();

      }

      break;

    case 5:

      if (tileSelector < 1000) {

        //a full cycle is completed

        step = 5;

        Transition();

        tileSelector++;

        hueLoad++;

        //directions are given

        textFont(myFont, 50);

        strokeWeight(1);

        stroke(0);

        fill(0);

        textAlign(CENTER, TOP);

        text("Reflect or Take a Step", width / 2, (13 * height) / 15);

      } else {

        hueLoad = 0;

        //5th tile event is run

        tile5Function();

      }

      break;

    case 6:

      //end page is called

      endPage();

      break;

  }

}

​

//main screen

function prompt() {

  //background color hue created

  let n;

  //red

  let colordown = color(255, 100, 91);

  //yellow

  let colorup = color(255, 180, 40);

  for (let y = 0; y < height + 10; y += 5) {

    n = map(y, 0, height, 0, 1);

    //red to yellow

    let newcolor = lerpColor(colorup, colordown, n);

    stroke(newcolor);

    strokeWeight(100);

    //background gradient is created

    line(0, y, width, y);

  }

​

  //the journey cycle created bolds up when hovered above

  let circStroke = 60;

  let circRad = height / 4;

  let distanceCirc = dist(width / 2, height / 2, mouseX, mouseY);

​

  //detects hovering on the cycle

  if (

    distanceCirc > circRad - circStroke / 2 &&

    circRad + circStroke / 2 > distanceCirc

  ) {

    noFill();

    stroke(0, 255);

    strokeWeight(circStroke);

    circle(width / 2, height / 2, 2 * circRad);

    strokeWeight(1);

    fill(0);

    textFont(myFont, 60);

    textAlign(CENTER);

    text("Journey", width / 2, height / 10);

    if (mouseIsPressed === true) {

      selector = 1;

    }

  }

  //no movement of the mouse on the screen case is a lighter cycle image

  else {

    noFill();

    stroke(0, 255);

    strokeWeight(circStroke);

    stroke(0, 110);

    circle(width / 2, height / 2, 2 * circRad);

    noStroke();

    fill(0, 110);

  }

}

​

//variables for the change of color direction in the transition pages

let colorEnd;

let colorStart;

​

function Transition() {

  //the start and end color for the transition pages for each tile/step

  if (step == 2) {

    colorStart = color(255, 187, 57);

    colorEnd = color(225, 246, 255);

  } else if (step == 3) {

    colorStart = color(225, 246, 255);

    colorEnd = color(31, 141, 186);

  } else if (step == 4) {

    colorStart = color(31, 141, 186);

    colorEnd = color(228, 83, 112);

  } else if (step == 5) {

    colorStart = color(228, 83, 112);

    colorEnd = color(25, 25, 112);

  }

  //creating the said colored backgrounds

  background(255, 133, 91);

  background(lerpColor(colorStart, colorEnd, map(hueLoad, 0, 200, 0, 1)));

  noFill();

  let circleRad = height / 4;

​

  strokeWeight(70);

  stroke(190, 80);

  arc(

    width / 2,

    height / 2,

    2 * circleRad,

    2 * circleRad,

    -HALF_PI,

    -HALF_PI + (step * (2 * PI)) / 5

  );

​

  strokeWeight(60);

  stroke(0);

  //progress on the circle is shown

  arc(

    width / 2,

    height / 2,

    2 * circleRad,

    2 * circleRad,

    -HALF_PI,

    -HALF_PI + (step * (2 * PI)) / 5

  );

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

function keyPressed() {

  if (keyCode == 32) {

    // important to have in order to start the serial connection!!

    setUpSerial();

  }

  if (keyCode == 49) selector = 1;

  if (keyCode == 50) selector = 2;

  if (keyCode == 51) {

    waltz.stop();

    selector = 3;

  }

  if (keyCode == 52) selector = 4;

  if (keyCode == 53) selector = 5;

  if (keyCode == 54) selector = 6;

}

​

// Reads feom Arduino

function readSerial(data) {

​

  if (data != null) {

    // when there is an actual message, receive and split the message

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

    // if the right length, then proceed and assign one by one to variables

    if (fromArduino.length == 5) {

      dataTile1 = fromArduino[0];

      dataTile2 = fromArduino[1];

      dataTile3 = fromArduino[2];

      dataTile4 = fromArduino[3];

      dataTile5 = fromArduino[4];

      print(

        dataTile1 +

          " " +

          dataTile2 +

          " " +

          dataTile3 +

          " " +

          dataTile4 +

          " " +

          dataTile5 +

          "\n"

      );

    }

  }

}

​

//the 2 counters for popping up different texts in the ending page

let completion = 0;

let completion2 = 0;

​

function endPage() {

  background(0);

  noFill();

  stroke(255);

  strokeWeight(60);

  //arc slowly makes a full circle

  arc(

    width / 2,

    height / 2,

    height / 2,

    height / 2,

    -HALF_PI,

    -HALF_PI + completion

  );

  //according to arc length counter 

  if (completion < 2 * PI - 0.1) {

    completion += 0.01;

  } 

  //according to plain numeric counter

  else if (completion2 < 450) {

    completion2++;

    //plain numeric counter printing out a 2 part ending statement 

    if (completion2 > 1) {

      textFont(myFont, 40);

      strokeWeight(1);

      stroke(255);

      fill(255);

      textAlign(CENTER, TOP);

      //1st part is prompted

      text(

        "You completed your hero's journey, one out of many.",

        width / 2,

        height / 15

      );

    }

    if (completion2 > 150) {

      textAlign(CENTER, TOP);

      textFont(myFont, 30);

      //2nd part is prompted

      text(

        "Knowledge, Joy of Living, Distraction, Effort and Reward, Contemplation.",

        width / 2,

        (13 * height) / 15

      );

    }

  } 

  //according to plain numeric counter

  else {

    completion2++;

    if (completion2 < 950) {

      textFont(myFont, 50);

      strokeWeight(1);

      stroke(255);

      fill(255);

      textAlign(CENTER, TOP);

      //3rd part is prompted

      text(

        "Making a whole circle. We all are. Making circles.",

        width / 2,

        height / 15

      );

      noFill();

      stroke(255);

      strokeWeight(60);

      circle(width / 2, height / 2, height / 2);

      //plenty connecting/intersecting circles are printed

      if (completion2 > 750) {

        noFill();

        stroke(255);

        strokeWeight(60);

        circle(width / 2 - height / 4, height / 2, height / 2);

        circle(width / 2 + height / 4, height / 2, height / 2);

        circle(width / 2 - height / 2, height / 2, height / 2);

        circle(width / 2 + height / 2, height / 2, height / 2);

      }

    } 

  }

}

​