# Activar botón y volver a escena intermedia

**URL:** https://discourse.processing.org/t/activar-boton-y-volver-a-escena-intermedia/16303
**Category:** Processing for Android
**Created:** [December 10, 2019, 9:54pm UTC](https://discourse.processing.org/t/activar-boton-y-volver-a-escena-intermedia/16303 "2019-12-10T21:54:07Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)
#### Post date: [December 10, 2019, 9:54pm UTC](https://discourse.processing.org/t/activar-boton-y-volver-a-escena-intermedia/16303/1 "2019-12-10T21:54:07Z")

</div>

Hi guys,

I need some help to make a button work.

On the one hand I have a little presentation of my program using two scenes.

```auto

void setup(){
  size(270,540);
  background(0,0,0);
  noStroke();
  smooth();
}  

void scene1() {
  background(0,0,0);
  fill(255, 255, 255, 255);
  textSize(height/12);
  textAlign(RIGHT, CENTER);   
  text("deep", width/2, height/2);
  fill(255, 204 , 0, 255);
  textSize(height/12);
  textAlign(LEFT, CENTER);
  text("focus", width/2, height/2); 
  fill(255, 95, 95, 255);
  textSize(height/36);
  textAlign(CENTER, CENTER);
  text("@deepfocusapp", width/2, height/1.1);
 
}

void scene2() {
  String a = "1. Cuenta cada círculo que aparece en la pantalla.";
  String b = "2. Cada vez que te distraigas, devuelve tu atención a los círculos que estás contando.";
  String c = "Instrucciones.";
  
  background(255);
  fill(0);
  stroke(255,95,95);
  strokeWeight(1);
  line(width/10, height/5, width/1.15, height/5);
  textAlign(LEFT, TOP);
  textSize(height/22);
  text(c, width/10, height/10, width/1.2, height/6.66);
  textSize(height/33);
  text(a, width/10, height/4, width/1.2, height/3.33);
  textSize(height/33);
  text(b, width/10, height/2.5, width/1.2, height/2.22);
 
  //this is my button 
  fill(255,95,95);
  noStroke();
  circle(width/2, height/1.3, height/9);
  noFill();
  stroke(255);
  strokeWeight(3);
  circle(width/2, height/1.3, height/16); 
  noStroke();
  fill(255);
  circle(width/2, height/1.3, height/80);
}
   

void draw (){
  int m = millis();
  if(m < 5000) {
    scene1();
  } else if(m > 5000) {
    scene2();
  }
 
}

```

Second scene has a button and I want it to activate following animation when you touch it. I thought to create an scene 3 with animation, but I don’t know how to link it with the button.

```auto
int cx, cy;
float secondsRadius;

float clockDiameter;

void setup() {
  size(270, 540);
  stroke(255);
  
  int radius = min(width, height) / 2;
  secondsRadius = radius * 0.72;
  clockDiameter = radius * 1.8;
  
  cx = width / 2;
  cy = height / 2;
}

void draw() {
  background(255,95,95);
  
 
  
  // Angles for sin() and cos() start at 3 o'clock;
  // subtract HALF_PI to make them start at the top
  float s = map(second(), 0, 10, 0, TWO_PI);
  
    
  // Draw the hand of the clock
  stroke(255);
  strokeWeight(5);
  line(cx, cy, cx + cos(s) * secondsRadius, cy + sin(s) * secondsRadius);

  
  // Draw the second ticks
  strokeWeight(5);
  beginShape(POINTS);
  for (int a = 0; a < 360; a+=36) {
    float angle = radians(a);
    float x = cx + cos(angle) * secondsRadius;
    float y = cy + sin(angle) * secondsRadius;
    vertex(x, y);
  }
  endShape();
}

```

Finally, I want that you can come back to the scene 2 by touching screen. Do you know how can I make it?

Thanks!

---

<div class="post-metadata">

### Author: ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)
#### Post date: [December 11, 2019, 12:38am UTC](https://discourse.processing.org/t/activar-boton-y-volver-a-escena-intermedia/16303/2 "2019-12-11T00:38:59Z")

</div>

You should change the Code in draw to a switch statement and use cases.

Something like :

```auto
String scene = "initial";

void draw() {
   switch (scene) {
      default : 
         scene1();
         if (millis() > 5000) scene = "millis5000"; //default is here in case you want to go back to the scene1() but not be sent immediately to scene2() just because millis is over 5000
         break;
      case "initial" : 
         scene1();
         break;
      case "millis5000" : 
         scene2();
         break;
   }
}

```

That was just some hint in the right direction. To actually make use of it, you‘ll need to do a bit more.

Anyway, as for the Button, just add an if statement to check if mouseX and Y are within the bounds of your Button. There are easily over 100 topics about exactly that, describing in Detail how to do it.

---

<div class="post-metadata">

### Author: ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)
#### Post date: [December 11, 2019, 3:06pm UTC](https://discourse.processing.org/t/activar-boton-y-volver-a-escena-intermedia/16303/3 "2019-12-11T15:06:49Z")

</div>

Thanks Lexyth,

I used that code but it does not work, program load scene 1 and stops there. And what I did with the button doesn’t work either.

```auto

void setup(){
  size(270,540);
  background(0,0,0);
  noStroke();
}  

void scene1() {
  background(0,0,0);
  fill(255, 255, 255, 255);
  textSize(height/12);
  textAlign(RIGHT, CENTER);   
  text("deep", width/2, height/2);
  fill(255, 204 , 0, 255);
  textSize(height/12);
  textAlign(LEFT, CENTER);
  text("focus", width/2, height/2); 
  fill(255, 95, 95, 255);
  textSize(height/36);
  textAlign(CENTER, CENTER);
  text("@deepfocusapp", width/2, height/1.1);
 
}

void scene2() {
  String a = "1. Cuenta cada círculo que aparece en la pantalla.";
  String b = "2. Cada vez que te distraigas, devuelve tu atención a los círculos que estás contando.";
  String c = "Instrucciones.";
  
  background(255);
  fill(0);
  stroke(255,95,95);
  strokeWeight(1);
  line(width/10, height/5, width/1.15, height/5);
  textAlign(LEFT, TOP);
  textSize(height/22);
  text(c, width/10, height/10, width/1.2, height/6.66);
  textSize(height/34);
  text(a, width/10, height/4, width/1.2, height/3.33);
  textSize(height/34);
  text(b, width/10, height/2.5, width/1.2, height/2.22);
 
  //this is my button 
  fill(255,95,95);
  noStroke();
  circle(width/2, height/1.35, height/9);
  noFill();
  stroke(255);
  strokeWeight(4);
  circle(width/2, height/1.35, height/16); 
  noStroke();
  fill(255);
  circle(width/2, height/1.35, height/80);
}

String scene = "initial";
   
void draw (){
  switch (scene) {
      default:
      scene1();
      if (millis() > 5000) scene = "millis5000";
      case "initial":
      scene1();
      break;
      case "millis5000":
      scene2();
  }

 if ((mousePressed) && (mouseX = width/2, mouseY = height/1.35)){
  scene();   
}

}
  

```

---

<div class="post-metadata">

### Author: ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)
#### Post date: [December 11, 2019, 4:04pm UTC](https://discourse.processing.org/t/activar-boton-y-volver-a-escena-intermedia/16303/4 "2019-12-11T16:04:21Z")

</div>

[https://processing.org/reference/switch.html](https://processing.org/reference/switch.html)

```auto

String scene = "initial";

void draw () {
  switch (scene) {
  case "initial":
    if (millis() > 5000) scene = "millis5000";
    scene1();
    break;
  case "millis5000":
    scene2();
    break;
  default:
    scene1();
    break;
  }
}

```

also i find

```auto
int scene = 1;

void setup() {
}

void draw() {
  if ( scene == 1 ) scene1();
  else if ( scene == 2 ) scene2();
  else println("bad scene "+scene);
}

void scene1() {
  if (millis() > 5000) scene = 2;
  background(0, 0, 80);
  text("scene1", 10, 10);
}

void scene2() {
  background(0, 100, 80);
  text("scene2", 10, 10);
}

```

more easy / readable

---

<div class="post-metadata">

### Author: ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)
#### Post date: [December 11, 2019, 5:22pm UTC](https://discourse.processing.org/t/activar-boton-y-volver-a-escena-intermedia/16303/5 "2019-12-11T17:22:21Z")

</div>

thanks kll, any of them works. Finally, I don’t know how make my buttón start this animation:

```auto
int cx, cy;
float secondsRadius;

float clockDiameter;

void setup() {
  size(270, 540);
  stroke(255);
  
  int radius = min(width, height) / 2;
  secondsRadius = radius * 0.72;
  clockDiameter = radius * 1.8;
  
  cx = width / 2;
  cy = height / 2;
}

void draw() {
  background(255,95,95);
  
 
  
  // Angles for sin() and cos() start at 3 o'clock;
  // subtract HALF_PI to make them start at the top
  float s = map(second(), 0, 10, 0, TWO_PI);
  
    
  // Draw the hand of the clock
  stroke(255);
  strokeWeight(5);
  line(cx, cy, cx + cos(s) * secondsRadius, cy + sin(s) * secondsRadius);

  
  // Draw the second ticks
  strokeWeight(5);
  beginShape(POINTS);
  for (int a = 0; a < 360; a+=36) {
    float angle = radians(a);
    float x = cx + cos(angle) * secondsRadius;
    float y = cy + sin(angle) * secondsRadius;
    vertex(x, y);
  }
  endShape();
}

```

May I call it scene too? And may I use `if ((mousePressed) && (mouseX = width/2, mouseY = height/1.35)){  
scene();  
}

?`

---

<div class="post-metadata">

### Author: ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)
#### Post date: [December 11, 2019, 6:49pm UTC](https://discourse.processing.org/t/activar-boton-y-volver-a-escena-intermedia/16303/6 "2019-12-11T18:49:14Z")

</div>

I am not quite sure how you got 2 setup and 2 void functions to work in the same Code? The way i see it you got 2 different Sketches here and want to combine them?

---

<div class="post-metadata">

### Author: ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)
#### Post date: [December 11, 2019, 7:38pm UTC](https://discourse.processing.org/t/activar-boton-y-volver-a-escena-intermedia/16303/7 "2019-12-11T19:38:38Z")

</div>

Yes, that is the point. I made them in separated sketches and I want to combine them. I dont know if I have to create a new scene, called for example scene 3, that includes void draw from mi clock animation. I want to start it pushing the button, and stop it and coming back to scene 2 by touching the screen.

---

<div class="post-metadata">

### Author: ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)
#### Post date: [December 11, 2019, 8:08pm UTC](https://discourse.processing.org/t/activar-boton-y-volver-a-escena-intermedia/16303/8 "2019-12-11T20:08:33Z")

</div>

I tried here, but I think it’s a little disaster 🙈

```auto
int cx, cy;
int offset;

float secondsRadius;
float clockDiameter;

void setup(){
  size(270,540);
  background(0,0,0);
  noStroke();
  offset = second();
  int radius = min(width, height) / 2;
  secondsRadius = radius * 0.72;
  clockDiameter = radius * 1.8;
  
  cx = width / 2;
  cy = height / 2;
  
  
}  

void scene1() {
  background(0,0,0);
  fill(255, 255, 255, 255);
  textSize(height/12);
  textAlign(RIGHT, CENTER);   
  text("deep", width/2, height/2);
  fill(255, 204 , 0, 255);
  textSize(height/12);
  textAlign(LEFT, CENTER);
  text("focus", width/2, height/2); 
  fill(255, 95, 95, 255);
  textSize(height/36);
  textAlign(CENTER, CENTER);
  text("@deepfocusapp", width/2, height/1.1);
 
}

void scene2() {
  String a = "1. Cuenta cada círculo que aparece en la pantalla.";
  String b = "2. Cada vez que te distraigas, devuelve tu atención a los círculos que estás contando.";
  String c = "Instrucciones.";
  
  background(255);
  fill(0);
  stroke(255,95,95);
  strokeWeight(1);
  line(width/10, height/5, width/1.15, height/5);
  textAlign(LEFT, TOP);
  textSize(height/22);
  text(c, width/10, height/10, width/1.2, height/6.66);
  textSize(height/34);
  text(a, width/10, height/4, width/1.2, height/3.33);
  textSize(height/34);
  text(b, width/10, height/2.5, width/1.2, height/2.22);
 
  //this is my button 
  fill(255,95,95);
  noStroke();
  circle(width/2, height/1.35, height/9);
  noFill();
  stroke(255);
  strokeWeight(4);
  circle(width/2, height/1.35, height/16); 
  noStroke();
  fill(255);
  circle(width/2, height/1.35, height/80);
}
   
void scene3(){
  background(247,108,127);
  float l = width/255;
  strokeWeight(1);
  for(int i = 0; i<width; i++) {
  stroke(252,150,120,255-i/(l));
  line(i,0,i, height);
}
  

  float s = -map(second()-offset, 0, 10, 0, TWO_PI) -HALF_PI; 

  stroke(255);
  strokeWeight(5);
  line(cx, cy, cx + cos(s) * secondsRadius, cy + sin(s) * secondsRadius);

  strokeWeight(5);
  beginShape(POINTS);
  for (int a = 0; a < 360; a+=36) {
    float angle = radians(a)+HALF_PI;
    float x = cx + cos(angle) * secondsRadius;
    float y = cy + sin(angle) * secondsRadius;
    vertex(x, y);
  }
  endShape();
}
  

String scene = "initial";

void draw () {
  switch (scene) {
  case "initial":
    if (millis() > 5000) scene = "millis5000";
    scene1();
    break;
  case "millis5000":
    scene2();
    break;
  default:
    scene1();
    break;
    if ((mousePressed) && (mouseX = width/2, mouseY = height/1.35)){
    scene3();
  }
  }

```

---

<div class="post-metadata">

### Author: ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)
#### Post date: [December 11, 2019, 8:37pm UTC](https://discourse.processing.org/t/activar-boton-y-volver-a-escena-intermedia/16303/9 "2019-12-11T20:37:15Z")

</div>

To combine 2 Sketches, you just need to copy paste all the variables/methods together (what is in draw in sketch 1 goes in draw in sketch 2, not in a second draw!). But in your case, you want to have what is in draw to be in scene3() method!

Like this :

```auto
//Sketch 1

void setup() {

//setup in sketch 1

}

void draw() {
// draw of sketch 1
}

void scene1() {
}
void scene2() {
}

```

Sketch 2

```auto
void setup() {
//sketch 2 setup
}

void draw() {
//sketch 2 draw
}

```

And the combined sketch would be :

```auto
//all the global variables of both Sketches (avoid multiple times the same name)

void setup() {
//sketch 1 setup

//sketch 2 setup
}

void draw() {
//sketch 1 draw
}

void scene1(){}
void scene2() {}

void scene3() {
//draw of sketch 2
}

```

---

<div class="post-metadata">

### Author: ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)
#### Post date: [December 11, 2019, 8:41pm UTC](https://discourse.processing.org/t/activar-boton-y-volver-a-escena-intermedia/16303/10 "2019-12-11T20:41:08Z")

</div>

I know, I did it in this sketch but I think it is not right.

```auto
int cx, cy;
int offset;

float secondsRadius;
float clockDiameter;

void setup(){
  size(270,540);
  background(0,0,0);
  noStroke();
  offset = second();
  int radius = min(width, height) / 2;
  secondsRadius = radius * 0.72;
  clockDiameter = radius * 1.8;
  
  cx = width / 2;
  cy = height / 2;
  
  
}  

void scene1() {
  background(0,0,0);
  fill(255, 255, 255, 255);
  textSize(height/12);
  textAlign(RIGHT, CENTER);   
  text("deep", width/2, height/2);
  fill(255, 204 , 0, 255);
  textSize(height/12);
  textAlign(LEFT, CENTER);
  text("focus", width/2, height/2); 
  fill(255, 95, 95, 255);
  textSize(height/36);
  textAlign(CENTER, CENTER);
  text("@deepfocusapp", width/2, height/1.1);
 
}

void scene2() {
  String a = "1. Cuenta cada círculo que aparece en la pantalla.";
  String b = "2. Cada vez que te distraigas, devuelve tu atención a los círculos que estás contando.";
  String c = "Instrucciones.";
  
  background(255);
  fill(0);
  stroke(255,95,95);
  strokeWeight(1);
  line(width/10, height/5, width/1.15, height/5);
  textAlign(LEFT, TOP);
  textSize(height/22);
  text(c, width/10, height/10, width/1.2, height/6.66);
  textSize(height/34);
  text(a, width/10, height/4, width/1.2, height/3.33);
  textSize(height/34);
  text(b, width/10, height/2.5, width/1.2, height/2.22);
 
  //this is my button 
  fill(255,95,95);
  noStroke();
  circle(width/2, height/1.35, height/9);
  noFill();
  stroke(255);
  strokeWeight(4);
  circle(width/2, height/1.35, height/16); 
  noStroke();
  fill(255);
  circle(width/2, height/1.35, height/80);
}
   
void scene3(){
  background(247,108,127);
  float l = width/255;
  strokeWeight(1);
  for(int i = 0; i<width; i++) {
  stroke(252,150,120,255-i/(l));
  line(i,0,i, height);
}
  

  float s = -map(second()-offset, 0, 10, 0, TWO_PI) -HALF_PI; 

  stroke(255);
  strokeWeight(5);
  line(cx, cy, cx + cos(s) * secondsRadius, cy + sin(s) * secondsRadius);

  strokeWeight(5);
  beginShape(POINTS);
  for (int a = 0; a < 360; a+=36) {
    float angle = radians(a)+HALF_PI;
    float x = cx + cos(angle) * secondsRadius;
    float y = cy + sin(angle) * secondsRadius;
    vertex(x, y);
  }
  endShape();
}
  

String scene = "initial";

void draw () {
  switch (scene) {
  case "initial":
    if (millis() > 5000) scene = "millis5000";
    scene1();
    break;
  case "millis5000":
    scene2();
    break;
  default:
    scene1();
    break;
    if ((mousePressed) && (mouseX = width/2, mouseY = height/1.35)){
    scene3();
  }
  }

```

---

<div class="post-metadata">

### Author: ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)
#### Post date: [December 11, 2019, 8:52pm UTC](https://discourse.processing.org/t/activar-boton-y-volver-a-escena-intermedia/16303/11 "2019-12-11T20:52:20Z")

</div>

You‘re missing the last } in draw. Also, this is how to detect if something within a boundary (rect) :

```auto
if ((mousePressed) && (mouseX > width/2-50 && mouseX < width/2+50 && mouseY < height/1.35 + 50 && mouseY > height/1.35 -50)){

//or for circles

if (mousePressed && dist(mouseX, mouseY, circleCenterX, circleCenterY) < circleRadius)

```

Also, mouseX == 0 is a condition that returns true if mouseX is equal to 0, while mouseX = 0 is setting mouseX to 0.

I already managet to get it to work, so if you follow these steps, it‘ll definetly work.

---

<div class="post-metadata">

### Author: ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)
#### Post date: [December 11, 2019, 9:10pm UTC](https://discourse.processing.org/t/activar-boton-y-volver-a-escena-intermedia/16303/12 "2019-12-11T21:10:33Z")

</div>

Thanks @Lexyth

I did it that way, but I think its wrong.

```auto
int cx, cy;
int offset;

float secondsRadius;
float clockDiameter;

void setup(){
  size(270,540);
  background(0,0,0);
  noStroke();
  offset = second();
  int radius = min(width, height) / 2;
  secondsRadius = radius * 0.72;
  clockDiameter = radius * 1.8;
  
  cx = width / 2;
  cy = height / 2;
  
  
}  

void scene1() {
  background(0,0,0);
  fill(255, 255, 255, 255);
  textSize(height/12);
  textAlign(RIGHT, CENTER);   
  text("deep", width/2, height/2);
  fill(255, 204 , 0, 255);
  textSize(height/12);
  textAlign(LEFT, CENTER);
  text("focus", width/2, height/2); 
  fill(255, 95, 95, 255);
  textSize(height/36);
  textAlign(CENTER, CENTER);
  text("@deepfocusapp", width/2, height/1.1);
 
}

void scene2() {
  String a = "1. Cuenta cada círculo que aparece en la pantalla.";
  String b = "2. Cada vez que te distraigas, devuelve tu atención a los círculos que estás contando.";
  String c = "Instrucciones.";
  
  background(255);
  fill(0);
  stroke(255,95,95);
  strokeWeight(1);
  line(width/10, height/5, width/1.15, height/5);
  textAlign(LEFT, TOP);
  textSize(height/22);
  text(c, width/10, height/10, width/1.2, height/6.66);
  textSize(height/34);
  text(a, width/10, height/4, width/1.2, height/3.33);
  textSize(height/34);
  text(b, width/10, height/2.5, width/1.2, height/2.22);
 
  //this is my button 
  fill(255,95,95);
  noStroke();
  circle(width/2, height/1.35, height/9);
  noFill();
  stroke(255);
  strokeWeight(4);
  circle(width/2, height/1.35, height/16); 
  noStroke();
  fill(255);
  circle(width/2, height/1.35, height/80);
}
   
void scene3(){
  background(247,108,127);
  float l = width/255;
  strokeWeight(1);
  for(int i = 0; i<width; i++) {
  stroke(252,150,120,255-i/(l));
  line(i,0,i, height);
}
  

  float s = -map(second()-offset, 0, 10, 0, TWO_PI) -HALF_PI; 

  stroke(255);
  strokeWeight(5);
  line(cx, cy, cx + cos(s) * secondsRadius, cy + sin(s) * secondsRadius);

  strokeWeight(5);
  beginShape(POINTS);
  for (int a = 0; a < 360; a+=36) {
    float angle = radians(a)+HALF_PI;
    float x = cx + cos(angle) * secondsRadius;
    float y = cy + sin(angle) * secondsRadius;
    vertex(x, y);
  }
  endShape();
}
  

String scene = "initial";

void draw () {
  switch (scene) {
  case "initial":
    if (millis() > 5000) scene = "millis5000";
    scene1();
    break;
  case "millis5000":
    scene2();
    break;
  default:
    scene1();
    break;
    if (mousePressed && dist(mouseX, mouseY, circleCenterX, circleCenterY) < circleRadius));
    else if (mouseX == 0);
    
  }
}

```

---

<div class="post-metadata">

### Author: ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)
#### Post date: [December 11, 2019, 9:15pm UTC](https://discourse.processing.org/t/activar-boton-y-volver-a-escena-intermedia/16303/13 "2019-12-11T21:15:08Z")

</div>

The if statement has to be in case „millis5000“.

The default case is only there in case of problems, or as i intended it for the first loadup where you have to wait 5000 milisecond, but that‘s not really necessary Anyway. Just refrain from adding stuff there, since it’s generally not going to be called (except in Special situations).

---

<div class="post-metadata">

### Author: ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)
#### Post date: [December 11, 2019, 9:30pm UTC](https://discourse.processing.org/t/activar-boton-y-volver-a-escena-intermedia/16303/14 "2019-12-11T21:30:04Z")

</div>

So I deleted last default case, but it’s not working either.

```auto
int cx, cy;
int offset;

float secondsRadius;
float clockDiameter;

void setup(){
  size(270,540);
  background(0,0,0);
  noStroke();
  offset = second();
  int radius = min(width, height) / 2;
  secondsRadius = radius * 0.72;
  clockDiameter = radius * 1.8;
  
  cx = width / 2;
  cy = height / 2;
  
  
}  

void scene1() {
  background(0,0,0);
  fill(255, 255, 255, 255);
  textSize(height/12);
  textAlign(RIGHT, CENTER);   
  text("deep", width/2, height/2);
  fill(255, 204 , 0, 255);
  textSize(height/12);
  textAlign(LEFT, CENTER);
  text("focus", width/2, height/2); 
  fill(255, 95, 95, 255);
  textSize(height/36);
  textAlign(CENTER, CENTER);
  text("@deepfocusapp", width/2, height/1.1);
 
}

void scene2() {
  String a = "1. Cuenta cada círculo que aparece en la pantalla.";
  String b = "2. Cada vez que te distraigas, devuelve tu atención a los círculos que estás contando.";
  String c = "Instrucciones.";
  
  background(255);
  fill(0);
  stroke(255,95,95);
  strokeWeight(1);
  line(width/10, height/5, width/1.15, height/5);
  textAlign(LEFT, TOP);
  textSize(height/22);
  text(c, width/10, height/10, width/1.2, height/6.66);
  textSize(height/34);
  text(a, width/10, height/4, width/1.2, height/3.33);
  textSize(height/34);
  text(b, width/10, height/2.5, width/1.2, height/2.22);
 
  //this is my button 
  fill(255,95,95);
  noStroke();
  circle(width/2, height/1.35, height/9);
  noFill();
  stroke(255);
  strokeWeight(4);
  circle(width/2, height/1.35, height/16); 
  noStroke();
  fill(255);
  circle(width/2, height/1.35, height/80);
}
   
void scene3(){
  background(247,108,127);
  float l = width/255;
  strokeWeight(1);
  for(int i = 0; i<width; i++) {
  stroke(252,150,120,255-i/(l));
  line(i,0,i, height);
}
  

  float s = -map(second()-offset, 0, 10, 0, TWO_PI) -HALF_PI; 

  stroke(255);
  strokeWeight(5);
  line(cx, cy, cx + cos(s) * secondsRadius, cy + sin(s) * secondsRadius);

  strokeWeight(5);
  beginShape(POINTS);
  for (int a = 0; a < 360; a+=36) {
    float angle = radians(a)+HALF_PI;
    float x = cx + cos(angle) * secondsRadius;
    float y = cy + sin(angle) * secondsRadius;
    vertex(x, y);
  }
  endShape();
}
  

String scene = "initial";

void draw () {
  switch (scene) {
  case "initial":
    if (millis() > 5000) scene = "millis5000";
    scene1();
    break;
  case "millis5000":
    scene2();
    break;
  
    if (mousePressed && dist(mouseX, mouseY, circleCenterX, circleCenterY) < circleRadius));
    else if (mouseX == 0);
    
  }
}

```

---

<div class="post-metadata">

### Author: ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)
#### Post date: [December 11, 2019, 11:45pm UTC](https://discourse.processing.org/t/activar-boton-y-volver-a-escena-intermedia/16303/15 "2019-12-11T23:45:16Z")

</div>

The if statement has to be before the break!.. break; tells The switch statement that it should not continue. So anything after that will be ignore (generally works like an „else“ in „if else“, but in this case, that’s not really what happens. More that it works like a return in this case, although it doesn‘t return anything… it just tells to ignore the Rest of the switch Code).

---

<div class="post-metadata">

### Author: ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)
#### Post date: [December 12, 2019, 3:31am UTC](https://discourse.processing.org/t/activar-boton-y-volver-a-escena-intermedia/16303/16 "2019-12-12T03:31:35Z")

</div>

So I tried that, but It doesn’t work.

```auto
int cx, cy;
int offset;

float secondsRadius;
float clockDiameter;

void setup(){
  size(270,540);
  background(0,0,0);
  noStroke();
  offset = second();
  int radius = min(width, height) / 2;
  secondsRadius = radius * 0.72;
  clockDiameter = radius * 1.8;
  
  cx = width / 2;
  cy = height / 2;
  
  
}  

void scene1() {
  background(0,0,0);
  fill(255, 255, 255, 255);
  textSize(height/12);
  textAlign(RIGHT, CENTER);   
  text("deep", width/2, height/2);
  fill(255, 204 , 0, 255);
  textSize(height/12);
  textAlign(LEFT, CENTER);
  text("focus", width/2, height/2); 
  fill(255, 95, 95, 255);
  textSize(height/36);
  textAlign(CENTER, CENTER);
  text("@deepfocusapp", width/2, height/1.1);
 
}

void scene2() {
  String a = "1. Cuenta cada círculo que aparece en la pantalla.";
  String b = "2. Cada vez que te distraigas, devuelve tu atención a los círculos que estás contando.";
  String c = "Instrucciones.";
  
  background(255);
  fill(0);
  stroke(255,95,95);
  strokeWeight(1);
  line(width/10, height/5, width/1.15, height/5);
  textAlign(LEFT, TOP);
  textSize(height/22);
  text(c, width/10, height/10, width/1.2, height/6.66);
  textSize(height/34);
  text(a, width/10, height/4, width/1.2, height/3.33);
  textSize(height/34);
  text(b, width/10, height/2.5, width/1.2, height/2.22);
 
  //this is my button 
  fill(255,95,95);
  noStroke();
  circle(width/2, height/1.35, height/9);
  noFill();
  stroke(255);
  strokeWeight(4);
  circle(width/2, height/1.35, height/16); 
  noStroke();
  fill(255);
  circle(width/2, height/1.35, height/80);
}
   
void scene3(){
  background(247,108,127);
  float l = width/255;
  strokeWeight(1);
  for(int i = 0; i<width; i++) {
  stroke(252,150,120,255-i/(l));
  line(i,0,i, height);
}
  

  float s = -map(second()-offset, 0, 10, 0, TWO_PI) -HALF_PI; 

  stroke(255);
  strokeWeight(5);
  line(cx, cy, cx + cos(s) * secondsRadius, cy + sin(s) * secondsRadius);

  strokeWeight(5);
  beginShape(POINTS);
  for (int a = 0; a < 360; a+=36) {
    float angle = radians(a)+HALF_PI;
    float x = cx + cos(angle) * secondsRadius;
    float y = cy + sin(angle) * secondsRadius;
    vertex(x, y);
  }
  endShape();
}
  

String scene = "initial";

void draw () {
  if (mousePressed && dist(mouseX, mouseY, circleCenterX, circleCenterY) < circleRadius));
    else if (mouseX == 0);
  switch (scene) {
  case "initial":
    if (millis() > 5000) scene = "millis5000";
    scene1();
    break;
  case "millis5000":
    scene2();
    break;
  
    
  }
}

```

---

<div class="post-metadata">

### Author: ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)
#### Post date: [December 12, 2019, 4:08am UTC](https://discourse.processing.org/t/activar-boton-y-volver-a-escena-intermedia/16303/17 "2019-12-12T04:08:29Z")

</div>

… before the break, not before the switch statement

Also, circleCenterX circleCenterY and circleRadius are not your variables. I just called them like that, so that you know which variables/numbers to put there…

---

<div class="post-metadata">

### Author: ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)
#### Post date: [December 12, 2019, 4:03pm UTC](https://discourse.processing.org/t/activar-boton-y-volver-a-escena-intermedia/16303/18 "2019-12-12T16:03:55Z")

</div>

I think to create a class or an objetct its too complicated for me, but even forgetting that and using this other opcion, the code is not working:

```auto
if ((mousePressed) && (mouseX > width/2-50 && mouseX < width/2+50 && mouseY < height/1.35 + 50 && mouseY > height/1.35 -50)){
}

```

Error says “unreachable code”

This is complete code

```auto
int cx, cy;
int offset;

float secondsRadius;
float clockDiameter;

void setup(){
  size(270,540);
  background(0,0,0);
  noStroke();
  offset = second();
  int radius = min(width, height) / 2;
  secondsRadius = radius * 0.72;
  clockDiameter = radius * 1.8;
  
  cx = width / 2;
  cy = height / 2;
  
  
} 

void scene1() {
  background(0,0,0);
  fill(255, 255, 255, 255);
  textSize(height/12);
  textAlign(RIGHT, CENTER);   
  text("blabla", width/2, height/2);
  fill(255, 204 , 0, 255);
  textSize(height/12);
  textAlign(LEFT, CENTER);
  text("blabla", width/2, height/2); 
  fill(255, 95, 95, 255);
  textSize(height/36);
  textAlign(CENTER, CENTER);
  text("blablabla", width/2, height/1.1);
 
}

void scene2() {
  String a = "1. Cuenta cada círculo que aparece en la pantalla.";
  String b = "2. Cada vez que te distraigas, devuelve tu atención a los círculos que estás contando.";
  String c = "Instrucciones.";
  
  background(255);
  fill(0);
  stroke(255,95,95);
  strokeWeight(1);
  line(width/10, height/5, width/1.15, height/5);
  textAlign(LEFT, TOP);
  textSize(height/22);
  text(c, width/10, height/10, width/1.2, height/6.66);
  textSize(height/34);
  text(a, width/10, height/4, width/1.2, height/3.33);
  textSize(height/34);
  text(b, width/10, height/2.5, width/1.2, height/2.22);
 
  //this is my button 
  fill(255,95,95);
  noStroke();
  circle(width/2, height/1.35, height/9);
  noFill();
  stroke(255);
  strokeWeight(4);
  circle(width/2, height/1.35, height/16); 
  noStroke();
  fill(255);
  circle(width/2, height/1.35, height/80);
}
   
void scene3(){
  background(247,108,127);
  float l = width/255;
  strokeWeight(1);
  for(int i = 0; i<width; i++) {
  stroke(252,150,120,255-i/(l));
  line(i,0,i, height);
}
  

  float s = -map(second()-offset, 0, 10, 0, TWO_PI) -HALF_PI; 

  stroke(255);
  strokeWeight(5);
  line(cx, cy, cx + cos(s) * secondsRadius, cy + sin(s) * secondsRadius);

  strokeWeight(5);
  beginShape(POINTS);
  for (int a = 0; a < 360; a+=36) {
    float angle = radians(a)+HALF_PI;
    float x = cx + cos(angle) * secondsRadius;
    float y = cy + sin(angle) * secondsRadius;
    vertex(x, y);
  }
  endShape();
}
  

String scene = "initial";

void draw () {
  switch (scene) {
  case "initial":
    if (millis() > 5000) scene = "millis5000";
    scene1();
    break;
  case "millis5000":
    scene2();
    break;
  default:
    scene1();
    break;
    if ((mousePressed) && (mouseX > width/2-50 && mouseX < width/2+50 && mouseY < height/1.35 + 50 && mouseY > height/1.35 -50)){
    scene3();
  }
  }
  }

```

---

<div class="post-metadata">

### Author: ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)
#### Post date: [December 13, 2019, 1:28am UTC](https://discourse.processing.org/t/activar-boton-y-volver-a-escena-intermedia/16303/19 "2019-12-13T01:28:40Z")

</div>

> [@humano](#):
>
> void draw () { switch (scene) { case “initial”: if (millis() \> 5000) scene = “millis5000”; scene1(); break; case “millis5000”: scene2(); break; default: scene1(); break; if ((mousePressed) && (mouseX \> width/2-50 && mouseX \< width/2+50 && mouseY \< height/1.35 + 50 && mouseY \> height/1.35 -50)){ scene3(); } } }

Again…

> [@Lexyth](#):
>
> The if statement has to be in case „millis5000“.

And…

> [@Lexyth](#):
>
> … before the break, not before the switch statement

Look at draw(). Copy the whole if statement and delete what you copied. Now, place the if statement according to the 2 instructions above!

Edit :

Just delete your draw and Paste this one in…

```auto
void draw () {
   switch (scene) {
      case "initial":
         if (millis() > 5000) scene = "millis5000";
         scene1();
         break;
      case "millis5000":
         scene2();
if (mousePressed && dist(mouseX, mouseY, width/2, height/1.35) < height/9) scene = "scene3";
         break;
      case "scene3" :
         scene3();
         break;
      default:
         scene1();
         break;
   }
}

```

You can also change case scene3 to this if you want :

```auto
case "scene3" :
      if (!mousePressed) scene = "millis5000";
      scene3();
      break;

```

To get back to scene2() if you Release mouse

---

<div class="post-metadata">

### Author: ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)
#### Post date: [December 13, 2019, 2:41am UTC](https://discourse.processing.org/t/activar-boton-y-volver-a-escena-intermedia/16303/20 "2019-12-13T02:41:50Z")

</div>

thanks so much @Lexyth and sorry for the other posts, I’m a little anxious because I’m very close to finish, but please excuse about that.  
When I programmed scene 3 in a different sketch, hand clock always started at 12 o’clock, just as I want, but now it starts everytime in a different position. Do you know how can I solve it?  
thanks again.

[Next page](https://discourse.processing.org/t/activar-boton-y-volver-a-escena-intermedia/16303.md?page=2)