Need help creating a function that delays draw()

p5.js Coding Questions
1

I am currently working on a small game, and am trying to figure out how to delay the draw() function for about 6 seconds so that I can write some text on the screen in time with a song. I have the code set up so that there is a menu where I have to click a button to start the game. I know setting up a timer like that has something to do with the millis() or setTimeout() functions, but I haven’t been able to get them working properly. What should I do?

2 


int state = 0;
int timer; 

void setup() {
  size(700, 700);
}

void draw() {
  background(0); 
  if (state==0) {
    text("click mouse", 155, 155);
  } else if (state==1) {
    text(" C O U N T E R", 155, 155);
    if (millis()-timer>3000) { 
      state=0; // reset
    }
  }//state 1
}//func

void mousePressed() {
  state = 1; 
  timer=millis();
}
3

Hello,

Start working with a simple timer first and understand that.
Then work on integrating into your code.

:)

4

This just gives me errors when I put it into a new p5 project.

5

The code that you gave me just throws up errors in p5

6

Hello,

It is an example for Processing Java.

Adapt if for P5.js.

I just did it in a few minutes.

:)

7

Just figured out how to do it. Example code provided:

let circle = false;
let cnv;
let x = 0;
let y = 0;

function setup() {
  textAlign(CENTER);
  cnv = createCanvas(400, 400);
  background(0);
  cnv.mousePressed(
    function(){
      background(255);
      setTimeout(start, 2500);
    }
  );
}

function start(){
  frameRate(120);
  background(0);
  circle = true;
}

function draw() {
  if (circle === true){
    ellipse(x, y, 20, 20);
    x = x + 1;
    y = y + 1;
  } else {
    textSize(44);
    fill(255);
    stroke(255);
    text('Click the canvas', 200, 200);
    frameRate(1);
  }
}
8

same as

if(circle) {