# Timers Not Frame Rate Dependent & Starting On Demand - Oh Please Oh Please :)

**URL:** <https://discourse.processing.org/t/timers-not-frame-rate-dependent-starting-on-demand-oh-please-oh-please/23994>\
**Category:** Coding Questions\
**Created:** [September 21, 2020, 6:06am UTC](https://discourse.processing.org/t/timers-not-frame-rate-dependent-starting-on-demand-oh-please-oh-please/23994 "2020-09-21T06:06:45Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![mnoble](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnoble/32/99_2.png) [@mnoble](https://discourse.processing.org/u/mnoble)\
**Post date:** [September 21, 2020, 6:06am UTC](https://discourse.processing.org/t/timers-not-frame-rate-dependent-starting-on-demand-oh-please-oh-please/23994/1 "2020-09-21T06:06:45Z")

</div>

Hello Forum,

I am making interactive visualizers that coordinate with sequenced visual automations and sound. I need to start a timer after a button is pushed (which I am pretty sure you can’t do with millis()) **and** I can’t use the frameCount() solution because I have just learned that computers vs. phones vs. tablets all have the possibility of different frame rates (30,60, even 120 sometimes) - animation timings will be out of sync for several devices. I have witnessed timings play out really differently using frameCount() in the same program run on my phone versus laptop. If I could figure out another reliable solution for a second timer that can be delayed before starting and not dependent of frame counts then I think I could make the project playback work across devices.

Please let mw know if you have another strategy for timers. Hope to hear from you all. Thank you!!!

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [September 21, 2020, 8:46am UTC](https://discourse.processing.org/t/timers-not-frame-rate-dependent-starting-on-demand-oh-please-oh-please/23994/2 "2020-09-21T08:46:25Z")

</div>

> [@mnoble](#):
>
> which I am pretty sure you can’t do with millis())

Why that?  
You made already a [topic](https://discourse.processing.org/t/is-millis-heavy-on-cpu-program-efficiency/23266/6) about timers recently.

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [September 21, 2020, 9:52am UTC](https://discourse.processing.org/t/timers-not-frame-rate-dependent-starting-on-demand-oh-please-oh-please/23994/3 "2020-09-21T09:52:07Z")

</div>

Like in Java you have an 15 microsecond increment on average though. Maybe this should just be subtracted, I don’t know?

```auto
let startTime;
let timerRun;

function setup() {
  createCanvas(100, 100);
  background(255);
  button = createButton('click me');
  button.position(20, 20);
  button.mousePressed(startTimer);
  
}

function draw() {
  if(timerRun) {
    if (millis() - startTime > 1000) {
      print(millis() - startTime-15);
      startTime = millis();
   
    }
  }
}

function startTimer() {
 startTime = millis(); 
 timerRun = true;
}

```

---

<div class="post-metadata">

**Author:** ![mnoble](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnoble/32/99_2.png) [@mnoble](https://discourse.processing.org/u/mnoble)\
**Post date:** [September 21, 2020, 4:09pm UTC](https://discourse.processing.org/t/timers-not-frame-rate-dependent-starting-on-demand-oh-please-oh-please/23994/4 "2020-09-21T16:09:59Z")

</div>

Apologies if this new thread should have been added to the old one. I was thinking since the subject was a bit different that maybe a new thread was the appropriate path for clarity in search. Anyways, thanks for replying. 🙂

---

<div class="post-metadata">

**Author:** ![mnoble](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnoble/32/99_2.png) [@mnoble](https://discourse.processing.org/u/mnoble)\
**Post date:** [September 21, 2020, 4:21pm UTC](https://discourse.processing.org/t/timers-not-frame-rate-dependent-starting-on-demand-oh-please-oh-please/23994/5 "2020-09-21T16:21:09Z")

</div>

Hi Noel,

I am not sure I understand your proposed solution here. I guess it is because I feel I need a very precise counter so that I can program things like at 20 seconds do this, at 40 seconds do this.

Side note: the reason I need the button to start the timer is because (I think) Google won’t let audio just come on with phones unless the user starts the audio. So, I have a start screen and then when the user starts the visualizer & the timer and audio start (previously using frameRate() option). But, as I mentioned before this fails on account of different devices having different frame rates.

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [September 21, 2020, 4:32pm UTC](https://discourse.processing.org/t/timers-not-frame-rate-dependent-starting-on-demand-oh-please-oh-please/23994/6 "2020-09-21T16:32:25Z")

</div>

No, no, I wasn’t complaining. If you’re finished with the sound visualization project and want to share it I’m interested 😃  
As for your question I don’t know if there’s a js library like java has “java.util.TimerTask” to do exactly what you want. But the simple millis() timer has a accuracy within 20 ms, thus good enough for your project. Just run with multiple if blocks

---

<div class="post-metadata">

**Author:** ![mnoble](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnoble/32/99_2.png) [@mnoble](https://discourse.processing.org/u/mnoble)\
**Post date:** [September 21, 2020, 5:13pm UTC](https://discourse.processing.org/t/timers-not-frame-rate-dependent-starting-on-demand-oh-please-oh-please/23994/7 "2020-09-21T17:13:43Z")

</div>

Hi Noel 🙂

So millis() can be delayed to not start its count until a button is pressed? Am I so confused? 🙂 Or, maybe I don’t understand you. What do you mean by

> Just run with multiple if blocks

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [September 21, 2020, 7:23pm UTC](https://discourse.processing.org/t/timers-not-frame-rate-dependent-starting-on-demand-oh-please-oh-please/23994/8 "2020-09-21T19:23:02Z")

</div>

You don’t invoke the timer with millis().  
When a program starts, it starts a ‘stopwatch’ or ‘millisecond counter’ if you want it or not.  
You can access the past time with the function millis();  
So if you want a timer you will need a certain start time and then count the seconds that increment until it reaches the time-lap you want. This timer can be triggered by a button or an audio event etc. You can have several timers running in parallel with if blocks. In the code below, you have two independent 5 seconds timers. During the 5 seconds time lap, the buttons have a red color.

```auto
let timerRun1, timerRun2;

function setup() {
  createCanvas(500, 500);
  background(255);
  button1 = createButton('timer 1');
  button1.position(20, 20);
  button1.mousePressed(startTimer1);
  button2 = createButton('timer 2');
  button2.position(160, 20);
  button2.mousePressed(startTimer2);
  button1.style('background-color', color(255, 255, 255));
  button2.style('background-color', color(255, 255, 255));
}

function draw() {
  background(255);
  text('Milliseconds running since program start: ' +int(millis())+ ' millisecond', 5, 65);
  if (timerRun1) {
    let time_lap1 = millis() - startTime1;
    if (time_lap1 > 5000) {
      button1.style('background-color', color(255, 255, 255));
      timerRun1 = false;
    }
  }
  if (timerRun2) {
    let time_lap2 = millis() - startTime2;
    if (time_lap2 > 5000) {
      button2.style('background-color', color(255, 255, 255));
      timerRun2 = false;
    }
  }
}

function startTimer1() { 
  button1.style('background-color', color(255, 155, 155));
  startTime1 = millis(); 
  timerRun1 = true;
}

function startTimer2() { 
  button2.style('background-color', color(255, 155, 155));
  startTime2 = millis(); 
  timerRun2 = true;
}

```

---

<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:** [September 21, 2020, 9:38pm UTC](https://discourse.processing.org/t/timers-not-frame-rate-dependent-starting-on-demand-oh-please-oh-please/23994/9 "2020-09-21T21:38:20Z")

</div>

Hello,

> **[reference | p5.js](https://p5js.org/reference/#/p5/millis)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

This may (or may not) help:

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

You can use a mouse, key or any event to update:  
_whattimeisitatstartofstopwatch_

Once you wrap your head around this it becomes easy to code.

`:)`

---

<div class="post-metadata">

**Author:** ![mnoble](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnoble/32/99_2.png) [@mnoble](https://discourse.processing.org/u/mnoble)\
**Post date:** [September 21, 2020, 10:47pm UTC](https://discourse.processing.org/t/timers-not-frame-rate-dependent-starting-on-demand-oh-please-oh-please/23994/10 "2020-09-21T22:47:37Z")

</div>

Hi Noel, that’s a nice solution! Thank you so much for all of your help and tume!!! I ended up working with setInterval(). I will post it below.

PS: here’s one of the [Visualizers](https://www.openprocessing.org/sketch/946341/embed/?plusEmbedHash=ZTNkZDIzOTM4ODRhZGViNjMwZTBlZDI0YWY4YzJiMTg5ZjgxMWNhM2I5NzRkZDExMDQ5MjRjNGQ5ZTc1NGUxN2NlZDBhNjJhNDBlMmQ3MDEzNDZjYjg3M2JkNDRiN2EyMjU4ZGZjMjNkM2VjMzEyZjYzNzExYzQ3MmMwMzA0ODFOMWxIcFo0enhuR2l1TExVUkxBTkpwSWZtYmQzSEJXUElwb05jT1JPTDRxa1JNUmZKRThyZDBmeHRlRHpIRmxXQ0lBQnRUYkFHRXM0S2NxeVVVQ1NuQT09&plusEmbedFullscreen=true)

```auto
'use strict';

var button;

let timer = 0;
let startProgram = false;
let loaded = false;

function setup() {

    loaded = true;
    beginButton()
    createCanvas(windowWidth, windowHeight);

    console.time('time')
    noSmooth(); //does this improve running?
    console.timeEnd('time')
}

function beginButton() {
    let col = color(255);
    let col2 = color(0);
    button = createButton("begin");
    button.mousePressed(beginExperience);
    button.position(width / 2 - 30, height - 40);
    button.size(60, 25);
    button.style('background-color', col);
    button.style("color", col2);

}

function draw() {

    background(0);
    if (startProgram == false || loaded == false) {
        showLoading();
    }

    //start automations & timer when button pressed	
    else {
 		
			if (timer<=5){
				fill (0,255,0);
			}
			else if (timer>5&&timer<=10){
			fill (255,0,0);
			}	
			else if (timer>11){
			fill (0,0,255);
			}	
      ellipse(mouseX,height/2,100,100);
			
			//timer report
			textSize (20);
		  text (timer,width/2,100);
			
    } //close timed events/experience screen

} //close draw

function beginExperience() {
    setInterval(() => {
        timer++;
    }, 1000)
    button.remove();
    startProgram = true;
}

function touchMoved() {
    return false; //this prevents dragging screen around on mobile
}

function showLoading() {
    background(0);
    textAlign(CENTER, CENTER);
    rectMode(CENTER);
    text('loading...', width / 2, height - 30);
}

```

---

<div class="post-metadata">

**Author:** ![mnoble](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnoble/32/99_2.png) [@mnoble](https://discourse.processing.org/u/mnoble)\
**Post date:** [September 21, 2020, 10:48pm UTC](https://discourse.processing.org/t/timers-not-frame-rate-dependent-starting-on-demand-oh-please-oh-please/23994/11 "2020-09-21T22:48:35Z")

</div>

Thanks glv - this is really helpful too. Thank you!

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [September 21, 2020, 11:44pm UTC](https://discourse.processing.org/t/timers-not-frame-rate-dependent-starting-on-demand-oh-please-oh-please/23994/12 "2020-09-21T23:44:06Z")

</div>

> [@mnoble](#):
>
> I ended up working with setInterval().

Great! Now I understand what you wanted. setTimeout() is also a good timer sequencer, the way as used [here](https://editor.p5js.org/leiyufazhuangjia/sketches/rJteg8wc7).  
The visualizer is really nice as well. The only thing that I would add in the opening screen, is a bit more detailed information on how it works. ( It took me some time to find out. 😃 )