# Initializing multiple timers within the draw loop ()

**URL:** <https://discourse.processing.org/t/initializing-multiple-timers-within-the-draw-loop/35335>\
**Category:** Coding Questions\
**Created:** [February 20, 2022, 10:45am UTC](https://discourse.processing.org/t/initializing-multiple-timers-within-the-draw-loop/35335 "2022-02-20T10:45:36Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![basicvisual](https://avatars.discourse-cdn.com/v4/letter/b/9dc877/32.png) [@basicvisual](https://discourse.processing.org/u/basicvisual)\
**Post date:** [February 20, 2022, 10:45am UTC](https://discourse.processing.org/t/initializing-multiple-timers-within-the-draw-loop/35335/1 "2022-02-20T10:45:36Z")

</div>

Hello , I am trying to understand the concept of timers in p5js. If i understand , there is no way to initialize two timers in the draw loop. I was using the `millis` function to take the note of time. For example in the snippet below. I have initialized another timer ,` timer2` inside the if condition . But when I console log it , it has the same value as for` timer1`. Is there a way to start a new clock from 0 in the` if` block ?

```auto
var xPos = 0;
let timer1 ;
let timer2 ;
function setup() { 
  createCanvas(400, 400);
  noStroke();
} 

function draw() { 
  background(220);
  timer1 = int(millis()/1000);
  console.log(timer1);
  fill(255,200,40);
  rect(xPos, 180, 40,40);
  
  xPos = xPos + 1;
  if(xPos > width/2)
    { 
      timer2 = int(millis()/1000);
      console.log("the new timer");
      console.log(timer2);
      fill('blue');
      rect(100,100,200,200);
    }
}

```

---

<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:** [February 20, 2022, 11:33am UTC](https://discourse.processing.org/t/initializing-multiple-timers-within-the-draw-loop/35335/2 "2022-02-20T11:33:27Z")

</div>

Hello,

There are many examples in this forum of using _millis()_ as a timer for events.

Reference:  
[https://p5js.org/reference/#/p5/millis](https://p5js.org/reference/#/p5/millis)

`:)`

---

<div class="post-metadata">

**Author:** ![basicvisual](https://avatars.discourse-cdn.com/v4/letter/b/9dc877/32.png) [@basicvisual](https://discourse.processing.org/u/basicvisual)\
**Post date:** [February 20, 2022, 2:17pm UTC](https://discourse.processing.org/t/initializing-multiple-timers-within-the-draw-loop/35335/3 "2022-02-20T14:17:21Z")

</div>

@glv I think I understood the idea behind the millis function. As you can see in the example code. However , as mentioned in the question, I was expecting a different time stamp once inside the if statement above . But when i console log it i get the same time stamp output . That is why i was confused .

---

<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:** [February 20, 2022, 4:09pm UTC](https://discourse.processing.org/t/initializing-multiple-timers-within-the-draw-loop/35335/4 "2022-02-20T16:09:44Z")

</div>

millis() is just counting the millis() since start of the Sketch

but you can use different length you wait before something happens

```auto

int xPos = 0;
int timer1 ;
int timer2 ;

void setup() { 
  size(400, 400);
  noStroke();
} 

void draw() { 
  background(220);

  if (millis() - timer1 > 3000) {
    // console.log(timer1);
    fill(255, 200, 40);
    rect(xPos, 30, 40, 40);
  }

  xPos = xPos + 1;

  if (millis() - timer1 > 5000) {
    timer2 = int(millis()/1000);
    //console.log("the new timer");
    //console.log(timer2);
    fill(0, 255, 0);
    rect(100, 100, 200, 200);
  }//if
}
//

```

---

<div class="post-metadata">

**Author:** ![basicvisual](https://avatars.discourse-cdn.com/v4/letter/b/9dc877/32.png) [@basicvisual](https://discourse.processing.org/u/basicvisual)\
**Post date:** [February 20, 2022, 5:02pm UTC](https://discourse.processing.org/t/initializing-multiple-timers-within-the-draw-loop/35335/5 "2022-02-20T17:02:19Z")

</div>

Ok , I see in the above example one schedules the actions,if i am correct to understand. So there is no direct way to say

`Hey , if you are in this code block , start counting from zero (as a new variables)`

---

<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:** [February 20, 2022, 5:38pm UTC](https://discourse.processing.org/t/initializing-multiple-timers-within-the-draw-loop/35335/6 "2022-02-20T17:38:46Z")

</div>

not sure what your goal is

> [@basicvisual](#):
>
> ` if you are in this code block , start counting from zero (as a new variables)`

here we start from 0 using timer1, so the block moves every 1,1 seconds

```auto

int xPos = 0;
int timer1 ;

void setup() { 
  size(400, 400);
  noStroke();
} 

void draw() { 
  background(220);

  fill(255, 200, 40);
  rect(xPos, 30, 40, 40);

  if (millis() - timer1 > 1100) {
    xPos+=10; 
    timer1=millis();
  }
}
//

```

---

<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:** [February 20, 2022, 6:12pm UTC](https://discourse.processing.org/t/initializing-multiple-timers-within-the-draw-loop/35335/7 "2022-02-20T18:12:36Z")

</div>

2nd example

a variable timer2 is taken in the second part and wen you say `millis()-timer2` you get a 2nd time

**DEMO**

```auto

int xPos = 0;
int timer1 ;
int timer2 ;

float a1;

boolean firstTime=true; 

void setup() { 
  size(400, 400);
  noStroke();
} 

void draw() { 
  background(220);

  print("1st timer ");
  timer1 = (millis());
  println(timer1);
  fill(255, 200, 40);
  rect(xPos, 180, 40, 40);

  for (int i2=0; i2 <22; i2++) {
    for (int i=0; i <91111; i++) {
      a1 = sin(radians (i)) * cos(456);
    }// for
  }// for 
  println(a1); 

  xPos = xPos + 1;
  if (firstTime) { 
    timer2 = (millis());
    firstTime=false;

    print("the new timer starts at ");
    println(timer2);
  }

  println(millis()-timer2);
  fill(0, 255, 0);
  rect(100, 100, 200, 200);
  // }

  println("");

  if (frameCount==10) 
    noLoop();
}
//

```

---

<div class="post-metadata">

**Author:** ![basicvisual](https://avatars.discourse-cdn.com/v4/letter/b/9dc877/32.png) [@basicvisual](https://discourse.processing.org/u/basicvisual)\
**Post date:** [February 20, 2022, 7:45pm UTC](https://discourse.processing.org/t/initializing-multiple-timers-within-the-draw-loop/35335/8 "2022-02-20T19:45:33Z")

</div>

Hi, My aim is to calculate two timers . So for example timer 1 starts as soon as `millis()` is called . If we just for example say after 5 seconds the xPos enters the if block. Then that moment and `timer1` is` 5 seconds` . and `timer2` should be` 0.` so anything beyond that point timer 1 would be `5,6,7,8,9 seconds` while timer2 would be `1,2,3,4 seconds`

---

<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:** [February 20, 2022, 7:56pm UTC](https://discourse.processing.org/t/initializing-multiple-timers-within-the-draw-loop/35335/9 "2022-02-20T19:56:23Z")

</div>

Hello @basicvisual,

An example:

> [@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…

Once you wrap your head around how this works it can be implemented in any way you want and with multiple timers.

This can be easily converted to p5.js.

`:)`

---

<div class="post-metadata">

**Author:** ![basicvisual](https://avatars.discourse-cdn.com/v4/letter/b/9dc877/32.png) [@basicvisual](https://discourse.processing.org/u/basicvisual)\
**Post date:** [February 21, 2022, 7:47pm UTC](https://discourse.processing.org/t/initializing-multiple-timers-within-the-draw-loop/35335/10 "2022-02-21T19:47:46Z")

</div>

Hi , i think I partly understand this. But I am not sure . What i wanted to achieve is that in the if condition , the timer should reset to 0 and start counting from inside the loop. Is that achieved from the boolean condition ?

---

<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:** [February 21, 2022, 9:45pm UTC](https://discourse.processing.org/t/initializing-multiple-timers-within-the-draw-loop/35335/11 "2022-02-21T21:45:45Z")

</div>

My demo shows just this.

**By the way**

You can’t say / 1000 and don’t use int() !

Because then the values are not precise anymore!!!