# Transitions between states

**URL:** <https://discourse.processing.org/t/transitions-between-states/31376>\
**Category:** Coding Questions\
**Created:** [July 22, 2021, 6:12am UTC](https://discourse.processing.org/t/transitions-between-states/31376 "2021-07-22T06:12:53Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![k5221](https://avatars.discourse-cdn.com/v4/letter/k/bbe5ce/32.png) [@k5221](https://discourse.processing.org/u/k5221)\
**Post date:** [July 22, 2021, 6:12am UTC](https://discourse.processing.org/t/transitions-between-states/31376/1 "2021-07-22T06:12:53Z")

</div>

Hi, I have drawIntro() for drawing the black intro screen and drawPlaying for the game screen. The screen switches to the playing mode when a player clicks the start button (handled by the mousePressed() below).  
What I wish to do is gradually transition from the black screen to the playing mode once the button is clicked. So I set the counter variable to increment and tint the screen accordingly, but it should’ve changed the tint only after the button is clicked. I guess I’m confused about how all of these are playing out in sequence.

Thanks much for your help in advance!

```auto
let state = 0;
let counter = 0;

function setup() {
  createCanvas(400, 300); 
  frameRate(3);
}

function draw() {
  while (counter <= 30) {
    var alpha = map(counter, 0, 30, 0, 255);
    tint(0, 255 - alpha);
    counter++;
  }
  
  if (state == 0) {
    drawIntro();
  } else if (state == 1 && counter > 30) {
    drawPlaying();
  }
}

function mousePressed() {
  if (mouseX > 150 && mouseX < 250 && mouseY > 170 && mouseY < 200) {
    state = 1; 
  } 
}

function drawIntro() {
...
}
function drawPlaying() {
...
}

```

---

<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:** [July 22, 2021, 7:43am UTC](https://discourse.processing.org/t/transitions-between-states/31376/2 "2021-07-22T07:43:11Z")

</div>

make 3 states please

- 0 start
- 1 transition
- 2 game

you can use

```auto
switch (state) {

case 0:
    drawIntro();
break; 

case 1: 
    // transition 
    var alpha = map(counter, 0, 30, 0, 255);
    tint(0, 255 - alpha);
    // background/ rect? 
    counter++;
    if (counter > 30)
       state=2; // go on
break; 

case 2:
    drawPlaying();
break; 

default:
    // Error 
break; 

}

```

_not tested_

also, an animation within `while` is not visible since the draw() function only updates the screen once at its end and not throughout (it’s running 60 times per second, so above we just use this fact in state 1)

---

<div class="post-metadata">

**Author:** ![k5221](https://avatars.discourse-cdn.com/v4/letter/k/bbe5ce/32.png) [@k5221](https://discourse.processing.org/u/k5221)\
**Post date:** [July 22, 2021, 9:01am UTC](https://discourse.processing.org/t/transitions-between-states/31376/3 "2021-07-22T09:01:42Z")

</div>

Hi @Chrisir, thank you so much for your help. I tried what you suggested, but the screen still abruptly changes to the playing mode after a while, and the transition is not working. What do you think the problem is…?

Also, drawIntro() function draws the first screen, which I’m trying to fade out.

````auto
function drawIntro() {
  background(0);

  fill(255);
  textSize(50);
  strokeWeight(1);
  text('OCTOPUS EYES', 50, 100);

  noFill();
  stroke(255);
  strokeWeight(3);
  rect(150, 170, 100, 30, 10, 10);
  
  textSize(30);
  strokeWeight(1);
  text('START', 163, 195);

  
}```
````

---

<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:** [July 22, 2021, 10:25am UTC](https://discourse.processing.org/t/transitions-between-states/31376/4 "2021-07-22T10:25:24Z")

</div>

can’t help you with that  
I think I misunderstood you

however,  
your approach is better than mine, but don’t use while as explained

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [July 22, 2021, 4:23pm UTC](https://discourse.processing.org/t/transitions-between-states/31376/5 "2021-07-22T16:23:00Z")

</div>

Hello,

A Processing example:

> [@Animation that transitions using frameCount](https://discourse.processing.org/t/animation-that-transitions-using-framecount/15378/1):
>
> A very simple example that transitions through scenes over time: // Author: GLV // Date: 2019-11-10 // Description: // Animate over time using frameCount // A very simple example that: // Uses frameCount to keep track of time // Fades in and out by modifying alpha component of HSB color // Cycles through HSB colors int scene = 0; int sec = 60; float alpha = 0; void setup() { size(500, 500); textSize(36); textAlign(CENTER, CENTER); colorMode(HSB, 360, 100, 100, 100); } void draw()…

I have done this a few different ways in my projects.

There may be something useful in there for you.

`:)`