Week_Final_2 Interactive Video 2019


My CODE -Alice Bar Today's Cocktail


Tab 'alice_bar_cocktail'

int page = 1;

float scaleFactor = 0.7;
PFont harlow;
PFont lemon;

float v = 1;
boolean snd = true;

import processing.sound.*;
SoundFile clap;
SoundFile glass;

void setup()
{
  size(750, 1334);
  background(c[bg]);
 
  harlow=loadFont("HarlowSolid-60.vlw");
  lemon=loadFont("LemonMilklightitalic-60.vlw");
 
  clap = new SoundFile(this, "clap.wav");
  glass = new SoundFile(this, "glass_01.wav");
  clap.amp(v);
 
  setup_main();
  setup_selection();
  setup_option();
 
}

void draw()
{
  //scale(0.7);
  if (page == 1) {
    draw_main();
  } else if (page == 2) {
    draw_selection();
  } else if (page == 3) {
    draw_option();
  }
}

void mousePressed() {
  if (snd == true) {
    glass.play();
  }
  if (page == 1) {
    mousePressed_main();
  }
  else if (page == 2) {
    mousePressed_selection();
  }
  else if (page == 3) {
    mousePressed_option();
  }
}


Tab 'main'

PImage title;

void setup_main()
{
  background(c[bg]);
  title=loadImage("alicebar.png");
}

void draw_main()
{
  background(c[bg]);
 
  image(title, 0, 50);
 
  fill(c[bg]);
  strokeWeight(5);
  stroke(173, 255, 164);
  rect(150, 900, 450, 100, 20);
 
  stroke(255, 174, 44);
  rect(150, 1050, 450, 100, 20);
 
  textFont(harlow);
  fill(255);
  textSize(70);
  text("Matching", 240, 960);
  text("Option", 285, 1115);
 
}

void mousePressed_main()
{
  if (mouseX>150 && mouseX<600 && mouseY>900 && mouseY<1000) {
    page = 2;
    setup_selection();
    stage=0;
    question=0;
    item1=0;
    item2=0;
    item3=0;
    item4=0;
  }
  if (mouseX>150 && mouseX<600 && mouseY>1050 && mouseY<1150) {
    page = 3;
  }
}


Tab 'option'

color[] c = new color[5];

int bg = 0;
int click =0;

void setup_option()
{
  c[0] = color(51);
  c[1] = color(30, 39, 57);
  c[2] = color(94, 41, 64);
  c[3] = color(42, 62, 28);
  c[4] = color(81, 54, 56);
  background(c[bg]);
}

void draw_option()
{
  background(c[bg]);
 
  fill(250);
  textSize(40);
  textFont(harlow);
  text("Option", 300, 150);
  text("Background Color", 170, 300);
  text("Sound Off/On", 180, 700);
 
  stroke(255);
  strokeWeight(3);
 
  fill(51);
  ellipse(120, 455, 100, 100);
 
  fill(30, 39, 57);
  ellipse(250, 455, 100, 100);
 
  fill(94, 41, 64);
  ellipse(375, 455, 100, 100);
 
  fill(42, 62, 28);
  ellipse(500, 455, 100, 100);
 
  fill(81, 54, 56);
  ellipse(630, 455, 100, 100);
 
  noStroke();
 
  if (click == 1) {
    fill(150);
    rect(70, 800, 300, 100, 10);
    fill(250);
    rect(380, 800, 300, 100, 10);
  }
  if (click == 0) {
    fill(250);
    rect(70, 800, 300, 100, 10);
    fill(150);
    rect(380, 800, 300, 100, 10);
  }
 
  fill(c[bg]);
  text("Off", 180, 860);
  text("On", 480, 860);
 
  fill(173, 255, 164);
  rect(640, 1160, 80, 80, 10);
  textSize(40);
  fill(c[bg]);
  text("H", 665, 1210);
}

void mousePressed_option()
{
  if (mouseX>70 && mouseX<170 && mouseY>405 && mouseY<505) {
    bg=0;
  }
  if (mouseX>200 && mouseX<300 && mouseY>405 && mouseY<505) {
    bg=1;
  }
  if (mouseX>325 && mouseX<425 && mouseY>405 && mouseY<505) {
    bg=2;
  }
  if (mouseX>450 && mouseX<550 && mouseY>405 && mouseY<505) {
    bg=3;
  }
  if (mouseX>580 && mouseX<680 && mouseY>405 && mouseY<505) {
    bg=4;
  }
  if (mouseX>70 && mouseX<370 && mouseY>800 && mouseY<900) {
    if (snd == true) {
      snd = false;
      click = 1;
    }
  }
  if (mouseX>380 && mouseX<680 && mouseY>800 && mouseY<900) {
    if (snd == false) {
      snd = true;
      click = 0;
    }
  }
  if(mouseX>640 && mouseX<720 && mouseY>1160 && mouseY<1240) {
    page=1;
    question=0;
  }
}



Tab 'selection'

int question = 0;

int item1 = 0;
int item2 = 0;
int item3 = 0;
int item4 = 0;
int stage = 0;

int choice = 0;
String sweet = "Sweet";
String bitter = "Bitter";
String drunk = "Drunk";
String tipsy = "Tipsy";
String happy = "Happy";
String gloomy = "Gloomy";
String fresh = "Fresh";
String deep = "Deep";

PImage cockbase;

PImage parisien;
PImage malibuorange;
PImage margarita;
PImage peachcrush;
PImage kahluamilk;
PImage bluehawaii;
PImage tequilasunrise;
PImage midorisour;
PImage gimlet;
PImage godfather;
PImage kamikaze;
PImage cosmopolitan;
PImage b52;
PImage negroni;
PImage martini;
PImage manhattan;

import processing.sound.*;
SoundFile paris;
SoundFile orange;
SoundFile today;
SoundFile peach;
SoundFile coffee;
SoundFile blue;
SoundFile sunflower;
SoundFile island;
SoundFile drunkmorning;
SoundFile morphine;
SoundFile listen;
SoundFile action;
SoundFile threeam;
SoundFile skip;
SoundFile martiniblue;
SoundFile malibunights;

void setup_selection()
{
  //size(750, 1334);
  background(c[bg]);
  question=0;
 
  cockbase=loadImage("cockbase.png");
 
  parisien=loadImage("cock1.png");
  malibuorange=loadImage("cock2.png");
  margarita=loadImage("cock3.png");
  peachcrush=loadImage("cock4.png");
  kahluamilk=loadImage("cock5.png");
  bluehawaii=loadImage("cock6.png");
  tequilasunrise=loadImage("cock7.png");
  midorisour=loadImage("cock8.png");
  gimlet=loadImage("cock9.png");
  godfather=loadImage("cock10.png");
  kamikaze=loadImage("cock11.png");
  cosmopolitan=loadImage("cock12.png");
  b52=loadImage("cock13.png");
  negroni=loadImage("cock14.png");
  martini=loadImage("cock15.png");
  manhattan=loadImage("cock16.png");
 
  paris = new SoundFile(this,"paris.mp3");
  orange = new SoundFile(this,"Orange.mp3");
  today = new SoundFile(this,"Today.mp3");
  peach = new SoundFile(this, "Peach.mp3");
  coffee = new SoundFile(this, "Coffeedrink.mp3");
  blue = new SoundFile(this, "blue.mp3");
  sunflower = new SoundFile(this, "Sunflower.mp3");
  island = new SoundFile(this, "ISLAND.mp3");
  drunkmorning = new SoundFile(this, "Drunk In The Morning.mp3");
  morphine = new SoundFile(this, "Whiskey And Morphine.mp3");
  listen = new SoundFile(this, "listen before i go.mp3");
  action = new SoundFile(this, "Action.mp3");
  threeam = new SoundFile(this, "3am.mp3");
  skip = new SoundFile(this, "Skip.mp3");
  martiniblue = new SoundFile(this, "Martini Blue.mp3");
  malibunights = new SoundFile(this, "Malibu Nights.mp3");
}

void draw_selection()
{
  background(c[bg]);
 
  fill(250);
  textSize(40);
  textFont(harlow);
  text("Matching", 280, 150);
 
  strokeWeight(4);
  textFont(lemon);
 
  if (question >=0) {
    stroke(173, 255, 164);
  } else {
    stroke(200);
  }
  fill(c[bg]);
  ellipse(200, 400, 300, 300);
 
  if (question >=1) {
    stroke(173, 255, 164);
  } else {
    stroke(200);
  }
  ellipse(555, 400, 300, 300);
 
  if (question >=2) {
    stroke(173, 255, 164);
  } else {
    stroke(200);
  }
  ellipse(200, 750, 300, 300);
 
  if (question >=3) {
    stroke(173, 255, 164);
  } else {
    stroke(200);
  }
  ellipse(555, 750, 300, 300);
 
  noStroke();
  if (question >=4) {
    fill(173, 255, 164);
  } else {
    fill(200);
  }
  rect(70, 1000, 610, 150, 20);
 
  fill(50);
  textSize(30);
  text("Today's Cocktail", 145, 1095);
 
  fill(173, 255, 164);
  textSize(25);
  text("Q1", 165, 310);
 
  if (question >=1) {
    fill(173, 255, 164);
  } else {
    fill(200);
  }
  text("Q2", 525, 310);
 
  fill(200);
  text(sweet, 130, 400);
  text(bitter, 135, 480);
 
  if (question >=2) {
    fill(173, 255, 164);
  } else {
    fill(200);
  }
  text("Q3", 160, 665);
 
  if (question >=3) {
    fill(173, 255, 164);
  } else {
    fill(200);
  }
  text("Q4", 520, 665);
 
  if (item1 ==1) {
    fill(173, 255, 164);
    text(sweet, 130, 400);
    fill(200);
    text(bitter, 135, 480);
  }
  if (item1 == 2) {
    fill(200);
    text(sweet, 130, 400);
    fill(173, 255, 164);
    text(bitter, 135, 480);
  }
 
  fill(200);
  text(drunk, 480, 400);
  text(tipsy, 490, 480);
 
  if (item2 == 1) {
    fill(173, 255, 164);
    text(drunk, 480, 400);
    fill(200);
    text(tipsy, 490, 480);
  }
 
  if (item2 ==2) {
    fill(200);
    text(drunk, 480, 400);
    fill(173, 255, 164);
    text(tipsy, 490, 480);
  }
 
  fill(200);
  text(happy, 125, 750);
  text(gloomy, 110, 830);
 
  if (item3 == 1) {
    fill(173, 255, 164);
    text(happy, 125, 750);
    fill(200);
    text(gloomy, 110, 830);
  }
 
  if (item3 ==2) {
    fill(200);
    text(happy, 125, 750);
    fill(173, 255, 164);
    text(gloomy, 110, 830);
  }
 
  fill(200);
  text(fresh, 490, 750);
  text(deep, 495, 830);
 
  if (item4 == 1) {
    fill(173, 255, 164);
    text(fresh, 490, 750);
    fill(200);
    text(deep, 495, 830);
  }
 
  if (item4 ==2) {
    fill(200);
    text(fresh, 490, 750);
    fill(173, 255, 164);
    text(deep, 495, 830);
  }

  if(stage ==5) {
    if(item1==1 && item2==1 && item3==1 && item4 == 1) {
      if(paris.isPlaying()== false) {
        if(snd == true) {
          paris.play();
        }
      }
      fill(c[bg]);
      rect(0, 0, 750, 1334);
      image(cockbase, 0, 0);
      image(parisien, 0, 0);
      fill(250);
      textSize(30);
      text("Parisien", 450, 508);
      fill(220, 213, 193);
      textSize(20);
      text("Sweet Wine", 400, 758);
      text("25 ~ 30%", 430, 867);
      text("Gin 30ml\nDry Vermouth (Martini) 15ml\nCrème de cassis 15ml\nIce, Lemon", 160, 1070);
    }
    if(item1==1 && item2==1 && item3==1 && item4==2) {
      if(orange.isPlaying()== false) {
        if(snd == true) {
          orange.play();
        }
      }
      fill(c[bg]);
      rect(0, 0, 750, 1334);
      image(cockbase, 0, 0);
      image(malibuorange, 0, 0);
      fill(250);
      textSize(30);
      text("Malibu\nOrange", 450, 480);
      fill(220, 213, 193);
      textSize(20);
      text("Coconut, Orange", 360, 758);
      text("10 ~ 15%", 430, 867);
      text("Malibu 30 ~ 45ml\nOrange Juice 50 ~ 100ml\nIce", 160, 1070);
    }
    if(item1==1 && item2==1 && item3==2 && item4==1) {
      if(today.isPlaying()== false) {
        if(snd == true) {
          today.play();
        }
      }
      fill(c[bg]);
      rect(0, 0, 750, 1334);
      image(cockbase, 0, 0);
      image(margarita, 0, 0);
      fill(250);
      textSize(30);
      text("Margarita", 420, 508);
      fill(220, 213, 193);
      textSize(20);
      text("Lemon/Lime/Salty", 360, 758);
      text("25 ~ 30%", 430, 867);
      text("Tequila 45ml\nCointreau 15ml\nLime Juice 15ml\nSalt, piece of lime", 160, 1070);
    }
    if(item1==1 && item2==2 && item3==1 && item4==1) {
      if(peach.isPlaying()== false) {
        if(snd == true) {
          peach.play();
        }
      }
      fill(c[bg]);
      rect(0, 0, 750, 1334);
      image(cockbase, 0, 0);
      image(peachcrush, 0, 0);
      fill(250);
      textSize(30);
      text("Peach\nCrush", 450, 508);
      fill(220, 213, 193);
      textSize(20);
      text("Peach", 430, 758);
      text("5 ~ 10%", 430, 867);
      text("Peach Liquor 30ml ~ 45ml\nSweet & Sour Mix 60ml\nCranberry Juice 60ml", 160, 1070);
    }
    if(item1==1 && item2==1 && item3==2 && item4==2) {
      if(coffee.isPlaying()== false) {
        if(snd == true) {
          coffee.play();
        }
      }
      fill(c[bg]);
      rect(0, 0, 750, 1334);
      image(cockbase, 0, 0);
      image(kahluamilk, 0, 0);
      fill(250);
      textSize(30);
      text("Kahlua\nMilk", 480, 508);
      fill(220, 213, 193);
      textSize(20);
      text("Coffee milk", 400, 758);
      text("10 ~ 15%", 430, 867);
      text("Kahlua 30 ~ 45ml\nMilk 50 ~ 100ml", 160, 1070);
    }
    if(item1==1 && item2==2 && item3==1 && item4==2) {
      if(blue.isPlaying()== false) {
        if(snd == true) {
          blue.play();
        }
      }
      fill(c[bg]);
      rect(0, 0, 750, 1334);
      image(cockbase, 0, 0);
      image(bluehawaii, 0, 0);
      fill(250);
      textSize(30);
      text("Blue\nHawaii", 480, 508);
      fill(220, 213, 193);
      textSize(20);
      text("Coconut, Lemon\nPinapple", 360, 758);
      text("5 ~ 10%", 430, 867);
      text("White Rum 30ml\nBlue Curacao 15ml\nPineapple Juice 30ml\nLemon Juice 15ml", 160, 1070);
    }
    if(item1==1 && item2==2 && item3==2 && item4==1) {
      if(sunflower.isPlaying()== false) {
        if(snd == true) {
          sunflower.play();
        }
      }
      fill(c[bg]);
      rect(0, 0, 750, 1334);
      image(cockbase, 0, 0);
      image(tequilasunrise, 0, 0);
      fill(250);
      textSize(30);
      text("Tequila\nSunrise", 470, 508);
      fill(220, 213, 193);
      textSize(20);
      text("Orange, Tequila", 360, 758);
      text("5 ~ 10%", 430, 867);
      text("Tequila 45ml\nOrange Juice 50 ~ 100ml\nGrenadine Syrup 10ml", 160, 1070);
    }
    if(item1==1 && item2==2 && item3==2 && item4==2) {
      if(island.isPlaying()== false) {
        if(snd == true) {
          island.play();
        }
      }
      fill(c[bg]);
      rect(0, 0, 750, 1334);
      image(cockbase, 0, 0);
      image(midorisour, 0, 0);
      fill(250);
      textSize(30);
      text("Midori\nSour", 470, 508);
      fill(220, 213, 193);
      textSize(20);
      text("Melon", 430, 758);
      text("5 ~ 10%", 430, 867);
      text("Midori 45ml\nSweet & Sour Mix 60ml", 160, 1070);
    }
    if(item1==2 && item2==1 && item3==1 && item4 == 1) {
      if(drunkmorning.isPlaying()== false) {
        if(snd == true) {
          drunkmorning.play();
        }
      }
      fill(c[bg]);
      rect(0, 0, 750, 1334);
      image(cockbase, 0, 0);
      image(gimlet, 0, 0);
      fill(250);
      textSize(30);
      text("Gimlet", 450, 508);
      fill(220, 213, 193);
      textSize(20);
      text("Bitter Lime", 410, 758);
      text("25 ~ 30%", 430, 867);
      text("Dry Gin 45ml\nLime Juice 15ml", 160, 1070);
    }
    if(item1==2 && item2==1 && item3==1 && item4==2) {
      if(morphine.isPlaying()== false) {
        if(snd == true) {
          morphine.play();
        }
      }
      fill(c[bg]);
      rect(0, 0, 750, 1334);
      image(cockbase, 0, 0);
      image(godfather, 0, 0);
      fill(250);
      textSize(30);
      text("God\nFather", 500, 508);
      fill(220, 213, 193);
      textSize(20);
      text("Almond, Nut", 380, 758);
      text("25 ~ 30%", 430, 867);
      text("Whisky 45ml\nAmaretto 15ml", 160, 1070);
    }
    if(item1==2 && item2==1 && item3==2 && item4==1) {
      if(martiniblue.isPlaying()== false) {
        if(snd == true) {
          martiniblue.play();
        }
      }
      fill(c[bg]);
      rect(0, 0, 750, 1334);
      image(cockbase, 0, 0);
      image(martini, 0, 0);
      fill(250);
      textSize(30);
      text("Martini", 450, 508);
      fill(220, 213, 193);
      textSize(20);
      text("Olive, Gin", 390, 758);
      text("30%", 430, 867);
      text("Dry Gin 45ml\nDry Vermouth 15ml\nOlive", 160, 1070);
    }
    if(item1==2 && item2==2 && item3==1 && item4==1) {
      if(action.isPlaying()== false) {
        if(snd == true) {
          action.play();
        }
      }
      fill(c[bg]);
      rect(0, 0, 750, 1334);
      image(cockbase, 0, 0);
      image(cosmopolitan, 0, 0);
      fill(250);
      textSize(30);
      text("Cosmo\npolitan", 450, 508);
      fill(220, 213, 193);
      textSize(20);
      text("Berry", 430, 758);
      text("15 ~ 20%", 430, 867);
      text("Vodka 30ml\nCointreau 15ml\nChambored\nRasberry Liquor 15ml\nCranberry Juice 15ml", 160, 1070);
    }
    if(item1==2 && item2==1 && item3==2 && item4==2) {
      if(threeam.isPlaying()== false) {
        if(snd == true) {
          threeam.play();
        }
      }
      fill(c[bg]);
      rect(0, 0, 750, 1334);
      image(cockbase, 0, 0);
      image(b52, 0, 0);
      fill(250);
      textSize(30);
      text("B-52", 500, 508);
      fill(220, 213, 193);
      textSize(20);
      text("Milky, Cream", 380, 758);
      text("20 ~ 25%", 430, 867);
      text("Kahlua 23ml\nGrand Marnier 23ml\nBailey's Original\nIrish Cream 23ml", 160, 1070);
    }
    if(item1==2 && item2==2 && item3==1 && item4==2) {
      if(skip.isPlaying()== false) {
        if(snd == true) {
          skip.play();
        }
      }
      fill(c[bg]);
      rect(0, 0, 750, 1334);
      image(cockbase, 0, 0);
      image(negroni, 0, 0);
      fill(250);
      textSize(30);
      text("Negroni", 450, 700);
      fill(220, 213, 193);
      textSize(20);
      text("Orange", 430, 758);
      text("20 ~ 25%", 430, 867);
      text("Dry Gin 45ml\nDry Vermouth 15ml\nOlive", 160, 1070);
    }
    if(item1==2 && item2==2 && item3==2 && item4==1) {
      if(listen.isPlaying()== false) {
        if(snd == true) {
          listen.play();
        }
      }
      fill(c[bg]);
      rect(0, 0, 750, 1334);
      image(cockbase, 0, 0);
      image(kamikaze, 0, 0);
      fill(250);
      textSize(30);
      text("Kamikaze", 450, 508);
      fill(220, 213, 193);
      textSize(20);
      text("Bitter, Sour, Lime", 360, 758);
      text("10 ~ 15%", 430, 867);
      text("Vodka 35ml\nTriple Sec 15ml\nLime Juice 15ml", 160, 1070);
    }
    if(item1==2 && item2==2 && item3==2 && item4==2) {
      if(malibunights.isPlaying()== false) {
        if(snd == true) {
          malibunights.play();
        }
      }
      fill(c[bg]);
      rect(0, 0, 750, 1334);
      image(cockbase, 0, 0);
      image(manhattan, 0, 0);
      fill(250);
      textSize(30);
      text("Manhattan", 400, 508);
      fill(220, 213, 193);
      textSize(20);
      text("Grape, Orange", 360, 758);
      text("5 ~ 10%", 430, 867);
      text("Whisky 40ml\nSweet Vermouth 20ml\nAngostura Bitters 1 dash\nCherry", 160, 1070);
      textSize(15);
      text("LANY - Malibu Nights", 30, 1220);
    }
    textSize(30);
    fill(173, 255, 164);
    rect(640, 1160, 80, 80, 10);
    fill(c[bg]);
    text("H", 658, 1223);
  }
}

void mousePressed_selection()
{
  //scale(0.5);
  if(mouseX>50 && mouseX<350 && mouseY>250 && mouseY<550) {
    question=1;
  }
 
  if(mouseX>405 && mouseX<705 && mouseY>250 && mouseY<550) {
    question=2;
  }
 
  if(mouseX>50 && mouseX<350 && mouseY>600 && mouseY<900) {
    question=3;
  }
 
  if(mouseX>405 && mouseX<705 && mouseY>600 && mouseY<900) {
    question=4;
  }
 
  if(mouseX>130 && mouseX<270 && mouseY>350 && mouseY<400) {
    stage = 1;
    item1=1;
  }
 
  if(mouseX>130 && mouseX<270 && mouseY>420 && mouseY<490) {
    stage = 1;
    item1=2;
  }
 
  if(mouseX>480 && mouseX<640 && mouseY>350 && mouseY<400) {
    stage = 2;
    item2=1;
  }
 
  if(mouseX>490 && mouseX<640 && mouseY>420 && mouseY<490) {
    stage = 2;
    item2=2;
  }
 
  if(mouseX>130 && mouseX<270 && mouseY>680 && mouseY<750) {
    stage = 3;
    item3=1;
  }
 
  if(mouseX>130 && mouseX<290 && mouseY>770 && mouseY<840) {
    stage = 3;
    item3=2;
  }
 
  if(mouseX>480 && mouseX<620 && mouseY>680 && mouseY<750) {
    stage = 4;
    item4=1;
  }
 
  if(mouseX>480 && mouseX<620 && mouseY>770 && mouseY<840) {
    stage = 4;
    item4=2;
  }
 
  if(mouseX>70 && mouseX<680 && mouseY>1000 && mouseY<1150) {
    stage=5;
  }
 
  if(mouseX>640 && mouseX<720 && mouseY>1160 && mouseY<1240) {
    page=1;
    question=0;
    paris.stop();
    orange.stop();
    today.stop();
    peach.stop();
    coffee.stop();
    blue.stop();
    sunflower.stop();
    island.stop();
    drunkmorning.stop();
    morphine.stop();
    listen.stop();
    action.stop();
    threeam.stop();
    skip.stop();
    martiniblue.stop();
    malibunights.stop();
  }

}

Week_Final_1 Interactive Video 2019


Alice Bar - Today's Cocktail




This is an application that gives you a recommendation of a cocktail that matches your mood or preference of taste!

Functions

1. Recommends you a cocktail by selecting word at each question.
2. Gives information about the cocktail and background song matches the cocktail.
3. Can change background color (at option tab)
4. Can make sound on and off (at option tab)


Cautions

1. Need to download (Sketch -> import Library -> Add Library -> Sound(Processing foundation))
2. Takes some time to run the sketch because of the size of the music files. (It took about 2 minutes for me to run TT)
3. As the same reason from number one caution, I couldn't upload the zip file(too big for uploading)
4. So for someone who wants to get the zip file, please leave your email(in private) at the comment box.


Further Plan

1. Will try to move this to P5JS and can run at cellphones too.
2. But worried about copyrights of musics so should think about this more.


I'll upload my code at the next Posting, Thankyou!

Week 14 Interactive Video 2019

Developing the Final Project Part. 3

/md.egloos.com/img/eg/icon_file.gif") no-repeat left; list-style: none; padding: 0px 0px 0px 15px;' href="http://pds18.egloos.com/pds/201906/12/22/alice_bar_cocktail_(2).zip" player="0">alice_bar_cocktail_(2).zip

I made images that match the cocktails to come up.
I made the "Home" button at every result page that would lead people to the main page.

should click 'Ctrl+Shift+R' to run this project


However there were several problems that I couldn't solve.
1. Still having problem with applying the changes from option tab to whole project.
2. I made the work size as the iphone screen size, but the height of the size is bigger than my labtop so when I run the project,, I can't see the whole page.
3. I had few errors while running the "Home button" but I solved it some of them. But still can't solve the problems between item1, item2, item3, and item4.
4. I tried to add the image(alicebar.png) of the first page, but error called 'null pointer exception' showed up.


Code


Tab 'alice_bar_cocktail'

int page = 1;

void setup()
{
  size(750, 1334);
  background(51);
  setup_selection();
 
}

void draw()
{
  if (page == 1) {
    draw_main();
  } else if (page == 2) {
    draw_selection();
  } else if (page == 3) {
    draw_option();
  }
}

void mousePressed() {
  if (page == 1) {
    mousePressed_main();
  }
  else if (page == 2) {
    mousePressed_selection();
  }
  else if (page == 3) {
    mousePressed_option();
  }
}

Tab 'main'

PImage title;

void setup_main()
{
  background(51);
  title=loadImage("alicebar.png");
}

void draw_main()
{
  background(51);
 
  //image(title, 0, 0);
 
  fill(51);
  strokeWeight(5);
  stroke(173, 255, 164);
  rect(150, 850, 450, 100, 20);
 
  stroke(255, 174, 44);
  rect(150, 1000, 450, 100, 20);
 
  fill(255);
  textSize(70);
  text("Matching", 225, 925);
  text("Option", 260, 1075);
 
}

void mousePressed_main()
{
  if (mouseX>150 && mouseX<600 && mouseY>850 && mouseY<950) {
    page = 2;
    setup_selection();
    stage=0;
    question=0;
    item1=0;
    item2=0;
    item3=0;
    item4=0;
  }
  if (mouseX>150 && mouseX<600 && mouseY>1000 && mouseY<1100) {
    page = 3;
  }
}

Tab 'selection'

int question = 0;

int item1 = 0;
int item2 = 0;
int item3 = 0;
int item4 = 0;
int stage = 0;

int choice = 0;
String sweet = "Sweet";
String bitter = "Bitter";
String drunk = "Drunk";
String tipsy = "Tipsy";
String happy = "Happy";
String gloomy = "Gloomy";
String fresh = "Fresh";
String deep = "Deep";

PImage parisien;
PImage malibuorange;
PImage margarita;
PImage peachcrush;
PImage kahluamilk;
PImage bluehawaii;
PImage tequilasunrise;
PImage midorisour;
PImage gimlet;
PImage godfather;
PImage kamikaze;
PImage cosmopolitan;
PImage b52;
PImage negroni;
PImage martini;
PImage manhattan;


void setup_selection()
{
  size(750, 1334);
  background(51);
  question=0;
 
  parisien=loadImage("1cock.png");
  malibuorange=loadImage("2cock.png");
  margarita=loadImage("3cock.png");
  peachcrush=loadImage("4cock.png");
  kahluamilk=loadImage("5cock.png");
  bluehawaii=loadImage("6cock.png");
  tequilasunrise=loadImage("7cock.png");
  midorisour=loadImage("8cock.png");
  gimlet=loadImage("9cock.png");
  godfather=loadImage("10cock.png");
  kamikaze=loadImage("11cock.png");
  cosmopolitan=loadImage("12cock.png");
  b52=loadImage("13cock.png");
  negroni=loadImage("14cock.png");
  martini=loadImage("15cock.png");
  manhattan=loadImage("16cock.png");
}

void draw_selection()
{
  background(51);
  strokeWeight(4);
 
  if (question >=0) {
    stroke(173, 255, 164);
  } else {
    stroke(200);
  }
  fill(51);
  circle(200, 400, 300);
 
  if (question >=1) {
    stroke(173, 255, 164);
  } else {
    stroke(200);
  }
  circle(555, 400, 300);
 
  if (question >=2) {
    stroke(173, 255, 164);
  } else {
    stroke(200);
  }
  circle(200, 750, 300);
 
  if (question >=3) {
    stroke(173, 255, 164);
  } else {
    stroke(200);
  }
  circle(555, 750, 300);
 
  noStroke();
  if (question >=4) {
    fill(173, 255, 164);
  } else {
    fill(200);
  }
  rect(70, 1000, 610, 150, 20);
 
  fill(50);
  textSize(60);
  text("Today's Cocktail", 145, 1090);
 
  fill(173, 255, 164);
  textSize(50);
  text("Q1", 160, 310);
 
  if (question >=1) {
    fill(173, 255, 164);
  } else {
    fill(200);
  }
  text("Q2", 520, 310);
 
  fill(200);
  text(sweet, 130, 400);
  text(bitter, 135, 480);
 
  if (question >=2) {
    fill(173, 255, 164);
  } else {
    fill(200);
  }
  text("Q3", 160, 665);
 
  if (question >=3) {
    fill(173, 255, 164);
  } else {
    fill(200);
  }
  text("Q4", 520, 665);
 
  if (item1 ==1) {
    fill(173, 255, 164);
    text(sweet, 130, 400);
    fill(200);
    text(bitter, 135, 480);
  }
  if (item1 == 2) {
    fill(200);
    text(sweet, 130, 400);
    fill(173, 255, 164);
    text(bitter, 135, 480);
  }
 
  fill(200);
  text(drunk, 480, 400);
  text(tipsy, 490, 480);
 
  if (item2 == 1) {
    fill(173, 255, 164);
    text(drunk, 480, 400);
    fill(200);
    text(tipsy, 490, 480);
  }
 
  if (item2 ==2) {
    fill(200);
    text(drunk, 480, 400);
    fill(173, 255, 164);
    text(tipsy, 490, 480);
  }
 
  fill(200);
  text(happy, 125, 750);
  text(gloomy, 110, 830);
 
  if (item3 == 1) {
    fill(173, 255, 164);
    text(happy, 125, 750);
    fill(200);
    text(gloomy, 110, 830);
  }
 
  if (item3 ==2) {
    fill(200);
    text(happy, 125, 750);
    fill(173, 255, 164);
    text(gloomy, 110, 830);
  }
 
  fill(200);
  text(fresh, 490, 750);
  text(deep, 495, 830);
 
  if (item4 == 1) {
    fill(173, 255, 164);
    text(fresh, 490, 750);
    fill(200);
    text(deep, 495, 830);
  }
 
  if (item4 ==2) {
    fill(200);
    text(fresh, 490, 750);
    fill(173, 255, 164);
    text(deep, 495, 830);
  }

  if(stage ==5) {
    if(item1==1 && item2==1 && item3==1 && item4 == 1) {
      image(parisien, 0, 0);
      fill(173, 255, 164);
      rect(640, 1100, 80, 80, 10);
      fill(51);
      text("H", 660, 1160);
    }
    if(item1==1 && item2==1 && item3==1 && item4==2) {
      image(malibuorange, 0, 0);
      fill(173, 255, 164);
      rect(640, 1100, 80, 80, 10);
      fill(51);
      text("H", 660, 1160);
    }
    if(item1==1 && item2==1 && item3==2 && item4==1) {
      image(margarita, 0, 0);
      fill(173, 255, 164);
      rect(640, 1100, 80, 80, 10);
      fill(51);
      text("H", 660, 1160);
    }
    if(item1==1 && item2==2 && item3==1 && item4==1) {
      image(peachcrush, 0, 0);
      fill(173, 255, 164);
      rect(640, 1100, 80, 80, 10);
      fill(51);
      text("H", 660, 1160);
    }
    if(item1==1 && item2==1 && item3==2 && item4==2) {
      image(kahluamilk, 0, 0);
      fill(173, 255, 164);
      rect(640, 1100, 80, 80, 10);
      fill(51);
      text("H", 660, 1160);
    }
    if(item1==1 && item2==2 && item3==1 && item4==2) {
      image(bluehawaii, 0, 0);
      fill(173, 255, 164);
      rect(640, 1100, 80, 80, 10);
      fill(51);
      text("H", 660, 1160);
    }
    if(item1==1 && item2==2 && item3==2 && item4==1) {
      image(tequilasunrise, 0, 0);
      fill(173, 255, 164);
      rect(640, 1100, 80, 80, 10);
      fill(51);
      text("H", 660, 1160);
    }
    if(item1==1 && item2==2 && item3==2 && item4==2) {
      image(midorisour, 0, 0);
      fill(173, 255, 164);
      rect(640, 1100, 80, 80, 10);
      fill(51);
      text("H", 660, 1160);
    }
    if(item1==2 && item2==1 && item3==1 && item4 == 1) {
      image(gimlet, 0, 0);
      fill(173, 255, 164);
      rect(640, 1100, 80, 80, 10);
      fill(51);
      text("H", 660, 1160);
    }
    if(item1==2 && item2==1 && item3==1 && item4==2) {
      image(godfather, 0, 0);
      fill(173, 255, 164);
      rect(640, 1100, 80, 80, 10);
      fill(51);
      text("H", 660, 1160);
    }
    if(item1==2 && item2==1 && item3==2 && item4==1) {
      image(kamikaze, 0, 0);
      fill(173, 255, 164);
      rect(640, 1100, 80, 80, 10);
      fill(51);
      text("H", 660, 1160);
    }
    if(item1==2 && item2==2 && item3==1 && item4==1) {
      image(cosmopolitan, 0, 0);
      fill(173, 255, 164);
      rect(640, 1100, 80, 80, 10);
      fill(51);
      text("H", 660, 1160);
    }
    if(item1==2 && item2==1 && item3==2 && item4==2) {
      image(b52, 0, 0);
      fill(173, 255, 164);
      rect(640, 1100, 80, 80, 10);
      fill(51);
      text("H", 660, 1160);
    }
    if(item1==2 && item2==2 && item3==1 && item4==2) {
      image(negroni, 0, 0);
      fill(173, 255, 164);
      rect(640, 1100, 80, 80, 10);
      fill(51);
      text("H", 660, 1160);
    }
    if(item1==2 && item2==2 && item3==2 && item4==1) {
      image(martini, 0, 0);fill(173, 255, 164);
      rect(640, 1100, 80, 80, 10);
      fill(51);
      text("H", 660, 1160);
    }
    if(item1==2 && item2==2 && item3==2 && item4==2) {
      image(manhattan, 0, 0);
      fill(173, 255, 164);
      rect(640, 1100, 80, 80, 10);
      fill(51);
      text("H", 660, 1160);
    }
   
    /*fill(173, 255, 164);
    rect(640, 1100, 80, 80, 10);
    fill(51);
    text("H", 660, 1160);*/
  }
 
}

void mousePressed_selection()
{
  //scale(0.5);
  if(mouseX>50 && mouseX<350 && mouseY>250 && mouseY<550) {
    question=1;
  }
 
  if(mouseX>405 && mouseX<705 && mouseY>250 && mouseY<550) {
    question=2;
  }
 
  if(mouseX>50 && mouseX<350 && mouseY>600 && mouseY<900) {
    question=3;
  }
 
  if(mouseX>405 && mouseX<705 && mouseY>600 && mouseY<900) {
    question=4;
  }
 
  if(mouseX>130 && mouseX<240 && mouseY>350 && mouseY<400) {
    stage = 1;
    item1=1;
  }
 
  if(mouseX>130 && mouseX<240 && mouseY>420 && mouseY<490) {
    stage = 1;
    item1=2;
  }
 
  if(mouseX>480 && mouseX<610 && mouseY>350 && mouseY<400) {
    stage = 2;
    item2=1;
  }
 
  if(mouseX>490 && mouseX<620 && mouseY>420 && mouseY<490) {
    stage = 2;
    item2=2;
  }
 
  if(mouseX>130 && mouseX<240 && mouseY>680 && mouseY<750) {
    stage = 3;
    item3=1;
  }
 
  if(mouseX>130 && mouseX<240 && mouseY>770 && mouseY<840) {
    stage = 3;
    item3=2;
  }
 
  if(mouseX>480 && mouseX<610 && mouseY>680 && mouseY<750) {
    stage = 4;
    item4=1;
  }
 
  if(mouseX>480 && mouseX<610 && mouseY>770 && mouseY<840) {
    stage = 4;
    item4=2;
  }
 
  if(mouseX>70 && mouseX<680 && mouseY>1000 && mouseY<1150) {
    stage=5;
  }
 
  if(mouseX>640 && mouseX<720 && mouseY>1100 && mouseY<1180) {
    page=1;
    question=0;
  }

}


Tab 'option'

void setup_option()
{
  background(51);
}

void draw_option()
{
  //background(51);
 
  stroke(255);
  strokeWeight(3);
 
  fill(51);
  circle(120, 405, 100);
 
  fill(30, 39, 57);
  circle(250, 405, 100);
 
  fill(94, 41, 64);
  circle(375, 405, 100);
 
  fill(42, 62, 28);
  circle(500, 405, 100);
 
  fill(81, 54, 56);
  circle(630, 405, 100);
 
  fill(173, 255, 164);
  rect(640, 1100, 80, 80, 10);
  fill(51);
  text("H", 660, 1160);
}

void mousePressed_option()
{
  /*if (mouseX>70 && mouseX<170 && mouseY>355 && mouseY<455) {
    background(51);
  }
  if (mouseX>200 && mouseX<300 && mouseY>355 && mouseY<455) {
    background(30, 39, 57);
  }
  if(mouseX>640 && mouseX<720 && mouseY>1100 && mouseY<1180) {
    page=1;
    question=0;
  }*/
}

Week 13 Interactive Video 2019

Developing the Final Project Part. 2


I extended the questions selections and made 16 different results could come out.
I also got the idea from your last week's lecture and made different tabs of each pages.


However there were several problems that I couldn't solve.
1. can I categorize? classify? each questions as each stage?
I faced this kind of problem. If I change the selection at question1, I want to make other selections to be disappear but bundling up each question with each stages doesn't work if I do the same thing as 'Stage 5'.

2. The next big thing I should solve is the option tab. I want to make the users able to change background color, circle color or sound on/off... things like this and started working on the background color one. But I couldn't find out how can I apply it(the change) to the whole program.



Code


Tab 'alice_bar_cocktail'

int page = 1;

void setup()
{
  size(750, 1334);
  background(51);
  setup_selection();
 
}

void draw()
{
  if (page == 1) {
    draw_main();
  } else if (page == 2) {
    draw_selection();
  } else if (page == 3) {
    draw_option();
  }
}

void mousePressed() {
  if (page == 1) {
    mousePressed_main();
  }
  else if (page == 2) {
    mousePressed_selection();
  }
  else if (page == 3) {
    mousePressed_option();
  }
}


Tab 'main'

void setup_main()
{
  background(51);
}

void draw_main()
{
  //background(51);
 
  fill(51);
  strokeWeight(5);
  stroke(173, 255, 164);
  rect(150, 850, 450, 100, 20);
 
  stroke(255, 174, 44);
  rect(150, 1000, 450, 100, 20);
 
  fill(255);
  textSize(70);
  text("Matching", 225, 925);
  text("Option", 260, 1075);
 
}

void mousePressed_main()
{
  if (mouseX>150 && mouseX<600 && mouseY>850 && mouseY<950) {
    page = 2;
    setup_selection();
  }
  if (mouseX>150 && mouseX<600 && mouseY>1000 && mouseY<1100) {
    page = 3;
  }
}


Tab 'option'

void setup_option()
{
  background(51);
}

void draw_option()
{
  background(51);
 
  stroke(255);
  strokeWeight(3);
 
  fill(51);
  circle(120, 405, 100);
 
  fill(30, 39, 57);
  circle(250, 405, 100);
 
  fill(94, 41, 64);
  circle(375, 405, 100);
 
  fill(42, 62, 28);
  circle(500, 405, 100);
 
  fill(81, 54, 56);
  circle(630, 405, 100);
}

void mousePressed_option()
{
  /*if (mouseX>70 && mouseX<170 && mouseY>355 && mouseY<455) {
    background(51);
  }
  if (mouseX>200 && mouseX<300 && mouseY>355 && mouseY<455) {
    background(30, 39, 57);
  }*/
}




이어지는 내용

Week 12 Interactive Video 2019


Developing the Final Project


I succeeded making the button colors change and match the result with the choices I made from the questions.
However the code needs some arrrangement because it's really rough right now.

I'm gonna increase the question buttons 2 to 4  and would make the illust of the cocktail come out at the end not only the name.


Code

int question = 0;

int item1 = 0;
int item2 = 0;

int choice = 0;
String sweet = "Sweet";
String bitter = "Bitter";
String drunk = "Drunk";
String tipsy = "Tipsy";
String answer = "";

String[] cocktails = new String[4];
//int[] cocktails = new int[4];

void setup()
{
  size(750, 1334);
  background(51);
 
  cocktails[0] = "ac";
  cocktails[1] = "ad";
  cocktails[2] = "bc";
  cocktails[3] = "bd";
}

void draw()
{
  //background(51);
  strokeWeight(4);
 
  if (question >=0) {
    stroke(173, 255, 164);
  } else {
    stroke(200);
  }
  fill(51);
  circle(200, 400, 300);
 
  if (question >=1) {
    stroke(173, 255, 164);
  } else {
    stroke(200);
  }
  circle(555, 400, 300);
 
  noStroke();
 
  if (question >=2) {
    fill(173, 255, 164);
  } else {
    fill(200);
  }
  circle(375, 700, 300);
 
  fill(50);
  textSize(40);
  text("Today's Cocktail", 225, 700);
 
  fill(173, 255, 164);
  textSize(50);
  text("Q1", 160, 310);
 
  if (question >=1) {
    fill(173, 255, 164);
  } else {
    fill(200);
  }
  text("Q2", 520, 310);
 
  fill(200);
  text(sweet, 130, 400);
  text(bitter, 135, 480);
 
  if (item1 >=1) {
    fill(173, 255, 164);
    text(sweet, 130, 400);
    fill(200);
    text(bitter, 135, 480);
  }
  if (item1 >= 2) {
    fill(200);
    text(sweet, 130, 400);
    fill(173, 255, 164);
    text(bitter, 135, 480);
  }
 
  fill(200);
  text(drunk, 480, 400);
  text(tipsy, 490, 480);
 
  if (item2 >= 1) {
    fill(173, 255, 164);
    text(drunk, 480, 400);
    fill(200);
    text(tipsy, 490, 480);
  }
 
  if (item2 >=2) {
    fill(200);
    text(drunk, 480, 400);
    fill(173, 255, 164);
    text(tipsy, 490, 480);
  }
   

 
 
}

void mousePressed()
{
  if(mouseX>50 && mouseX<350 && mouseY>250 && mouseY<550) {
    question=1;
  }
 
  if(mouseX>405 && mouseX<705 && mouseY>250 && mouseY<550) {
    question=2;
  }
 
  if(mouseX>130 && mouseX<240 && mouseY>350 && mouseY<400) {
    item1=1;
  }
 
  if(mouseX>130 && mouseX<240 && mouseY>420 && mouseY<490) {
    item1=2;
  }
 
  if(mouseX>480 && mouseX<610 && mouseY>350 && mouseY<400) {
    item2=1;
  }
 
  if(mouseX>490 && mouseX<620 && mouseY>420 && mouseY<490) {
    item2=2;
  }
 
  if(mouseX>225 && mouseX<525 && mouseY>550 && mouseY<850) {
    if(item1==1 && item2==1) {
      fill(173, 255, 164);
      text("Cosmopolitan", 250, 900);
    }
    if(item1==1 && item2==2) {
      fill(173, 255, 164);
      text("Peach Crush", 250, 900);
    }
    if(item1==2 && item2==1) {
      fill(173, 255, 164);
      text("Kamikaze", 250, 900);
    }
    if(item1==2 && item2==2) {
      fill(173, 255, 164);
      text("Black Russian", 250, 900);
    }
  }
}

1 2 3