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);
    }
  }
}

Week 11_2 Interactive Video 2019

Alice Bar : Today's Cocktail

Algorithm




Week 11_1 Interactive Video 2019

Alice Bar : Today's Cocktail

2018312361

Da In Jeong

Interactive Video 2019, SKKU

 

What?

 

I changed my idea to Alice Bar : Today's Cocktail!

I really liked the comment that gave me the idea of 'recommendation' at last weeks presentation.

So I came up with the idea of matching people with each cocktail that fits their mood and preference of taste.

They can check 5 questions which is A or B, and after they answer the 5 questions, they can see 'Today's cocktail'.

Today's cocktail would show up not only the cocktail's image and name but also the information of the cocktails.

 

Why?

 

We always think a lot in front of the list of cocktails from the menu at the bar. Which cocktail should I drink? However making the perfect answer for that question is quite hard. I wanted to make an application that could give the people with this kind of trouble not perfect but quite beneficial answer. Considering their preference of taste and their mood that day. Want everyone to enjoy drinking cocktail!

 

Who?

 

For the people who wants the decision of Which cocktail should I drink today?


Wire Frame


Reference








1 2 3