​

Olivia Paolini > Email: orpaolin@buffalo.edu

​

DMS 121 Basic Digital Arts / Bernard Dolecki / University at Buffalo / 2020

​

This project is inspired by nostalgic fortune teller games from my childhood; hand made paper fortune tellers or even quizzes from Buzzfeed. This is a parody of that structure where arbitrary inputs are taken and used to generate an outlandish fortune. It's an interactive experience that allows the user to actually listen to their choices before making their decisions.

​

Web Sources:

​

Post from Zeeshan Adil to help embed a link onto the page  > https://stackoverflow.com/questions/41476575/creating-a-text-link-using-p5-js

​

Video from Dan Shiffman to help with rotation of 3D objects > https://www.youtube.com/watch?v=6TPVoB4uQCU&t=291s

​

Full screen > https://editor.p5js.org/LivPaolini/full/pBbPfrblg

​

*/

​

//images

var gecs;

var gloria;

var drunkII;

var john;

var tig;

var nate;

var mark;

var bluff;

var charli;

var alex;

var AG;

var alvvays;

var rihanna;

var pang;

var firstWord;

​

//songs

var gloriaSong;

var drunkIISong;

var gecsSong;

var alexSong;

var AGSong;

var alvvaysSong;

var rihannaSong;

var pangSong;

var bluffSong;

var charliSong;

var introNoise;

​

​

//standup

var johnClip;

var tigClip;

var nateClip;

var markClip;

​

//other variables 

var scene = 0;

let pixeled;

var sceneCounter = 0; // scene counter allows the user to click in the same spot. I got this code from Bernard, the scene resets at each new scene so that the click is registered uniquely every time.

​

function preload() {

  soundFormats('mp3');

  pixeled = loadFont('assets/Pixeled.ttf');

​

​

  // Songs

  gloriaSong = createAudio('audioAssets/gloria.mp3');

  drunkIISong = createAudio('audioAssets/drunkII.mp3');

  gecsSong = createAudio('audioAssets/100gecs.mp3');

  bluffSong = createAudio('audioAssets/bluff.mp3');

  charliSong = createAudio('audioAssets/charliSong.mp3');

  alexSong = createAudio('audioAssets/alexSong.mp3');

  introNoise = createAudio('audioAssets/introNoise.mp3')

  AGSong = createAudio('audioAssets/2021.mp3');

  alvvaysSong = createAudio('audioAssets/alvvaysSong.mp3');

  rihannaSong = createAudio('audioAssets/rihannaSong.mp3');

  pangSong = createAudio('audioAssets/pangSong.mp3');

​

  // Stand Up 

  johnClip = createAudio('audioAssets/johnstandup.mp3');

  tigClip = createAudio('audioAssets/tigstandup.mp3');

  markClip = createAudio('audioAssets/markstandup.mp3');

  nateClip = createAudio('audioAssets/natestandup.mp3');

​

  // Images

  pang = loadImage('assets/pang.png');

  rihanna = loadImage('assets/rihanna.png');

  alvvays = loadImage('assets/alvvays.png');

  AG = loadImage('assets/AGcook.png');

  alex = loadImage('assets/alex.png');

  charli = loadImage('assets/charli.png');

  bluff = loadImage('assets/bluff.png');

  mark = loadImage('assets/mark.png');

  nate = loadImage('assets/nate.png');

  tig = loadImage('assets/tig.png');

  drunkII = loadImage('assets/drunkIIcover.png');

  john = loadImage('assets/john.png');

  gloria = loadImage('assets/gloriacover.png');

  gecs = loadImage('assets/gecs.png');

  firstWord = loadImage('assets/firstWord.png');

​

} // END PRELOAD

​

​

function title() {

  frameRate(2);

  fill(random(0, 255), random(0, 255), random(0, 255));

  textSize(27);

  text('HOW TO PLAY', -290, -250);

  text('BACK TO BEGINNING', -200, 250);

  textSize(20);

  text('pick again. which is better?', -290, -200);

}

​

function titleHovered() {

  frameRate(2);

  fill(255, 100, 255);

  textSize(27);

  text('HOW TO PLAY', -290, -250);

  text('BACK TO BEGINNING', -200, 250);

  textSize(20);

  text('pick again. which is better?', -290, -200);

}

​

function fortune() {

  frameRate(2);

  fill(random(0, 255), random(0, 255), random(0, 255));

  textSize(27);

  text('FATE MAKER', -290, -250);

  textSize(20);

  text('click here to claim prize', -200, 220);

  text('or', -20, 245);

  text('try again for another fortune', -260, 270);

  text('here is your fortune', -290, -200);

​

}

​

// these ^ 3 functions help me trim down the length of my code. Instead of writing all this text on each scene, I can just call title(); or fortune(); and it will show up 

​

​

function setup() {

  createCanvas(600, 600, WEBGL);

  textFont(pixeled);

}

​

​

function draw() {

  sceneCounter = sceneCounter + 1 

  background(0);

​

  if (scene == 0) { //FRONT PAGE. I implemented a landing page to fix a problem I was having where the first two songs wouldn't play in full screen. I still don't know what caused the problem but this page has been fixing the problem and allowing the songs to load properly

    frameRate(2);

    fill(random(0, 255), random(0, 255), random(0, 255));

    textSize(21);

    text('CLICK ICON TO BEGIN THE JOURNEY', -280, -150);

    text('!FLASH WARNING!', -160, 250);

​

    if (mouseX > 160 && mouseX < 400 && mouseY > 230 && mouseY < 440) {

      frameRate(50);

      translate(-10, 40, -140);

      rotateX(45);

      rotateY(frameCount * 0.01);

      texture(firstWord);

      box(250, 250, 250);

      textSize(22);

      textLeading(30);

    } else {

      texture(firstWord);

      translate(-10, 40, -140);

      box(100, 100, 100);

    }

  } //END SCENE 0

​

​

// SCENE 1

  if (scene == 1) { //opening page

    push();

    frameRate(2);

    fill(random(0, 255), random(0, 255), random(0, 255));

    textSize(27);

    text('HOW TO PLAY', -290, -250);

    text('!FLASH WARNING!', -180, 250);

    textSize(20);

    text('1 - hover on song cover to play', -290, -200);

    text('2 - click on the song you prefer', -290, -150);

    pop();

​

​

    if (mouseX > 50 && mouseX < 260 && mouseY > 210 && mouseY < 385) {

​

      push();

      fill(255, 100, 255);

      textSize(27);

      text('HOW TO PLAY', -290, -250);

      text('!FLASH WARNING!', -180, 250);

      textSize(20);

      text('1 - hover on song cover to play', -290, -200);

      text('2 - click on the song you prefer', -290, -150);

      fill(random(0, 255), random(0, 255), random(0, 255));

      frameRate(50);

      text('GLORIA', -250, 170);

      translate(-80, 0, 200);

      noStroke();

      rotateX(45);

      rotateY(frameCount * 0.01);

      texture(gloria);

      box(90, 90, 90);

      gloriaSong.loop();

      pop();

    } else {

      push();

      noStroke();

      texture(gloria);

      translate(-80, 0, 200);

      box(90, 90, 90);

      gloriaSong.pause();

      pop();

    }

​

    if (mouseX > 320 && mouseX < 580 && mouseY > 210 && mouseY < 385) {

​

      push();

      fill(255, 100, 255);

      textSize(27);

      text('HOW TO PLAY', -290, -250);

      text('!FLASH WARNING!', -180, 250);

      textSize(20);

      text('1 - hover on song cover to play', -290, -200);

      text('2 - click on the song you prefer', -290, -150);

      fill(random(0, 255), random(0, 255), random(0, 255));

      textSize(20);

      frameRate(50);

      text('DRUNK II', 20, 170);

      translate(80, 0, 200);

      noStroke()

      rotateX(45);

      rotateY(frameCount * 0.01);

      texture(drunkII);

      box(90, 90, 90);

      drunkIISong.loop();

      pop();

    } else {

      push();

      noStroke();

      texture(drunkII);

      translate(80, 0, 200);

      box(90, 90, 90);

      drunkIISong.pause();

      pop();

    }

  } //end scene 1

​

// Pages with audio (besides scenes 0 and 1) will follow this basic format seen in scene 11 below. I call "title();" and "titleHovered();" for the top and bottom text. ".stop();" pauses the songs from the previous scenes so they don't bleed over each other. The boxes rotate at a 45 degree angle and spin slower than the scene's frame count. 

​

  // SCENE 11: STAND UP COMEDY 

  if (scene == 11) {

    gloriaSong.stop();

    title();

​

​

    if (mouseX > 50 && mouseX < 260 && mouseY > 210 && mouseY < 385) {

​

      push();

      titleHovered();

      fill(random(0, 255), random(0, 255), random(0, 255));

      textSize(20);

      frameRate(60);

      text('JOHN MULANEY', -250, 170);

      translate(-80, 0, 200);

      noStroke();

      rotateX(45);

      rotateY(frameCount * 0.01);

      texture(john);

      box(90, 90, 90);

      johnClip.loop();

      pop();

    } else {

      push();

      translate(-80, 0, 200)

      texture(john);

      box(90, 90, 90);

      johnClip.pause();

      pop();

​

    }

    if (mouseX > 320 && mouseX < 580 && mouseY > 210 && mouseY < 385) {

      push();

      titleHovered();

      fill(random(0, 255), random(0, 255), random(0, 255));

      textSize(20);

      frameRate(50);

      text('TIG NOTARO', 20, 170);

      translate(80, 0, 200);

      noStroke()

      rotateX(45);

      rotateY(frameCount * 0.01);

      texture(tig);

      box(90, 90, 90);

      tigClip.loop();

      pop();

​

    } else {

      push();

      translate(80, 0, 200)

      texture(tig);

      box(90, 90, 90);

      tigClip.pause();

      pop();

    }

  } //end scene 11

​

​

​

  // SCENE 12; STAND UP COMEDY

  if (scene == 12) { // page 2A-

​

    drunkIISong.stop();

    title();

​

    if (mouseX > 50 && mouseX < 260 && mouseY > 210 && mouseY < 385) {

      push();

      titleHovered();

      fill(random(0, 255), random(0, 255), random(0, 255));

      textSize(20);

      frameRate(60);

      text('NATE BARGATZE', -250, 170);

      translate(-80, 0, 200);

      noStroke();

      rotateX(45);

      rotateY(frameCount * 0.01);

      texture(nate);

      box(90, 90, 90);

      nateClip.loop();

      pop();

    } else {

      push();

      translate(-80, 0, 200)

      texture(nate);

      box(90, 90, 90);

      nateClip.pause();

      pop();

    }

​

​

    if (mouseX > 320 && mouseX < 580 && mouseY > 210 && mouseY < 385) {

      push();

      titleHovered();

      fill(random(0, 255), random(0, 255), random(0, 255));

      textSize(20);

      frameRate(50);

      text('MARK NORMAND', 20, 170);

      translate(80, 0, 200);

      noStroke()

      rotateX(45);

      rotateY(frameCount * 0.01);

      texture(mark);

      box(90, 90, 90);

      markClip.loop();

      pop();

​

    } else {

      push();

      translate(80, 0, 200)

      texture(mark);

      box(90, 90, 90);

      markClip.pause();

      pop();

    }

  } //end scene 12

​

​

​

  // SCENE 21: SONGS

  if (scene == 21) { // page 2A-

    johnClip.stop();

    title();

​

    if (mouseX > 50 && mouseX < 260 && mouseY > 210 && mouseY < 385) {

      push();

      titleHovered();

      fill(random(0, 255), random(0, 255), random(0, 255));

      textSize(20);

      frameRate(60);

      text('BLUFF', -250, 170);

​

      translate(-80, 0, 200);

      noStroke();

      rotateX(45);

      rotateY(frameCount * 0.01);

      texture(bluff);

      box(90, 90, 90);

      bluffSong.loop();

      pop();

    } else {

      push();

      translate(-80, 0, 200)

      texture(bluff);

      box(90, 90, 90);

      bluffSong.pause();

      pop();

​

    }

​

    if (mouseX > 320 && mouseX < 580 && mouseY > 210 && mouseY < 385) {

      push();

      titleHovered();

      fill(random(0, 255), random(0, 255), random(0, 255));

      textSize(20);

      frameRate(50);

      text('UNLOCK IT', 20, 170);

      translate(80, 0, 200);

      noStroke()

      rotateX(45);

      rotateY(frameCount * 0.01);

      texture(charli);

      box(90, 90, 90);

      charliSong.loop();

      pop();

​

    } else {

​

      push();

      translate(80, 0, 200)

      texture(charli);

      box(90, 90, 90);

      charliSong.pause();

      pop();

​

    }

  } //end scene 21

​

​

​

  // SCENE 22: SONGS

  if (scene == 22) { // page 2A-

​

    tigClip.stop();

    title();

​

    if (mouseX > 50 && mouseX < 260 && mouseY > 210 && mouseY < 385) {

      push();

      titleHovered();

      fill(random(0, 255), random(0, 255), random(0, 255));

      textSize(20);

      frameRate(60);

      text('OTHER LADIES', -250, 170);

​

      translate(-80, 0, 200);

      noStroke();

      rotateX(45);

      rotateY(frameCount * 0.01);

      texture(alex);

      box(90, 90, 90);

      alexSong.loop();

      pop();

    } else {

      push();

      translate(-80, 0, 200)

      texture(alex);

      box(90, 90, 90);

      alexSong.pause();

      pop();

​

    }

​

    if (mouseX > 320 && mouseX < 580 && mouseY > 210 && mouseY < 385) {

      push();

      titleHovered();

      fill(random(0, 255), random(0, 255), random(0, 255));

      textSize(20);

      frameRate(50);

      text('2021', 20, 170);

      translate(80, 0, 200);

      noStroke()

      rotateX(45);

      rotateY(frameCount * 0.01);

      texture(AG);

      box(90, 90, 90);

      AGSong.loop();

      pop();

    } else {

      push();

      translate(80, 0, 200)

      texture(AG);

      box(90, 90, 90);

      AGSong.pause();

      pop();

    }

​

  } //end scene 22

​

​

​

  // SCENE 23: SONGS

  if (scene == 23) { // page 2A-

​

    nateClip.stop();

    title();

​

    if (mouseX > 50 && mouseX < 260 && mouseY > 210 && mouseY < 385) {

      push();

      titleHovered();

      fill(random(0, 255), random(0, 255), random(0, 255));

      textSize(20);

      frameRate(60);

      text('UNDERTOW', -250, 170);

​

      translate(-80, 0, 200);

      noStroke();

      rotateX(45);

      rotateY(frameCount * 0.01);

      texture(alvvays);

      box(90, 90, 90);

      alvvaysSong.loop();

      pop();

    } else {

      push();

      translate(-80, 0, 200)

      texture(alvvays);

      box(90, 90, 90);

      alvvaysSong.pause();

      pop();

​

    }

​

​

    if (mouseX > 320 && mouseX < 580 && mouseY > 210 && mouseY < 385) {

      push();

      titleHovered();

      fill(random(0, 255), random(0, 255), random(0, 255));

      textSize(20);

      frameRate(50);

      text('SAME OL MISTAKES', 0, 170);

      translate(80, 0, 200);

      noStroke()

      rotateX(45);

      rotateY(frameCount * 0.01);

      texture(rihanna);

      box(90, 90, 90);

      rihannaSong.loop();

      pop();

​

    } else {

​

      push();

      translate(80, 0, 200);

      texture(rihanna);

      box(90, 90, 90);

      rihannaSong.pause();

      pop();

    }

  } //end scene 23

​

​

​

  // SCENE 24: SONGS

  if (scene == 24) { // page 2A-

​

    markClip.stop();

    title();

​

    if (mouseX > 50 && mouseX < 260 && mouseY > 210 && mouseY < 385) {

      push();

      titleHovered();

      fill(random(0, 255), random(0, 255), random(0, 255));

      textSize(20);

      frameRate(60);

      text('TORTURE ME', -250, 170);

      translate(-80, 0, 200);

      noStroke();

      rotateX(45);

      rotateY(frameCount * 0.01);

      texture(gecs);

      box(90, 90, 90);

      gecsSong.loop();

      pop();

    } else {

      push();

      translate(-80, 0, 200)

      texture(gecs);

      box(90, 90, 90);

      gecsSong.pause();

      pop();

​

    }

​

​

    if (mouseX > 320 && mouseX < 580 && mouseY > 210 && mouseY < 385) {

      push();

      titleHovered();

      fill(random(0, 255), random(0, 255), random(0, 255));

      textSize(20);

      frameRate(50);

      text('HIT ME WHERE IT HURTS', -80, 170);

      translate(80, 0, 200);

      noStroke()

      rotateX(45);

      rotateY(frameCount * 0.01);

      texture(pang);

      box(90, 90, 90);

      pangSong.loop();

      pop();

​

    } else {

​

      push();

      translate(80, 0, 200)

      texture(pang);

      box(90, 90, 90);

      pangSong.pause();

      pop();

​

    }

​

  } // end scene 24

​

​

  // FORTUNE PAGES START HERE 

  // On the fortune pages, I use the "fortune();" function to generate the top and bottom text on the scene. I also use the "hour()" function to decide which fortune will be displayed for each page. There are 16 total fortunes, 2 assigned to each page. If the clock on your computer reads less than 5pm, you will get the first fortune. Equal to or later, you'll get the second.

​

  // SCENE 31

  if (scene == 31) { // page 2A-

​

    bluffSong.stop();

    fortune();

    push();

​

    if (hour() < 17) {

​

      textLeading(40);

      fill(200, 100, 200);

      text('You are very dependable. But that wont last long! In 3 months, you will become a chronically late person. No matter how hard you try, you will be late for everything. Don’t fight it, just let it run its course.', -240, -180, 500, 400); // Text wraps within text box 

    }

​

    if (hour() >= 17)  {

​

      fill(200, 100, 200);

      textLeading(40);

      text(' Have you ever considered getting into croquet? Because according to my sources, you’ll be really good at it. There may even be some money in your future if you choose to pick it up, and croquet money is next level.', -240, -180, 500, 400);

​

    }

    pop();

​

​

  } // END SCENE 31

​

​

​

  // SCENE 32

  if (scene == 32) { // page 2A-

    fortune();

    charliSong.pause();

​

    push();

​

    if (hour() < 17) {

​

      textLeading(40);

      fill(200, 100, 200);

      text('oh my god? You’re such a bad driver! But dont worry, thats a good thing! It means you’re totally the life of the party. That person you’re interested in? Ask them out, they WILL NOT say yes, but the rejection will humble you and you need that.', -240, -200, 500, 400); // Text wraps within text box 

​

    }

​

    if (hour() >= 17) {

​

      fill(200, 100, 200);

      textLeading(40);

      text('Your favorite deodorant is soon going to be discontinued! If you want to save it, contact a man named Julien Pescalaris and tell him that “the stuffing has left the pillow”. He’ll know what to do from there. Good luck soldier.', -240, -180, 500, 400);

​

    }

​

    pop();

​

​

​

​

  } // END SCENE 32

​

​

​

  // SCENE 33

  if (scene == 33) { // page 2A-

​

    alexSong.pause();

    fortune();

​

    if (hour() < 17) {

​

      textLeading(40);

      fill(200, 100, 200);

      text('Did you know that Drew Barrymore has a talk show? Well, in 2 years, you’ll be on it! You’ll discuss with her how you solved global warming. And I would start figuring that out now because shes gonna ask you a LOT of questions.', -240, -200, 500, 450); // Text wraps within text box 

​

    }

​

    if (hour() >= 17) {

​

      fill(200, 100, 200);

      textLeading(40);

      text(' You’re the funny person in your friend group. But its time to get focused! Because soon a wise lesbian will come into your life with a serious mission and you have to be ready when she does.', -240, -180, 500, 400);

​

    }

​

  } // END SCENE 33

​

​

​

  // SCENE 34

  if (scene == 34) { // page 2A-

​

    AGSong.pause();

    fortune();

    push();

​

    if (hour() < 17) {

​

      textLeading(40);

      fill(200, 100, 200);

      text('You’re gonna have a great year in 2058! The road will be really rough until then, but stick it out because it will be totally worth it. Why? Three words: girl. scout. cookies.', -240, -180, 500, 400); // Text wraps within text box 

​

    }

​

    if (hour() >= 17) {

​

      fill(200, 100, 200);

      textLeading(40);

      text('You consider yourself to be pretty cool, but buckle up. Because next year, you’ll become obsessed with minions, and I mean like so obsessed that youll consider getting a minion tattoo. I won’t tell you how it happens, but know that it will. ', -240, -200, 500, 420);

​

    }

​

    pop();

​

  } // END SCENE 34

​

​

​

  // SCENE 35

  if (scene == 35) { // page 2A-

​

    alvvaysSong.pause();

    fortune();

    push();

    if (hour() < 17) {

​

      textLeading(40);

      fill(200, 100, 200);

      text('Im guessing you’re a pisces; sad but sweet. Maybe too sweet! No literally, you are eating way too many sweets and your next dentist appointment will show for it; FOURTEEN cavities!  ', -240, -180, 500, 400); // Text wraps within text box 

​

    }

​

    if (hour() >= 17) {

​

      fill(200, 100, 200);

      textLeading(40);

      text('Im guessing you’re a taurus; stubborn but chilled out. Maybe too chilled out! Because that candle burning on your dresser just started fire and you didnt even notice! Get your head out of the clouds!', -240, -180, 500, 400);

​

    }

    pop();

  } // END SCENE 35

​

​

​

  // SCENE 36

  if (scene == 36) { // page 2A-

​

    rihannaSong.pause();

    fortune();

    push();

​

    if (hour() < 17) {

​

      textLeading(40);

      fill(200, 100, 200);

      text('Hmm…… youre the jaded type. But soon you’ll have some little ones running around to change your perspective...yea..Leprechauns! You’ll be the first person to discover them and will have a passionate life studying them and their habits.', -240, -200, 500, 400); // Text wraps within text box 

​

    }

​

    if (hour() >= 17) {

​

      fill(200, 100, 200);

      textLeading(40);

      text('Get a ouija board, because there is a ghost living in your closet! Don’t freak out though, I’ve heard that Arnold Palmer is a super chill dude. Get out the ouija board and ask him for advice on your golf swing!', -240, -180, 500, 400);

​

    }

​

    pop();

​

  } // END SCENE 36

​

​

​

  // SCENE 37

  if (scene == 37) { // page 2A-

​

    gecsSong.pause();

    fortune();

    push();

​

    if (hour() < 17) {

​

      textLeading(40);

      fill(200, 100, 200);

      text('Corduroy pants will save your life. I can’t tell you how, but I highly recommend that you build up your corduroy pant collection just to be safe. I think dark brown ones would look best!', -240, -180, 500, 400); // Text wraps within text box 

​

    }

​

    if (hour() >= 17) {

​

      fill(200, 100, 200);

      textLeading(40);

      textSize(24);

      text('You’ve chosen the darkest path in this quiz. However, that may have been for the best, for everyone who chose Nate Bargatze’s standup over Mark Normand’s will soon go bald. But you’ve proven yourself worthy of keeping your luscious locks.', -240, -200, 500, 420);

​

    }

  } // END SCENE 37

​

​

​

  // SCENE 38

  if (scene == 38) { // page 2A-

​

    pangSong.pause();

    fortune();

    push();

​

    if (hour() < 17) {

​

      textLeading(40);

      fill(200, 100, 200);

      text('Forget your troubled past, for a new love story is about to come into your life! But it wont happen where you’d expect it to…...all i’m saying is to keep an eye out next time you go to a subway inside of a Walmart...', -240, -180, 500, 400); // Text wraps within text box 

​

    }

​

    if (hour() >= 17) {

​

      fill(200, 100, 200);

      textLeading(40);

      text('Remember that weird cashier you had at the mall that one time? Yea hes your long lost brother. He doesn’t know yet, but if in a few years you get a call coming from that very same Hot Topic...ANSWER IT!', -240, -180, 500, 400);

​

    }

​

    pop();

​

  } // END SCENE 38

​

// END FORTUNES

​

} //END DRAW

​

// mousePressed is in a separate .js file

​