Initializing multiple timers within the draw loop ()

p5.js Coding Questions
1

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 ?

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

Hello,

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

Reference:
https://p5js.org/reference/#/p5/millis

:)

3

@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 .

4

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

but you can use different length you wait before something happens



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
}
//
5

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)

6

not sure what your goal is

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


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

2nd example

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

DEMO


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

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

9

Hello @basicvisual,

An example:

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.

:)

10

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 ?

11

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!!!