# Help: scenes in Processing

**URL:** <https://discourse.processing.org/t/help-scenes-in-processing/41330>\
**Category:** Coding Questions\
**Created:** [March 16, 2023, 9:08pm UTC](https://discourse.processing.org/t/help-scenes-in-processing/41330 "2023-03-16T21:08:51Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![xnainie](https://avatars.discourse-cdn.com/v4/letter/x/3be4f8/32.png) [@xnainie](https://discourse.processing.org/u/xnainie)\
**Post date:** [March 16, 2023, 9:08pm UTC](https://discourse.processing.org/t/help-scenes-in-processing/41330/1 "2023-03-16T21:08:51Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![xnainie](https://avatars.discourse-cdn.com/v4/letter/x/3be4f8/32.png) [@xnainie](https://discourse.processing.org/u/xnainie)\
**Post date:** [March 16, 2023, 9:09pm UTC](https://discourse.processing.org/t/help-scenes-in-processing/41330/2 "2023-03-16T21:09:46Z")

</div>

this belongs to scene 01

```auto
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

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

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 16, 2023, 9:46pm UTC](https://discourse.processing.org/t/help-scenes-in-processing/41330/3 "2023-03-16T21:46:03Z")

</div>

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`.

> [@xnainie](#):
>
> by clicking on a window you go from scene 01 → scene 02

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

```auto
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.

```auto
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

```