# Interactividad y escenas

**URL:** <https://discourse.processing.org/t/interactividad-y-escenas/16355>\
**Category:** Coding Questions\
**Created:** [December 13, 2019, 12:04am UTC](https://discourse.processing.org/t/interactividad-y-escenas/16355 "2019-12-13T00:04:49Z")\
**Posts on this page:** 4\
**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 13, 2019, 12:04am UTC](https://discourse.processing.org/t/interactividad-y-escenas/16355/1 "2019-12-13T00:04:49Z")

</div>

Hi everybody,

I’m on the last step to finish my sketch, but losing my head with somoething I don’t get.

Sketch has scene1, that lasts 5 seconds. Then, scene 2 has a button that activates animation called scene 3. Finally, you come back to scene 2 by touching scene 3.

I did my best with the code, but I’m tragically blocked with void draw, can you help me?

Thanks!

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

//first scene lasts 5 seconds
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);
 
}

//second scene has a button that activates third scene
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:** ![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 13, 2019, 1:38am UTC](https://discourse.processing.org/t/interactividad-y-escenas/16355/2 "2019-12-13T01:38:37Z")

</div>

sorry,  
but posting same question in 2 ( or 3 ) topics does not help.

also posting all the code instead of a  
reduced version, just for the problem/question  
is not only more easy for us,  
the idea of that is that also you work on that reduced version ( like a little test project )

* * *

you not only have a problem with using switch  
( its switch / case / break structure seems to confuse you /  
for that reason i already give you a  
if else version )

also the mouse over / button thinking ( and setting a variable ( like a int state ) )  
can not be done this way

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

```

that part is placed wrong in a switch case statement  
but it would not work OR if only as long you press the mouse over that area.

* * *

sorry, i recommend to STOP ( hold ) that project,  
and start a new one, just to make ONE BUTTON

- a rectangle
- change its border when the mouse is over
- increments a int variable on click
- print that variable after change

after that is working try to make it better by using

- a boolean OVER function
- a button function what would allow you to make easy many buttons

---

<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:59am UTC](https://discourse.processing.org/t/interactividad-y-escenas/16355/3 "2019-12-13T01:59:14Z")

</div>

Again, as @kll already mentioned, don‘t post 3 duplicates of the same question (especially when the question was already answered multiple times…)

Anyway, in your Original post i just posted the right Code, so just copypaste it in…

But afterwards, please follow kll‘s advise and try making only a Button in an empty sketch. That way you can see how it works and also experiment a bit with it.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [December 16, 2019, 8:29pm UTC](https://discourse.processing.org/t/interactividad-y-escenas/16355/4 "2019-12-16T20:29:43Z")

</div>

> [@Lexyth](#):
>
> in your Original post

@Lexyth – could you point me to that post? I’m trying to clean up the many duplicates, and having a hard time finding the original – both “Interactividad” and “Interactivity” seem to be duplicates, but I’m not sure of what…

**EDIT**

> [@Activar botón y volver a escena intermedia](https://discourse.processing.org/t/activar-boton-y-volver-a-escena-intermedia/16303/18):
>
> 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: 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 int cx, cy; int offset; float secondsRadius; float clockDiameter; void setup(){ size(270,540); background(0,0,0); noStroke(); offset = second(); int radius…