Interactividad y escenas

Processing Coding Questions
1

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!

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

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

    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
1 Like
3

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.

1 Like
4

@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