p5.js Web Editor | final im

xxxxxxxxxx
let font1, font2;
let backimage, keyboard, question1, question2, next1, next2, back1, back2, dastext, seating, table, kelin, mid, tor, dombyra, besh, kurt, kymyz, baursak, images, music, yurt, heartbeat, aday, exit, heart;
let screen = 'start';
let info;
let message;
let button1complete = false;
let button2complete = false;
let button3complete = false;
let mouseReleaseAfterScreenChange = false;
let currentImageIndex = 0;
let videoPlay = false;
let imageSwitchTimer = 0;
let currentImageIndex2 = 0;
let pulseDetected = false;
let familyImageIndex = 0;
let familyImages = [];
let button1active = false;
let button2active = false;
let button3active = false;
let last = false;
​
function preload(){
  font1 = loadFont ('Barrio.ttf');
  font2 = loadFont ('crimson.ttf');
  backimage = loadImage ('dast.jpg');
  keyboard = loadImage ('keyboard.png');
  question1 = loadImage ('question1.png');
  question2 = loadImage ('question2.png');
  next1 = loadImage ('next1.png');
  next2 = loadImage ('next2.png');
  back1 = loadImage ('back1.png');
  back2 = loadImage ('back2.png');
  table = loadImage ('table.png');
  kelin = loadImage ('pics/kelin.png');
  mid = loadImage ('pics/mid.png');
  tor = loadImage ('pics/tor.png');
  dombyra = loadImage ('pics/dombyra.png');
  yurt = loadImage ('pics/yurt.png')
  besh = loadImage ('pics/besh.png');
  baursak = loadImage ('pics/baursak.png');
  kymyz = loadImage ('pics/kymyz.png');
  kurt = loadImage ('pics/kurt.png');
  aday = createVideo ('pics/aday.mp4');
  exit = loadImage ('pics/exit.png');
  heart = loadImage ('pics/heart.png');
  familyImages = [
    loadImage ('pics/f1.png'),
    loadImage ('pics/f2.png'),
    loadImage ('pics/f3.png'),
    loadImage ('pics/f4.png'),
    loadImage ('pics/f5.png')];
  images = [baursak, besh, kurt, kymyz];
}
​
function setup() {
  createCanvas(1500, 900);
}
​
function draw() {
  
  aday.hide(); // hides html level 2 video element from appearing on the screen
  
  if (!serialActive) {
  // the initial screen of p5, when it is not connected to arduino, this helps to start serial communication
    background("#0B3559");
    fill("#F1EBD5");
    textSize(50);
    textFont (font1);
    textAlign (LEFT);
    text("Press Space Bar to select Serial Port", 100, height/2, width/2, height/2-100);
    imageMode(CENTER);
    image (keyboard, width-400, height/2+10, 560,308);
  }
  
  else { 
    if (screen === 'start'&& mouseReleaseAfterScreenChange) {
    mainpage();
   } 
    if (screen === 'level1'&& mouseReleaseAfterScreenChange){
    level1();
  }
    if (screen === 'level2'&& mouseReleaseAfterScreenChange){
    level2();
    }
    if (screen === 'level3'&& mouseReleaseAfterScreenChange){
    level3();
    }
    if (screen === 'level4'&& mouseReleaseAfterScreenChange){
      level4();
    }
    if (screen === 'finish'&& mouseReleaseAfterScreenChange){
      finish();
    }
  }
}
​
function keyPressed() {
  // starting serial communication when space bar is pressed
  if (key == " ") {setUpSerial();}
}
​
function mouseReleased() {
  // enable interactions with the screen after the mouse is released
  mouseReleaseAfterScreenChange = true;
}
​
function mainpage (){
  textSize (100);
  background ('rgb(167,17,17)');
  imageMode(CENTER);
  image (yurt, width/2, height/2, width, height);
  fill ("#F1EBD5")
  textAlign (CENTER);
  textFont (font1);
  text ("Welcome to Dastarkhan", width/2, height/2);
  imageMode (CENTER);
  image (question1, width/2, height/2, width, height); //info bubble
  if (dist(mouseX, mouseY, width/2, 71)<=42){
    image (question2, width/2, height/2, width, height);
    if (mouseIsPressed){
      rectMode (CENTER);
      fill ('#082B4E');
      rect (width/2, height/2, width-200, height-600, 100);
      dastext = "this is an interactive journey exploring one of the cultural traditions of Kazakhstan, and most Central Asian countries, having a Dastarkhan (table or feast in kazakh language). This is a place where relatives and guests unite in a conversation over a cup of tea and food."
      fill ('#F1EBD5');
      textFont (font2);
      textSize (35);
      text (dastext, width/2, height/2+140, width-750, height-480);
    }
  }
  image(next1, width/2, height/2, width, height); // button to go next
  if (mouseX>1221&&mouseX<1412&&mouseY>579&&mouseY<835){
    image (next2, width/2, height/2, width, height);
    if(mouseIsPressed){
      screen = 'level1';
      mouseReleaseAfterScreenChange = false;
    }
  }
}
​
function level1(){
  if (mouseReleaseAfterScreenChange){
  background ('#082B4E');
  image (back1, width/2, height/2, width, height); // button to go back
  if (mouseX>90&&mouseX<280&&mouseY>579&&mouseY<835){
    image (back2, width/2, height/2, width, height);
    if (mouseIsPressed){
      screen = 'start';
      mouseReleaseAfterScreenChange = false;
    }
  }
  rectMode (CENTER);
  fill ('#FFA401');
  textAlign (LEFT);
  textSize (100);
  text ("Level 1", 300, 300, 400, 100);
  fill ('#F1EBD5')
  textSize (40);
  seating = "Explore the seating traditions of Kazakh culture. Press the buttons to learn about guest seating arrangements and their meanings."
  textAlign (LEFT);
  text (seating, 400, 580, 600, 500);
  imageMode (CENTER);
  image (table, width/2 + width/4, height/2-100, 580, 696);
  
  if (info === "Button1Kelin"){ // if button 1 was pressed
    button1active = true;
    button1complete = true;
  }
    
  if (button1active){ // triggers info bubble on button 1
      image (kelin, width/2 + width/4, height/2-100, 580, 696);
      button2active = false;
      button3active = false;
    }
    
  if (info === "Button2Mid"){ // if button 2 was pressed
    button2active = true;
    button2complete = true;
  }
  
  if (button2active){ // triggers info bubble on button 2
      image (mid, width/2 + width/4, height/2-100, 580, 696);
    button1active = false;
    button3active = false;
    }
  
    if (info === "Button3Tor"){ // if button 3 was pressed
    button3active = true;
    button3complete = true;
  }
  
  if (button3active){ // triggers info bubble on button 3
      image (tor, width/2 + width/4, height/2-100, 580, 696);
    button2active = false;
    button1active = false;
    }
    
  if (button1complete && button2complete && button3complete){ // if all three buttons were pressed, the button to go next appears
    image(next1, width/2, height/2, width, height);
    if (mouseX>1221&&mouseX<1412&&mouseY>579&&mouseY<835){
    image (next2, width/2, height/2, width, height);
      if(mouseIsPressed){
      screen = 'level2';
      mouseReleaseAfterScreenChange = false;
    }
  }
  }
 }
}
​
function level2(){
  if (mouseReleaseAfterScreenChange){
  background ('#082B4E');
  rectMode (CENTER);
  fill ('#FFA401');
  textAlign (LEFT);
  textSize (100);
  text ("Level 2", 300, 300, 400, 100);
  textSize (40);
  fill ('#F1EBD5')
  music = "Find national kazakh instrument, Dombyra, around Dastarkhan and press it to play kui (musical composition performed with dombyra)"
  textAlign (LEFT);
  text (music, 400, 580, 600, 500);
  image (dombyra, width/2, height/2, width, height);
 
  if (info === "video"){ // when force sensor value get below the threshold by user's pushing and video is triggered
    videoPlay = true;
  }
    
  if (videoPlay){
    aday.show();
    aday.play ();
    aday.size (1200,800);
    aday.volume (0.5);
    aday.showControls();
    aday.position (150, 50);
    }
    
  else{
      aday.hide();
    }
    
  if (videoPlay){
    imageMode (CENTER);
    image (exit, width/2, height/2, width, height);
    if (mouseX>=1350 && mouseY <=150 && mouseY>=0){
      if (mouseIsPressed){
        aday.hide();
        aday.pause();
        videoPlay = false;
      }
    }
  }
    
  image (back1, width/2, height/2, width, height);
    if (mouseX>90&&mouseX<280&&mouseY>579&&mouseY<835){
    image (back2, width/2, height/2, width, height);
      if (mouseIsPressed){
      aday.pause();
      videoPlay = false;
      screen = 'level1';
      mouseReleaseAfterScreenChange = false;
    }
  }
    
  image(next1, width/2, height/2, width, height);
    if (mouseX>1221&&mouseX<1412&&mouseY>579&&mouseY<835){
    image (next2, width/2, height/2, width, height);
      if(mouseIsPressed){
      aday.pause();
      videoPlay = false;
      screen = 'level3';
      mouseReleaseAfterScreenChange = false;
  }
  }    
 }
}
​
function level3(){
  if (mouseReleaseAfterScreenChange){
  background ('#082B4E');
  imageMode (CENTER);
  fill ('#FFA401');
  textAlign (LEFT);
  textSize (90);
  text ("Level 3", 260, 200, 400, 100);
  image (back1, width/2, height/2, width, height);
    if (mouseX>90&&mouseX<280&&mouseY>579&&mouseY<835){
    image (back2, width/2, height/2, width, height);
      if (mouseIsPressed){
      screen = 'level2';
      mouseReleaseAfterScreenChange = false;
    }
  }
​
  image(next1, width/2, height/2, width, height);
  if (mouseX>1221&&mouseX<1412&&mouseY>579&&mouseY<835){
    image (next2, width/2, height/2, width, height);
    if(mouseIsPressed){
      screen = 'level4';
      mouseReleaseAfterScreenChange = false;
    }
  }
    
  image(images[currentImageIndex], width / 2, height / 2, width, height);
  if (mouseX>=408 && mouseX<=654 && mouseY>=403 && mouseY<=534){
      if (mouseIsPressed){
        currentImageIndex--; // if user presses on left arrow, the image goes left
        if (currentImageIndex < 0) {
          currentImageIndex = images.length - 1;
        }
        mouseReleaseAfterScreenChange = false;
      }
    }
  if (mouseX>=909 && mouseX<=1097 && mouseY<=537 && mouseY>=400){
      if (mouseIsPressed) {
        currentImageIndex++; // if user presses on right arrow, the image goes right
        if (currentImageIndex >= images.length) {
          currentImageIndex = 0;
        }
        mouseReleaseAfterScreenChange = false;
      }
  }
 }
}
​
function level4(){
  if (mouseReleaseAfterScreenChange){
  background ('#082B4E');
  rectMode (CENTER);
  fill ('#FFA401');
  textAlign (CENTER);
  textSize (100);
  text ("Level 4", width/2, 300, 400, 100);
  heartbeat = "Do not forget! Dastarkhan is all about family and friends, place your finger on the pulse sensor to feel the heartbeat of the Dastarkhan. Press the heart!";
  textSize (40);
  fill ('#F1EBD5');
  text (heartbeat, width/2, height/2+100, 600, 400);
    
  image (heart, width/2, height/2, width, height);
    if (mouseX>=660&&mouseX<=837&&mouseY>=569&&mouseY<=720){
      if (mouseIsPressed){
      last = true;
    }
  }    
    if (last){
      if (info === "pulse"&& !pulseDetected){ //if heart button is pressed and arduino started collecting pulse values
    pulseDetected = true;
    imageSwitchTimer = millis(); //start tracking time
}
       
  if (pulseDetected && millis() - imageSwitchTimer > 5000) { // so that images appear after 5 seconds, as the system is triggered
    currentImageIndex2 = (currentImageIndex2 + 1) % familyImages.length;
    imageSwitchTimer = millis(); // resetting timer
  }
  
  if (pulseDetected) {
    imageMode(CENTER);
    image(familyImages[currentImageIndex2], width / 2, height / 2, width, height);
  }
    
  image (back1, width/2, height/2, width, height);
  if (mouseX>90&&mouseX<280&&mouseY>579&&mouseY<835){
    image (back2, width/2, height/2, width, height);
    if (mouseIsPressed){
      screen = 'level3';
      mouseReleaseAfterScreenChange = false;
    }
  }
  }
  
  image(next1, width/2, height/2, width, height);
  if (mouseX>1221&&mouseX<1412&&mouseY>579&&mouseY<835){
    image (next2, width/2, height/2, width, height);
    if(mouseIsPressed){
      screen = 'finish';
      mouseReleaseAfterScreenChange = false;
    }
  }
  }
  }
​
function finish(){
  if (mouseReleaseAfterScreenChange){
  background ('#082B4E');
    textSize (50);
    fill ('#FFA401');
  textAlign (CENTER);
    text ("Thank you! Hope to see you at our dastarkhan", width/2, height/2, 600, 600)
    }
}
​
​
function readSerial(data) {
  if (data != null){
    let fromArduino = split((data), ",");
    if (fromArduino.length == 1) {
      info = fromArduino [0];
    }
    }
}
Cookies

Sketch Files

Console

Preview
