# Force screen to update

**URL:** <https://discourse.processing.org/t/force-screen-to-update/30954>\
**Category:** Beginners\
**Created:** [June 29, 2021, 2:31am UTC](https://discourse.processing.org/t/force-screen-to-update/30954 "2021-06-29T02:31:02Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![pack.mcmeta](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pack.mcmeta/32/13446_2.png) [@pack.mcmeta](https://discourse.processing.org/u/pack.mcmeta)\
**Post date:** [June 29, 2021, 2:31am UTC](https://discourse.processing.org/t/force-screen-to-update/30954/1 "2021-06-29T02:31:02Z")

</div>

My question is if I can force processing to update the display window after I call functions like `rect()` or `arc()`. So those functions would be called, then I could do something to have them display on screen before `draw()` finishes. As an example, I have

```auto
void draw() {
  fill(255, 0, 0);
  rect(0, 0, 200, 400);
  while (true) {
    //force update here
  }
}

```

And at the `//force update here` I want the rectangle to display on screen, but without `draw()` finishing. I have found that minimizing and reopening the window causes it to display the rectangle. I tried using `loadPixels()` and `updatePixels()` but those dont cause it to update.

---

<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:** [June 29, 2021, 2:35am UTC](https://discourse.processing.org/t/force-screen-to-update/30954/2 "2021-06-29T02:35:28Z")

</div>

Hello,

Read this to understand draw() and the related references also:  
_[draw() \ Language (API) \ Processing 3+](https://processing.org/reference/draw_.html)_

There are resources (tutorials, references, examples and more) here:  
_[processing.org](http://processing.org)_

`:)`

---

<div class="post-metadata">

**Author:** ![pack.mcmeta](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pack.mcmeta/32/13446_2.png) [@pack.mcmeta](https://discourse.processing.org/u/pack.mcmeta)\
**Post date:** [June 29, 2021, 2:37am UTC](https://discourse.processing.org/t/force-screen-to-update/30954/3 "2021-06-29T02:37:54Z")

</div>

From the `draw()` docs:

> All Processing programs update the screen at the end of draw(), never earlier.

Im assuming this means I cant update in the middle of draw. However, could I force it to minimize and reopen the window?

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [June 29, 2021, 4:01am UTC](https://discourse.processing.org/t/force-screen-to-update/30954/4 "2021-06-29T04:01:07Z")

</div>

I don’t know why that would help.

I don’t think you understand how draw() works. You put some code in it to draw things, and the things appear, right?

Well no. It doesn’t stop after it has shown you the things it drew. It starts over again almost immediately. It’s fast! SUPER FAST! It draws things 60 times in one second!

So everything you draw in draw() is only shown to you for 1/60th of a second before it draws those things again.

* * *

If you want it to only draw so many things, you can limit the things it draws by other means. One simple - and perhaps the best - way is depending on time. If you call millis(), you can determine how many milliseconds the sketch has been running for. Consider:

```auto
void setup(){
  size(600,400);
}

void draw(){
  background(0);
  fill(0,200,0);
  noStroke();
  rect(10, 10, 20, 20);
  if( millis() > 10000 ){ // Ten seconds have passed.
    rect(40, 40, 20, 20);
  }
  if( millis() > 20000 ){ // Twenty seconds have passed.
    rect(70, 70, 20, 20);
  }
  fill(255);
  stroke(255);
  text("" + millis(), 20, 300);
}

```

Here, initially, one square is being drawn. After ten thousand milliseconds (ten seconds) have gone by, a second square starts being drawn.

A third square appears after twenty seconds.

But the screen is being redrawn 60 times a second! EVERY SECOND! Look how fast the millis() counter goes up!

---

<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:** [June 29, 2021, 7:44am UTC](https://discourse.processing.org/t/force-screen-to-update/30954/5 "2021-06-29T07:44:41Z")

</div>

Hello,

The Coding Train has some helpful videos:

- [# 3.1: Flow (setup and draw) - Processing Tutorial](https://www.youtube.com/watch?v=o8dffrZ86gs)

And there is Happy Coding:

- [Processing Tutorials - Happy Coding](https://happycoding.io/tutorials/processing/)

Other references:

- [Variable Scope / Examples / Processing.org](https://processing.org/examples/variablescope.html)
- [Setup and Draw / Examples / Processing.org](https://processing.org/examples/setupdraw.html)
- [setup() / Reference / Processing.org](https://processing.org/reference/setup_.html)
- [draw() / Reference / Processing.org](https://processing.org/reference/draw_.html)
- [background() / Reference / Processing.org](https://processing.org/reference/background_.html)

`:)`

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [June 29, 2021, 8:13am UTC](https://discourse.processing.org/t/force-screen-to-update/30954/6 "2021-06-29T08:13:22Z")

</div>

similar idea here

instead of showing the screen you can have different versions of draw() that show different rectangles. Here the variable state is used to distinguish between the states.

The next state is initiated after 5 seconds.

draw() still runs 60 times per second but the screen changes slowly.

Warm regards,

Chrisir

```auto
int state;
int timer; 

void setup() {
  size(600, 400);
  timer=millis();
}

void draw() {
  background(0);

  switch(state) {

  case 0: 
    fill(0, 200, 0);
    noStroke();
    rect(10, 10, 20, 20);
    // show text
    fill(255);
    stroke(255);
    text("" + millis(), 20, 300);
    break; 

  case 1: 
    fill( 250, 0, 0);
    rect(40, 40, 20, 20);
    break; 

  case 2:
    fill( 0, 0, 255);
    rect(70, 70, 20, 20);
    break;
    //
  }//switch

  if ( millis()-timer > 5000 ) { // 5 seconds have passed.
    state++;
    timer=millis();
  }//if
}

```

---

<div class="post-metadata">

**Author:** ![pack.mcmeta](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pack.mcmeta/32/13446_2.png) [@pack.mcmeta](https://discourse.processing.org/u/pack.mcmeta)\
**Post date:** [June 29, 2021, 7:26pm UTC](https://discourse.processing.org/t/force-screen-to-update/30954/7 "2021-06-29T19:26:50Z")

</div>

These replies are very helpful, but not what im looking for. Heres a better example to show what im trying to achieve:

```auto
void setup() {
  size(300, 300);
}
void draw() {
  fill(255, 0, 0);
  rect(100, 100, 40, 40);
  //here
  delay(5000); //or some function that takes a while to process
  fill(0, 255, 0);
  rect(120, 120, 40, 40);
}

```

If you run this, the red and green rects appear at the same time. What im looking for is a way to at the `//here` make the red rectange appear, then 5000 millis later the green one does. In the code im working with, I dont have `delay()` but I have a function that takes a few seconds and I want to be able to display the things, then run the function and the things would display without having to wait on the function to finish. In the examples from @TfGuy44 and @Chrisir, `draw()` finishes over and over, but I have a function that takes a few second and prevents `draw()` from ending.  
I need to force the rect to display before the `delay()` or function runs., rather then when `draw()` finishes.

---

<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:** [June 29, 2021, 8:30pm UTC](https://discourse.processing.org/t/force-screen-to-update/30954/8 "2021-06-29T20:30:50Z")

</div>

> [@pack.mcmeta](#):
>
> I have a function that takes a few seconds

Take a look at this for that function:  
_[thread() / Reference / Processing.org](https://processing.org/reference/thread_.html)_

When your thread() is complete you can set a flag (true\false) and use that in draw() as you wish.

References:

- [if / Reference / Processing.org](https://processing.org/reference/if.html)
- [thread() / Reference / Processing.org](https://processing.org/reference/thread_.html)

I tried it and this worked.

`:)`