Transitions between states

p5.js Coding Questions
1

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!

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

make 3 states please

  • 0 start
  • 1 transition
  • 2 game

you can use

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)

3

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.

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);

  
}```
4

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

5

Hello,

A Processing example:

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

There may be something useful in there for you.

:)

1 Like