Help: scenes in Processing

Processing Coding Questions
1

hello, I am working on an interactive story in processing only I am running into some things. I am quite new and I don’t understand everything yet but would like to learn.

I have made my codes very basic, now comes the problem of switching to different scenes.

For example, I have a building, by clicking on a window you go from scene 01 → scene 02 this is where I get stuck.

i would love it if you guys could give me some tips on how to do this :slight_smile:

2

this belongs to scene 01

int posX = 0;
int posY = 0;
int Xrect = 110;
int Yrect = 327;
int scene = 1;
boolean scene01 = false;
boolean scene02 = false;


void setup() {
  size(1500, 900);//frame maat
  frameRate(30);
  mouseX = 285;
  mouseY = 520;

}

void draw() {

  if (scene01) {
    background (#2a596c); // nacht baluw

    fill(246, 233, 15); // kleur sterren
    circle(136, 60, 9); //zichtbaar
    circle(41, 168, 9); //zichtbaar
    circle(133, 133, 9); //zichtbaar
    circle(213, 172, 9); //zichtbaar
    circle(276, 133, 9); //zichtbaar
    circle(500, 158, 9); //zichtbaar
    circle(400, 50, 12); //zichtbaar
    circle(30, 60, 14); //zichtbaar
    circle(250, 30, 14); //zichtbar
    circle(52, 328, 9); //zichtbaar
    circle(67, 416, 14); //zichtbaar
    circle(150, 250, 12); //zichtbaar
    circle(360, 158, 12); //zichtbaar
    circle(600, 238, 12); //zichtbaar

    circle(posX, posY, 10 );
    circle(posX, posY+100, 12);
    posX = posX + 3;
    posY = posY + 1;


    fill(#030000); //kleur vloer (zwart)
    rect(300, 820, 1500, 400); //vloer

    fill(#030000); //kleur vloer (zwart)
    rect(0, 820, 749, 819); //vloer

    fill(#3d235a); //kleur flatgebouw (paars)
    rect(90, 287, 295, 533); //flatgebouw

    fill(#413e3e); //kleur ramen (zwart,lampen uit
    rect(105, 657, 55, 72); //beganegrond links
    rect(315, 657, 55, 72); //beganegrond rechts

    square(110, 523, 79); //1ste etage links
    square(285, 520, 79);//1ste etage rechts

    square(110, 426, 79); //2e etage links
    square(285, 420, 79);//2e etage rechts

    if (millis() > 2000) {
      fill(#c6a902); //kleur raam (geel, disco)
    }

    if (millis() > 3000) {
      fill(#4deeea); //kleur raam (blauw, disco)
    }

    if (millis() > 4000) {
      fill(#74ee15); //kleur raam (groen, disco)
    }

    if (millis() > 5000) {
      fill(240, 0, 255); //kleur raam (roze, disco)
    }

    if (millis() > 6000) {
      fill(0, 30, 255); //kleur raam (paars, disco)
    }


    square(Xrect, Yrect, 79); //3e etage links




    fill(#413e3e); //kleur ramen (zwart, lamp uit)
    square(285, 325, 79);//3e etage rechts

    fill(#ea5b0c);
    rect(212, 695, 54, 111); //voordeur
    rect(199, 800, 79, 9); //traptree 2
    rect(190, 810, 95, 15); //traptree 1

    fill(#2e2916); //kleur vensterbankjes (bruin)
    rect(102, 730, 60, 5); //vensterbank beganegrond L
    rect(311, 730, 60, 5); //vensterbank beganegrond R

    rect(104, 600, 90, 6);//vensterbank 1e etage L
    rect(279, 600, 90, 6);//vensterbank 1e etage R

    rect(104, 500, 90, 6);//vensterbank 2e etage L
    rect(279, 500, 90, 6);//vensterbank 2e etage R

    rect(104, 400, 90, 6);//vensterbank 3e etage L
    rect(279, 400, 90, 6);//vensterbank 3e etage R

    fill(#270f0a); //kleur bruin boomstam01
    rect(1040, 670, 27, 150); //boomstam01

    fill(25, 60, 29); //kleur groen bladeren01
    noStroke(); //geen outline bladeren01
    ellipse(1006, 491, 35, 55); // bladeren boom
    ellipse(1050, 483, 82, 32); // bladeren boom
    ellipse(1004, 529, 30, 70); // bladeren boom
    ellipse(1075, 660, 48, 67);// bladeren boom
    ellipse(1090, 680, 80, 50);// bladeren boom
    ellipse(1000, 640, 80, 40);// bladeren boom
    ellipse(1100, 650, 49, 23);// bladeren boom
    ellipse(1120, 640, 60, 50);// bladeren boom
    ellipse(1140, 500, 20, 60);// bladeren boom
    ellipse(1100, 510, 80, 90);// bladeren boom
    ellipse(1045, 455, 60, 79);// bladeren boom
    ellipse(1100, 485, 60, 79);// bladeren boom


    circle(1038, 499, 55);// bladeren boom
    circle(986, 556, 50);// bladeren boom
    circle(1035, 660, 60);// bladeren boom
    circle(1002, 676, 40);// bladeren boom
    circle(1060, 590, 150);// bladeren boom
    circle(1000, 620, 50);// bladeren boom
    circle(1005, 521, 50);// bladeren boom
    circle(1140, 610, 40);// bladeren boom
    circle(1140, 580, 50);// bladeren boom
    circle(1140, 560, 60);// bladeren boom
    circle(1140, 530, 50);// bladeren boom

    fill(#270f0a); //kleur bruin boomstam02
    rect(1350, 670, 27, 150); //boomstam02

    fill(25, 60, 29); //kleur groen bladeren02
    noStroke(); //geen outline bladeren02
    ellipse(1306, 491, 35, 55); // bladeren boom
    ellipse(1350, 483, 82, 32);// bladeren boom
    ellipse(1304, 529, 30, 70);// bladeren boom
    ellipse(1375, 660, 48, 67);// bladeren boom
    ellipse(1390, 680, 80, 50);// bladeren boom
    ellipse(1300, 640, 80, 40);// bladeren boom
    ellipse(1400, 650, 49, 23);// bladeren boom
    ellipse(1420, 640, 60, 50);// bladeren boom
    ellipse(1440, 500, 20, 60);// bladeren boom
    ellipse(1400, 510, 80, 90);// bladeren boom
    ellipse(1345, 455, 60, 79);// bladeren boom
    ellipse(1400, 485, 60, 79);// bladeren boom


    circle(1338, 499, 55);// bladeren boom
    circle(1286, 556, 50);// bladeren boom
    circle(1335, 660, 60);// bladeren boom
    circle(1302, 676, 40);// bladeren boom
    circle(1360, 590, 150);// bladeren boom
    circle(1300, 620, 50);// bladeren boom
    circle(1305, 521, 50);// bladeren boom
    circle(1440, 610, 40);// bladeren boom
    circle(1440, 580, 50);// bladeren boom
    circle(1440, 560, 60);// bladeren boom
    circle(1440, 530, 50);// bladeren boom
  }
}

this belongs to scene 02

void setup() {
  size(1500, 900);//frame maat
  frameRate(30);
  mouseX = 285;
  mouseY = 520;
}
// scene 2A de ogen
void draw(){
  background(#030303);
  fill(#FFFFFF);
  circle(702, 336, 80);
  circle(810, 336, 80);
  fill(#FF0303);
  ellipse(810, 336, 18, 36);
  ellipse(702, 336, 18, 36);
  
// tekst scene 2A tekst
  textSize(100);
  text("On", 60, 820);
  
}
1 Like
3

Hey!

And welcome to the forum !

Great to have you here!

Your Night Scene looks great!!!

Now, the idea is that you have instead of boolean scene01, boolean scene02…
an int scene which is 0, then 1, then 2 etc.; it indicates just the scene you are in.

Here is an example.

  • Please note that we have a short function draw() because we put the content of the scenes into new functions scene0, scene1. Nice.
  • Please note that we have a new function mousePressed() which does also distinguish between the scenes using if-command.

I haven’t done this but it’s supposed to be inside function mousePressed() where you have the section for scene == 0. Here you would have to check mouseX and mouseY against the windows and only then say scene=1;.

For example

if(mouseX > 100 && 
   mouseX < 400 && 
   mouseY > 200 &&
   mouseY < 600 ) {
     scene=1; 
}

Warm regards,

Chrisir

Full Sketch

Full Sketch from both your Sketches. Of course you can only have one setup() and one draw() function.

int posX = 0;
int posY = 0;
int Xrect = 110;
int Yrect = 327;

int scene = 0;

// boolean scene01 = false;
// boolean scene02 = false;


void setup() {
  size(1500, 900);//frame maat
  frameRate(30);
  mouseX = 285;
  mouseY = 520;
}

void draw() {

  if (scene == 0) {
    // 0
    funcScene0();
  } else if (scene == 1) {
    // 1
    funcScene1();
  }
}

// -------------------------------------------------------------------------------------------

void mousePressed() {
  if (scene == 0) {
    // 0
    scene = 1;
  } else if (scene == 1) {
    // 1
    scene = 0;
  }
}

// -------------------------------------------------------------------------------------------
// SCENES

void funcScene0() {

  background (#2a596c); // nacht baluw

  fill(246, 233, 15); // kleur sterren
  circle(136, 60, 9); //zichtbaar
  circle(41, 168, 9); //zichtbaar
  circle(133, 133, 9); //zichtbaar
  circle(213, 172, 9); //zichtbaar
  circle(276, 133, 9); //zichtbaar
  circle(500, 158, 9); //zichtbaar
  circle(400, 50, 12); //zichtbaar
  circle(30, 60, 14); //zichtbaar
  circle(250, 30, 14); //zichtbar
  circle(52, 328, 9); //zichtbaar
  circle(67, 416, 14); //zichtbaar
  circle(150, 250, 12); //zichtbaar
  circle(360, 158, 12); //zichtbaar
  circle(600, 238, 12); //zichtbaar

  circle(posX, posY, 10 );
  circle(posX, posY+100, 12);
  posX = posX + 3;
  posY = posY + 1;


  fill(#030000); //kleur vloer (zwart)
  rect(300, 820, 1500, 400); //vloer

  fill(#030000); //kleur vloer (zwart)
  rect(0, 820, 749, 819); //vloer

  fill(#3d235a); //kleur flatgebouw (paars)
  rect(90, 287, 295, 533); //flatgebouw

  fill(#413e3e); //kleur ramen (zwart,lampen uit
  rect(105, 657, 55, 72); //beganegrond links
  rect(315, 657, 55, 72); //beganegrond rechts

  square(110, 523, 79); //1ste etage links
  square(285, 520, 79);//1ste etage rechts

  square(110, 426, 79); //2e etage links
  square(285, 420, 79);//2e etage rechts

  if (millis() > 2000) {
    fill(#c6a902); //kleur raam (geel, disco)
  }

  if (millis() > 3000) {
    fill(#4deeea); //kleur raam (blauw, disco)
  }

  if (millis() > 4000) {
    fill(#74ee15); //kleur raam (groen, disco)
  }

  if (millis() > 5000) {
    fill(240, 0, 255); //kleur raam (roze, disco)
  }

  if (millis() > 6000) {
    fill(0, 30, 255); //kleur raam (paars, disco)
  }


  square(Xrect, Yrect, 79); //3e etage links




  fill(#413e3e); //kleur ramen (zwart, lamp uit)
  square(285, 325, 79);//3e etage rechts

  fill(#ea5b0c);
  rect(212, 695, 54, 111); //voordeur
  rect(199, 800, 79, 9); //traptree 2
  rect(190, 810, 95, 15); //traptree 1

  fill(#2e2916); //kleur vensterbankjes (bruin)
  rect(102, 730, 60, 5); //vensterbank beganegrond L
  rect(311, 730, 60, 5); //vensterbank beganegrond R

  rect(104, 600, 90, 6);//vensterbank 1e etage L
  rect(279, 600, 90, 6);//vensterbank 1e etage R

  rect(104, 500, 90, 6);//vensterbank 2e etage L
  rect(279, 500, 90, 6);//vensterbank 2e etage R

  rect(104, 400, 90, 6);//vensterbank 3e etage L
  rect(279, 400, 90, 6);//vensterbank 3e etage R

  fill(#270f0a); //kleur bruin boomstam01
  rect(1040, 670, 27, 150); //boomstam01

  fill(25, 60, 29); //kleur groen bladeren01
  noStroke(); //geen outline bladeren01
  ellipse(1006, 491, 35, 55); // bladeren boom
  ellipse(1050, 483, 82, 32); // bladeren boom
  ellipse(1004, 529, 30, 70); // bladeren boom
  ellipse(1075, 660, 48, 67);// bladeren boom
  ellipse(1090, 680, 80, 50);// bladeren boom
  ellipse(1000, 640, 80, 40);// bladeren boom
  ellipse(1100, 650, 49, 23);// bladeren boom
  ellipse(1120, 640, 60, 50);// bladeren boom
  ellipse(1140, 500, 20, 60);// bladeren boom
  ellipse(1100, 510, 80, 90);// bladeren boom
  ellipse(1045, 455, 60, 79);// bladeren boom
  ellipse(1100, 485, 60, 79);// bladeren boom


  circle(1038, 499, 55);// bladeren boom
  circle(986, 556, 50);// bladeren boom
  circle(1035, 660, 60);// bladeren boom
  circle(1002, 676, 40);// bladeren boom
  circle(1060, 590, 150);// bladeren boom
  circle(1000, 620, 50);// bladeren boom
  circle(1005, 521, 50);// bladeren boom
  circle(1140, 610, 40);// bladeren boom
  circle(1140, 580, 50);// bladeren boom
  circle(1140, 560, 60);// bladeren boom
  circle(1140, 530, 50);// bladeren boom

  fill(#270f0a); //kleur bruin boomstam02
  rect(1350, 670, 27, 150); //boomstam02

  fill(25, 60, 29); //kleur groen bladeren02
  noStroke(); //geen outline bladeren02
  ellipse(1306, 491, 35, 55); // bladeren boom
  ellipse(1350, 483, 82, 32);// bladeren boom
  ellipse(1304, 529, 30, 70);// bladeren boom
  ellipse(1375, 660, 48, 67);// bladeren boom
  ellipse(1390, 680, 80, 50);// bladeren boom
  ellipse(1300, 640, 80, 40);// bladeren boom
  ellipse(1400, 650, 49, 23);// bladeren boom
  ellipse(1420, 640, 60, 50);// bladeren boom
  ellipse(1440, 500, 20, 60);// bladeren boom
  ellipse(1400, 510, 80, 90);// bladeren boom
  ellipse(1345, 455, 60, 79);// bladeren boom
  ellipse(1400, 485, 60, 79);// bladeren boom


  circle(1338, 499, 55);// bladeren boom
  circle(1286, 556, 50);// bladeren boom
  circle(1335, 660, 60);// bladeren boom
  circle(1302, 676, 40);// bladeren boom
  circle(1360, 590, 150);// bladeren boom
  circle(1300, 620, 50);// bladeren boom
  circle(1305, 521, 50);// bladeren boom
  circle(1440, 610, 40);// bladeren boom
  circle(1440, 580, 50);// bladeren boom
  circle(1440, 560, 60);// bladeren boom
  circle(1440, 530, 50);// bladeren boom
}//func

// -----------------------------------------------------------------------------------

void funcScene1() {

  background(#030303);
  fill(#FFFFFF);
  circle(702, 336, 80);
  circle(810, 336, 80);
  fill(#FF0303);
  ellipse(810, 336, 18, 36);
  ellipse(702, 336, 18, 36);

  // tekst scene 2A tekst
  textSize(100);
  text("On", 60, 820);
}//func
1 Like