How to get millis() to only start when draw() is looped.

manu354

Hey, I am in the midst of creating a ping pong game with p5.js. I have a game menu, https://jsfiddle.net/7mXPy/37/ which works perfectly. Now when play is pressed I want to draw the table, charachters, and ball, like a small animation. So one leg of the table comes at 500millis then the second at 600 etc etc. This does work and heres an example (just draws 2 rectangle 500 ms after eachover) :

function draw() {
    if (gameStarted){
    if (millis() > 2000) {
 rect(50,50,50,50); }   
 if (millis() > 2500) {
 rect(100,50,100,50);   }   
}
};

However if I stay in the game menu for ~3sec it wont have the same effect because everything would appear at once. How could I fix this?

• It seems you cant set the millis() to 0 - or to anything.

• millis() cannot (I think) be used out of the draw loop so if i were to add the millis spent before I click play and add it to the the animation it wouldnt work. e.g: var menuMilli = ;

  var startGame = function (){
  //normal start game code....
  menuMilli = millis();
  }
  //...
  if (millis() > 2000 + menuMilli) {
  //etc etc
  }
  

  Thanks!

quark

millis() can be used from anywhere inside your sketch (not just the draw method) and it returns the number of milliseconds since the sketch started so you can't 'set the value to zero' anymore than you can set the answer for 2 + 2 to be anything other than 4 :)

manu354

I can't use it outside of my draw loop, it says: Uncaught ReferenceError: millis is not defined
console.log(millis()); ONLY works inside my draw loop... (or any other code with millis() )

blindfish

millis() cannot (I think) be used out of the draw loop

Why not? Have you tried this? Even if it can't you've got a condition you can use to store the start time:

    function draw() {
        if (gameStarted){
            //...
        }
        else {
            startMillis = millis();
        }
    }

Once you've got the start time stored you then use conditions as per your example:

if (millis() > startMillis  + 2000) {
    //...
}

quark

Probably something to do with the p5.js mode. It certainly works in JAVA mode.

manu354

Any ideas why it doesnt work outside the draw loop?

manu354

tried this and it very weirdly says millis is not defined...
function draw() {

        function draw() {

    if (gameStarted){
        var startMillis = millis();
    if (millis() > 2000 + startMillis) {
rect(50,50,50,50);  }   
if (millis() > 2500+ startMillis) {
rect(100,50,100,50);    }   
}
};

Chrisir

you can in this line

if (millis() > 2000) {

replace millis() by any var:

if (timeWhenLeavingTheMenu > 2000) {

so when leaving the menu, say timeWhenLeavingTheMenu = millis();

and then just calculate the difference to "now":

if (timeWhenLeavingTheMenu + 2000 < millis()) {

thus you can work with a time that is after the menu

manu354

Wait sorry, it doesnt have the error, but it doesnt work anyway, no rectangles show up. I think it has to do with the way i did my if statement._

manu354

Yay working now! not sure what stopped it before. Thanks everyone!

Chrisir

great!

adellelin

Hi,

I am working on a similar thing but in processing. I want the timer to start once the garden counter reaches 5. I understand the concept of storing millis() in a variable and to use that as the start of a timer etc. However whenever I do that in the draw loop, the variable keeps on increasing - i.e. timerStart keeps on counting upward.

any suggestions?

if (garden.size() == 5) { timerStart = int(millis()/1000); println(timerStart); }

Chrisir

When garden == 5 remains true the timer will be set again and again

Insert a var that checks if the timer has been set and the don't set it again

Or reset garden (clear it) garden is not == 5

adellelin

Thanks!