Making a Display Screen

Processing Coding Questions
1

Hi, I wanted to make a title screen with a play button and a directions button. I know the logic behind it but I am not quite sure how to make it within classes.

bubble b1;
bubble b2;
bubble b3;
bubble b4;
bubble b5;
int score = 0; 

void setup(){
  size(500,600);
  b1 = new bubble(random(0,width-15),height,10,random(2,5),color(random(0,255),0,100));
  b2 = new bubble(random(0,width-15),height,10,random(2,5),color(random(0,255),0,100));
  b3 = new bubble(random(0,width-15),height,10,random(2,5),color(random(0,255),0,100));
  b4 = new bubble(random(0,width-15),height,10,random(2,5),color(random(0,255),0,100));
  b5 = new bubble(random(0,width-15),height,10,random(2,5),color(random(0,255),0,100));
}


void draw(){
  background(255);
  
  textSize(20);
  fill(0);
  text("Score:" +score,20,40);
  b1.run();
  b2.run();
  b3.run();
  b4.run();
  b5.run();
  
}

class bubble{
  float x;
  float y;
  float dx;
  float dy;
  color rcolor;
  float size = random(20,40);
  
  
  bubble(float x, float y, float dx, float dy, color rcolor ){
    this.x=x;
    this.y=y;
    this.dx=dx;
    this.dy=dy;
    this.rcolor=rcolor;
  }
void display() {
  fill(rcolor);
  circle(x,y,size);
}

void rise(){
  y = y- dy;
}

void jiggle(){
  x = x + random(-2,2);
}
void Pop(){
  if(mousePressed && mouseX>=x-size/2 && mouseX<=x+size/2 && mouseY>=y-size/2 && mouseY<=y+size/2){
    y = height+50;
    size = random(20,40);
    x = random(width-15);
    rcolor = color(random(0,255),0,120);
    score++; 
    dy+=0.5;
    
  }
}

void miss(){
  if(y<0){
    size = random(20,30);
    y = height;
    x = random(width-15);
    rcolor = color(random(0,255),0,120);
    score--;
    dy-=0.5;
}
}

void run(){
  display();
  rise();
  jiggle();
  Pop();
  miss();
}

}
2

I can make the buttons, it’s just that I am not sure how to implement the screen.

3

Common way is to have a int variable state or screen that indicates which screen to display.

So depending on the button you set state to 0 or to 1.

In the draw() function you have a if-else if-clause :


if(state==0) {
      // show title screen
      ...
} else if(state==1) {
      // The Game 
      // what you have in draw() now 
      ....
} else if(state==2) {
     // show directions screen
     .... 
}

Normally, nothing is allowed that if-clause so everything is depending on the state variable.

Also in mousePressed or keyPressed you can have such an if-clause so certain keys only work in some states.

Regards,

Chrisir

4

Thank you! And would this be in the draw() loop? I am confused about the placement of this because everything is dependent on this conditional.

5

Yes, in the draw() function please

if....

and state has to be declared before setup() as

int state = 0;

6

If you get interested in the topic more generally, they are called “state machines” or “finite state machines.”

If you are making a larger game with many kinds of transitions – menus, levels, random encounters, et cetera – then you might want to make your FSM a bit more complex. There is actually an old Processing library for that:

…although I have not tested it with Processing 3.