Displaying for a certain amount of time

p5.js Coding Questions
1

I’m trying to switch between two visuals on the screen (orbitpic(), meltingGlobal() ) every 5 seconds. If I call either of them, it works. After switching inside the if statement, if(millis() - ptime > 5000), I want to keep displaying the orbitpic() for 10 seconds. But for now, it flashes a blank screen for a while every 5 seconds and contents inside the while loop are not called at all. Could you help me with this please?

function draw(){
    background(0);
    //orbitpic();
    
    
   // if (mouseIsPressed) { //pressure sensor
        if(millis() - ptime > 5000) { //every 5 sec
            console.log("switch");
            //stroke(0);
            //setTimeout(text("text", 500, 500), 5000);
            //setTimeout(melting, 200000);
            

            //if(frameCount>10000){
            //   exit();
            //   console.log("exited");
            //}

            while (millis() - ptime1 > 10000){ //duration of sec
                console.log("melting");
                orbitpic();
                
            }
            
            ptime = millis();
            ptime1 = millis();
            console.log("ptime1", ptime1);
            console.log("duration", millis() - ptime1);
        }
        else {
            meltingGlobal();
        }
    

}
2

You definitely don’t want to have a while loop that runs for 10 seconds inside your draw() function (10k millis is 10 seconds not 1). There are a couple of approaches you could go with here:

  1. You could use setTimeout() to do your drawing, and use noLoop() to prevent the draw() function from running at all however, if your different drawing function are animated that won’t work.
  2. You could use setTimeout() or setInterval() to schedule the toggle between the different drawing functions.
  3. You could use millis() in draw() to check how long you’ve been on a particular scene, you just have to carefully manage the variables that track your state.
  4. You could use millis() with round() and the modulus operator % to convert the elapsed milliseconds value into a 0 or 1 indicating which drawing function to call.

Since what you have so far is closes to #3 let me show you an example of that approach:

let currentScene = 0;
let startTime = 0;

function draw() {
  // Check if we've been displaying the current scene for more than 5 seconds
  let toggle = millis() - startTime > 5000;
  if (currentScene === 0) {
    orbitpic();
    
    if (toggle) {
      console.log("switch");
      currentScene = 1;
      // Only reset start time when we switch scenes
      startTime = millis();
    }
  } else {
    meltingGlobal();
    
    if (toggle) {
      // Note that the scene toggling logic needs to be present regardless of which scene is being displayed.
      console.log("switch");
      currentScene = 0;
      startTime = millis();
    }
  }
}

This code can be made slightly more compact by separating out the toggle functionality and using the modulus operator:


let currentScene = 0;
let startTime = 0;

function draw() {
  if (currentScene === 0) {
    orbitpic();
  } else {
    meltingGlobal();
  }
  if (millis() - startTime > 5000) {
    console.log("switch");
    currentScene = (currentScene + 1) % 2;
    startTime = millis();
  }
}
2 Likes