# Displaying for a certain amount of time

**URL:** <https://discourse.processing.org/t/displaying-for-a-certain-amount-of-time/33926>\
**Category:** Coding Questions\
**Created:** [December 4, 2021, 8:11pm UTC](https://discourse.processing.org/t/displaying-for-a-certain-amount-of-time/33926 "2021-12-04T20:11:05Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![k5221](https://avatars.discourse-cdn.com/v4/letter/k/bbe5ce/32.png) [@k5221](https://discourse.processing.org/u/k5221)\
**Post date:** [December 4, 2021, 8:11pm UTC](https://discourse.processing.org/t/displaying-for-a-certain-amount-of-time/33926/1 "2021-12-04T20:11:05Z")

</div>

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?

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

}

```

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [December 4, 2021, 9:40pm UTC](https://discourse.processing.org/t/displaying-for-a-certain-amount-of-time/33926/2 "2021-12-04T21:40:58Z")

</div>

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:

```javascript
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:

```javascript

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

```