# Making a Display Screen

**URL:** <https://discourse.processing.org/t/making-a-display-screen/24108>\
**Category:** Coding Questions\
**Created:** [September 25, 2020, 1:54am UTC](https://discourse.processing.org/t/making-a-display-screen/24108 "2020-09-25T01:54:16Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![FloorBean](https://avatars.discourse-cdn.com/v4/letter/f/c2a13f/32.png) [@FloorBean](https://discourse.processing.org/u/FloorBean)\
**Post date:** [September 25, 2020, 1:54am UTC](https://discourse.processing.org/t/making-a-display-screen/24108/1 "2020-09-25T01:54:16Z")

</div>

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.

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

}

```

---

<div class="post-metadata">

**Author:** ![FloorBean](https://avatars.discourse-cdn.com/v4/letter/f/c2a13f/32.png) [@FloorBean](https://discourse.processing.org/u/FloorBean)\
**Post date:** [September 25, 2020, 3:51am UTC](https://discourse.processing.org/t/making-a-display-screen/24108/2 "2020-09-25T03:51:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 25, 2020, 11:08am UTC](https://discourse.processing.org/t/making-a-display-screen/24108/3 "2020-09-25T11:08:08Z")

</div>

> [@FloorBean](#):
>
> I am not sure how to implement the screen.

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 :

```auto

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

---

<div class="post-metadata">

**Author:** ![FloorBean](https://avatars.discourse-cdn.com/v4/letter/f/c2a13f/32.png) [@FloorBean](https://discourse.processing.org/u/FloorBean)\
**Post date:** [September 25, 2020, 12:00pm UTC](https://discourse.processing.org/t/making-a-display-screen/24108/4 "2020-09-25T12:00:18Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 25, 2020, 12:02pm UTC](https://discourse.processing.org/t/making-a-display-screen/24108/5 "2020-09-25T12:02:50Z")

</div>

Yes, in the draw() function please

`if....`

and state has to be declared before setup() as

`int state = 0;`

---

<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:** [September 30, 2020, 8:38pm UTC](https://discourse.processing.org/t/making-a-display-screen/24108/6 "2020-09-30T20:38:03Z")

</div>

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

> **[Finite-state machine](https://en.wikipedia.org/wiki/Finite-state_machine)**
>
> A finite-state machine (FSM) or finite-state automaton (FSA, plural: automata), finite automaton, or simply a state machine, is a mathematical model of computation. It is an abstract machine that can be in exactly one of a finite number of states at any given time. The FSM can change from one state to another in response to some inputs; the change from one state to another is called a transition. An FSM is defined by a list of its states, its initial state, and the inputs that trigger each tra

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:

> **[atduskgreg/Processing-FSM](https://github.com/atduskgreg/Processing-FSM)**
>
> Simple Finite State Machine library for Processing - atduskgreg/Processing-FSM

…although I have not tested it with Processing 3.