# Help: scenes in Processing

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

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

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

fill(25, 60, 29); //kleur groen 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

}
}
``````

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

Hey!

And welcome to the forum !

Great to have you here!

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

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

fill(25, 60, 29); //kleur groen 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

}//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