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

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!

Tagged:

Answers

  • edited August 2015

    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 :)

  • 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() )

  • Answer ✓

    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) {
        //...
    }
    
  • Probably something to do with the p5.js mode. It certainly works in JAVA mode.

  • Any ideas why it doesnt work outside the draw loop?

  • edited August 2015

    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);    }   
    }
    };
    
  • edited August 2015 Answer ✓

    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

  • 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._

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

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

  • 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

Sign In or Register to comment.