Activar botón y volver a escena intermedia

humano · December 10, 2019, 9:54pm

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.


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.

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!

Lexyth · December 11, 2019, 12:38am

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

Something like :

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.

humano · December 11, 2019, 3:06pm

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.


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();   
}

}

kll · December 11, 2019, 4:04pm

https://processing.org/reference/switch.html


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

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

humano · December 11, 2019, 5:22pm

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

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();
}

?`

Lexyth · December 11, 2019, 6:49pm

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?

humano · December 11, 2019, 7:38pm

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.

humano · December 11, 2019, 8:08pm

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

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();
  }
  }

Lexyth · December 11, 2019, 8:37pm

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 :

//Sketch 1

void setup() {

//setup in sketch 1

}

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

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

Sketch 2

void setup() {
//sketch 2 setup
}

void draw() {
//sketch 2 draw
}

And the combined sketch would be :

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

humano · December 11, 2019, 8:41pm

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

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();
  }
  }

Lexyth · December 11, 2019, 8:52pm

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

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.

humano · December 11, 2019, 9:10pm

Thanks @Lexyth

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

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

Lexyth · December 11, 2019, 9:15pm

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

humano · December 11, 2019, 9:30pm

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

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

Lexyth · December 11, 2019, 11:45pm

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

humano · December 12, 2019, 3:31am

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

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

Lexyth · December 12, 2019, 4:08am

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

humano · December 12, 2019, 4:03pm

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 = 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();
  }
  }
  }

Lexyth · December 13, 2019, 1:28am

Again…

And…

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…

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 :

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

To get back to scene2() if you Release mouse

humano · December 13, 2019, 2:41am

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.

Topic		Replies	Views
Interactividad y escenas Coding Questions	3	720	December 16, 2019
Interactivity and scenes Coding Questions	4	1490	December 13, 2019
Letra desenfocada Coding Questions	2	657	December 6, 2019
Creating a button and makin it work! Libraries	4	500	December 3, 2020
Screen with objects Coding Questions	2	591	November 29, 2021

Activar botón y volver a escena intermedia

Related topics