Final Project – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

2020 was full of surprises that shook our world and changed the lives of many. My final project comments on the concept of misfortune and plays with the sense of control that many felt like they didn’t have in the face of a global pandemic, monumental election, civil rights movements, wildfires, and more. The 2020 slot machine presents the user with an attractive and exciting prospect of winning, but ultimately delivers the raw reality of this year.

To play, click and drag down on the lever, then release. The reels will spin and generate your 2020. Observe the effects of a jackpot!

I was inspired to create a slot machine for my final project because when presented with the project theme “2020,” I couldn’t narrow down to one single event that I wanted to focus on. I instead wanted to take a more macro approach and reflect on the year as a whole and satirize it with a classic casino game. With more time, I would add a greater jackpot effect, more buttons, and user interaction opportunities to the slot machine.

sketch Download

//2020 SLOT MACHINE
//Elysha Tsai

//All illustrated assets made by me
var bg;
var symbolLinks = [
    "https://i.imgur.com/gj4Ztah.png", //COVID
    "https://i.imgur.com/a8qsuTb.png", //AUSTRALIAN BUSHFIRES
    "https://i.imgur.com/TLZnWQ9.png", //BLM
    "https://i.imgur.com/1tdvXwb.png", //ELECTION
    "https://i.imgur.com/SsV7YIF.png", //2020
    "https://i.imgur.com/EHQEMEP.png", //MURDER HORNETS
]
var textLinks = [
    "https://i.imgur.com/qBgKflt.png", //COVID
    "https://i.imgur.com/jTMJxU5.png", //AUSTRALIAN BUSHFIRES
    "https://i.imgur.com/L47KJMN.png", //BLM
    "https://i.imgur.com/IAmvG2D.png", //ELECTION
    "https://i.imgur.com/051k4xi.png", //2020
    "https://i.imgur.com/sRj9Ipi.png", //MURDER HORNETS
]

var maxlinks = 6;

//assign links to 3 separate reels
var reelA;
var reelB;
var reelC;

var reelimages=[];
var reeltext=[];
var reelAindex=0
var defaultText;
var textimage;
var jackpotWin;

var count =0;
var doneReel=0;
var jackpotindex=0;

//light object variables
var light =[];
var x; //position of light
var speed;

var leverpull;
//var jackpotwin;
var ball;
var slotmachine;
var chair;

function preload() {

  //IMAGES
  bg= loadImage("https://i.imgur.com/Mt81CeD.jpg"); //green gradient background
  ball= loadImage("https://i.imgur.com/5UZk7nN.png"); //lever ball
  slotmachine= loadImage("https://i.imgur.com/3OioKHj.png");
  chair= loadImage("https://i.imgur.com/KXMlSo1.png");

  defaultText= loadImage("https://i.imgur.com/dcfoYh5.png");
  jackpotWin= loadImage("https://i.imgur.com/ih2wbgn.png");

  for (var i=0; i<maxlinks; i++) { 
    reelimages[i] = loadImage(symbolLinks[i]);
  } 
  for (var i=0; i<maxlinks; i++) { 
    reeltext[i] = loadImage(textLinks[i]);
  }

//initial array assignment
  reelA=reelimages[2];
  reelB=reelimages[0];
  reelC=reelimages[4];


}

function setup() {
    createCanvas(600, 450);
    frameRate(10); //mechanical feeling of lever

    //textimage = defaultText;


    //setup light object
    var dist =0;
    for (var i =0; i<1000; i++){
      light[i]= varLight(dist);
      dist +=12; //distance b/w lights
    }
}
/*
function soundSetup() { 
    leverpull.setVolume(1);
    jackpotwin.setVolume(1.2);
    */

function draw() {
  image(bg, -50, -50, 700, 550);

  //draw lightstrip
  push();
  noStroke();
  fill(110, 186, 173); //green
  rect(0, 14, width, 12);
  pop();

  //draw lights
  for(var i = 0; i < light.length; i++){
        light[i].display();
        light[i].move();
  }

  image(slotmachine, 0, 0, 600, 450);
  image(chair, 0, 0, 600, 450);

  //draw text
  push();
  //imageMode(CENTER)
  //image(jackpotWin, 0, 0);
  pop();

  
//JACKPOT
//background flashes when hit jackpot after reels stop changing
  if ((reelA == reelB) & (reelB == reelC) && doneReel){

    //background flashes when hit jackpot after reels stop changing
    rect(0, 0, 600, 450);
    image(slotmachine, 0, 0, 600, 450);
    image(chair, 0, 0, 600, 450);
    image(chair, 0, 0, 600, 450);
     
    count ++;

    if(count==1){
      fill(255, 0, 0);
      }else if(count==2){
        fill(0, 255, 0);
      }else if(count==3){
        fill(0, 0, 255);
        count = 0; 
      }
      
      image(jackpotWin, 0, 0);
      //textimage= reeltext[jackpotindex];
      //assign jackpot symbol to text

      //displayText();
  }

    
  

  //draw images in a row
  image(reelA, 119.5, 181.5, 53, 138);
  image(reelB, 178.5, 181.5, 53, 138);
  image(reelC, 237.5, 181.5, 53, 138);

  lever(); 
}

function lever(){

//hold down mouse to pull down lever
    if (mouseIsPressed  
       & mouseX> 330 && mouseX < 370){

    var x1 = 350; //base x
    var y1 = 293; //base y
    var x2 = constrain(mouseX, 350, 350);//lever only moves vertically
    var y2 = constrain(mouseY, 191, 333);

    
  //stick
    strokeWeight(8);
    stroke(248, 230, 194); //cream
    strokeCap(ROUND);
    line(x1, y1 + (y2/40), x2, y2);
  //ball handle
    push();
    imageMode(CENTER)
    image(ball, x2, y2, 25, 25);
    pop();

    var d = dist(x1, y1, x2, y2); //line length determined by distance from base and handle
    
    }else{ //default lever state
  
  //stick
    strokeWeight(8);
    stroke(248, 230, 194);
    strokeCap(ROUND);
    line(350, 293, 350, 191);
  
  //ball handle
    push();
    imageMode(CENTER)
    image(ball, 350, 191, 25, 25); 
    pop();
      

    }
  }
  
// sleep time expects milliseconds
function sleep (time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}
// based on https://stackoverflow.com/questions/951021/what-is-the-javascript-version-of-sleep

// actual wait time based on clock
function waittime(milliseconds) {   
  const date = Date.now(); 
  let currentDate = null; 
  do {     
    currentDate = Date.now(); 
  } while (currentDate - date < milliseconds); 
} 

function mouseReleased(){

  if (mouseX> 330 & mouseX < 370){   //end position of lever

    reelA=reelimages[int(random(0,maxlinks))];
    reelB=reelimages[int(random(0,maxlinks))];
    reelC=reelimages[int(random(0,maxlinks))]; 
    
    doneReel=0 // start reel turning, not done yet

    //randomize symbol display with lever push
    // for each reel sleep for a random time between 0 and 200ms then show image
    // left to right
    for (var i =0; i<20; i++){
      
      sleep(50).then (()=> {
        reelAindex=int(random(0,maxlinks));
        reelA=reelimages[reelAindex];
          sleep(50).then(()=> {
          reelB=reelimages[int(random(0,maxlinks))];
            sleep(50).then(()=> {
            reelC=reelimages[int(random(0,maxlinks))]; 
          });
        });
      })
      
      waittime(int(random(0,50))) // wait random time up to 100ms before changing 
    }  
    // wait some time for all reels to settle before calling it done
    sleep(500).then(()=> {
      doneReel=1
    })
  }
}

//lightstrip functions

  function varLight(basex){
    var light ={lighty:20,
                x: basex,
                lightw:4,
                display: createLight,
                move: movestrip,
                speed: 4.0,
                }
    return light;
  }

  function createLight(){
    strokeWeight(1.5);
    stroke(227, 88, 158);//pink outline
    fill(248, 230, 194); //cream
    ellipse(this.x, this.lighty, this.lightw, this.lightw);
  }

  function movestrip(){
    this.x -= this.speed
  }
/*
function displayText(){
  push();
  imageMode(CENTER);
  image(reeltext[jackpotindex], 200, 148);
  pop();

}
/*
/*
function mousePressed(){
  if (mouseX>330 & mouseX<370 &&){
    jackpotwin.stop();
    leverpull.play();
  }
}
*/

Leave a Reply Cancel reply