# Need help creating a function that delays draw()

**URL:** <https://discourse.processing.org/t/need-help-creating-a-function-that-delays-draw/24839>\
**Category:** Coding Questions\
**Created:** [October 23, 2020, 7:14am UTC](https://discourse.processing.org/t/need-help-creating-a-function-that-delays-draw/24839 "2020-10-23T07:14:49Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![The\_Rogue12](https://avatars.discourse-cdn.com/v4/letter/t/22d042/32.png) [@The\_Rogue12](https://discourse.processing.org/u/The_Rogue12)\
**Post date:** [October 23, 2020, 7:14am UTC](https://discourse.processing.org/t/need-help-creating-a-function-that-delays-draw/24839/1 "2020-10-23T07:14:49Z")

</div>

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?

---

<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:** [October 23, 2020, 8:02am UTC](https://discourse.processing.org/t/need-help-creating-a-function-that-delays-draw/24839/2 "2020-10-23T08:02:24Z")

</div>

```auto

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

```

---

<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:** [October 23, 2020, 10:51am UTC](https://discourse.processing.org/t/need-help-creating-a-function-that-delays-draw/24839/3 "2020-10-23T10:51:42Z")

</div>

Hello,

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

> [@Need assistance with timing! \[millis()\]](https://discourse.processing.org/t/need-assistance-with-timing-millis/18854/4):
>
> I provided a simple example: int whattimeisitnow; int whattimeisitatstartofstopwatch; int timepassedtoresetstopwatch = 1000; //setup runs once void setup() { whattimeisitatstartofstopwatch = millis(); } //draw loops 60 frames per sec void draw() { whattimeisitnow = millis(); if (whattimeisitnow \> whattimeisitatstartofstopwatch + timepassedtoresetstopwatch) { println("1000 ms have passed!"); whattimeisitatstartofstopwatch = millis(); //reset st…

`:)`

---

<div class="post-metadata">

**Author:** ![The\_Rogue12](https://avatars.discourse-cdn.com/v4/letter/t/22d042/32.png) [@The\_Rogue12](https://discourse.processing.org/u/The_Rogue12)\
**Post date:** [October 24, 2020, 1:14am UTC](https://discourse.processing.org/t/need-help-creating-a-function-that-delays-draw/24839/4 "2020-10-24T01:14:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![The\_Rogue12](https://avatars.discourse-cdn.com/v4/letter/t/22d042/32.png) [@The\_Rogue12](https://discourse.processing.org/u/The_Rogue12)\
**Post date:** [October 24, 2020, 1:14am UTC](https://discourse.processing.org/t/need-help-creating-a-function-that-delays-draw/24839/5 "2020-10-24T01:14:43Z")

</div>

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

---

<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:** [October 24, 2020, 1:24am UTC](https://discourse.processing.org/t/need-help-creating-a-function-that-delays-draw/24839/6 "2020-10-24T01:24:08Z")

</div>

Hello,

> [@The\_Rogue12](#):
>
> The code that you gave me just throws up errors in p5

It is an example for Processing Java.

Adapt if for P5.js.

I just did it in a few minutes.

`:)`

---

<div class="post-metadata">

**Author:** ![The\_Rogue12](https://avatars.discourse-cdn.com/v4/letter/t/22d042/32.png) [@The\_Rogue12](https://discourse.processing.org/u/The_Rogue12)\
**Post date:** [October 25, 2020, 6:17am UTC](https://discourse.processing.org/t/need-help-creating-a-function-that-delays-draw/24839/7 "2020-10-25T06:17:00Z")

</div>

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

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

```

---

<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:** [October 25, 2020, 6:47pm UTC](https://discourse.processing.org/t/need-help-creating-a-function-that-delays-draw/24839/8 "2020-10-25T18:47:19Z")

</div>

> [@The\_Rogue12](#):
>
> `if (circle === true){`

same as

if(circle) {