Interactivity and scenes

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

Won’t work

Without looking at your code:

You don’t want to use default in switch ()

You don’t want to call scene3 in this way. Instead set scene variable here and then call scene3 in the new scene section

3

I’m not sure If I understand, why changing names of scenes should fix something? Im trying to understand it but my processing knowledges are as limited as my english. :cold_face:

4

Please don‘t post duplicates! Also, look at the other question, i posted how the draw should look like, just copy paste it in…

Also, @Chrisir the default was there to make the first switch to case 2, so that one could again go back to case 1, but that implementation was kinda lost along the way… not that it was really Important Anyway…

5

Sorry I Didn’t make myself clear