# Why does drawing an image for the first time slow down the sketch

**URL:** <https://discourse.processing.org/t/why-does-drawing-an-image-for-the-first-time-slow-down-the-sketch/29909>\
**Category:** Coding Questions\
**Created:** [May 6, 2021, 1:04pm UTC](https://discourse.processing.org/t/why-does-drawing-an-image-for-the-first-time-slow-down-the-sketch/29909 "2021-05-06T13:04:04Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![s31](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@s31](https://discourse.processing.org/u/s31)\
**Post date:** [May 6, 2021, 1:04pm UTC](https://discourse.processing.org/t/why-does-drawing-an-image-for-the-first-time-slow-down-the-sketch/29909/1 "2021-05-06T13:04:04Z")

</div>

Every time my code uses a new image, my sketch slows down considerably and I don’t understand why. I’m loading all of my images in the setup() function like everyone says I should, so I don’t understand why this is happening.

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [May 6, 2021, 3:06pm UTC](https://discourse.processing.org/t/why-does-drawing-an-image-for-the-first-time-slow-down-the-sketch/29909/2 "2021-05-06T15:06:28Z")

</div>

do you want to share the code and maybe some of the images? otherwise you will get the same answers like “everyone says”…

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [May 6, 2021, 3:46pm UTC](https://discourse.processing.org/t/why-does-drawing-an-image-for-the-first-time-slow-down-the-sketch/29909/3 "2021-05-06T15:46:39Z")

</div>

if you load big image with high resolution with 100’s megabytes it is normal to get kind of slow

explain your issue with code and image

---

<div class="post-metadata">

**Author:** ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)\
**Post date:** [May 6, 2021, 5:38pm UTC](https://discourse.processing.org/t/why-does-drawing-an-image-for-the-first-time-slow-down-the-sketch/29909/4 "2021-05-06T17:38:09Z")

</div>

A strong suspect would be transfer of the image pixels from the JVM to the GPU which will be done on first usage.

---

<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:** [May 6, 2021, 6:19pm UTC](https://discourse.processing.org/t/why-does-drawing-an-image-for-the-first-time-slow-down-the-sketch/29909/5 "2021-05-06T18:19:31Z")

</div>

Hello,

Could you provide a minimal working example?  
I don’t need the images just an idea of what size they are.

`:)`

---

<div class="post-metadata">

**Author:** ![s31](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@s31](https://discourse.processing.org/u/s31)\
**Post date:** [May 6, 2021, 9:44pm UTC](https://discourse.processing.org/t/why-does-drawing-an-image-for-the-first-time-slow-down-the-sketch/29909/6 "2021-05-06T21:44:27Z")

</div>

Hello, thank you all for responding.  
I apologize for the lack of information in my original post.  
The sketch takes upwards of 3 minutes to fully load. I’m using the P2D renderer, each image is only around 200 KB and 2000x2000 pixels which I don’t think is that large? I’m loading them each with a for loop in setup like this.

```auto
//load images
  arrow = new PImage[9];
  for (int i = 1; i <= 8; i = i+1) {
    arrow[i] = loadImage("arrow000"+i+".png");
  }

```

---

<div class="post-metadata">

**Author:** ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)\
**Post date:** [May 7, 2021, 8:24am UTC](https://discourse.processing.org/t/why-does-drawing-an-image-for-the-first-time-slow-down-the-sketch/29909/7 "2021-05-07T08:24:31Z")

</div>

> [@s31](#):
>
> I’m using the P2D renderer, each image is only around 200 KB and 2000x2000 pixels which I don’t think is that large?

200kb is the compressed size. 2000x2000 pixels is about 15mb of data that needs transferring and caching in a texture on first use.

---

<div class="post-metadata">

**Author:** ![megadix](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/megadix/32/13085_2.png) [@megadix](https://discourse.processing.org/u/megadix)\
**Post date:** [May 7, 2021, 8:46am UTC](https://discourse.processing.org/t/why-does-drawing-an-image-for-the-first-time-slow-down-the-sketch/29909/8 "2021-05-07T08:46:06Z")

</div>

I’m facing the same issue, I had to come up with a workaround.

My context is this: I have a collection of “scenes”, each having a list of sprites (lists of images), in some cases even drawn using multiple layers of PGraphics… quite complex!  
The problem is that **when I draw a new `Scene` for the first time, the sketch hangs** (sometimes up to three or more seconds)

These solutions **did not work** :

- pre-render images in `setup()`
- pre-render images on a different thread: Processing protests that I’m not drawing from the main thread
- … other 100’s I’ve tried but don’t remember 🙂

To add further complexity, I’m loading images using `PApplet.requestImage()`…

The only workaround I’ve found so far is to:

- while images are not ready, draw a **static** splash screen: you cannot have fancy animations because your main draw thread will be blocked by the first rendering ☹
- keep track if scenes are ready to be drawn in a `boolean scenesAreReady` variable
- when they first become ready (i.e. all images have been loaded, see `requestImage()` docs in the reference) **pre-render** them in an off-screen, disposable `PGraphics` buffer
- all subsequent `draw()` calls will be smooth

My `draw()` method:

```auto
...

if (!allScenesReady()) {
    drawSplashScreen();
} else {
    drawMain(getGraphics());
}

```

The `allScenesReady()` method:

```auto
boolean allScenesReady() {
    if (scenesAreReady) {
        // immediately return
        return true;
    }
    scenesAreReady = scenes.stream().allMatch(Scene::isReady);
    if (scenesAreReady) {
        // this gets called only the first time scenesAreReady == true
        initScenes();
    }
    return scenesAreReady;
}

```

This is how `initScenes()` is implemented:

```auto
void initScenes() {
    // ... some initializing code

    PGraphics dummyBuffer = createGraphics(width, height, P2D);
    dummyBuffer.beginDraw();
    drawMain(dummyBuffer);
    dummyBuffer.endDraw();
}

```

Finally, see how `drawMain()` accepts a `PGraphics dest` object, so I can decide where to draw (dummy buffer vs main screen)

```auto
void drawMain(PGraphics dest) {
  dest.background(255);
  drawScenes(dest);
}

```

It’s not the perfect solution, as the sketch can take a long time to properly initialize (my sketch is very complex!) but it is the only solution I’ve found so far…

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [May 8, 2021, 6:59am UTC](https://discourse.processing.org/t/why-does-drawing-an-image-for-the-first-time-slow-down-the-sketch/29909/9 "2021-05-08T06:59:22Z")

</div>

Would this work?

```auto
void setup() { size(640, 480, P2D); }
void draw() {
  if(frameCount == 1) {
    image(a, width, height);
    image(b, width, height);
    // ... draw all images here
    return;
  }
  // image are on the GPU now, delays should be gone
  // ... rest goes here ...
}

```

The amount of images is limited by the GPU RAM though.

---

<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:** [May 8, 2021, 10:59am UTC](https://discourse.processing.org/t/why-does-drawing-an-image-for-the-first-time-slow-down-the-sketch/29909/10 "2021-05-08T10:59:03Z")

</div>

Hello,

That condition will never be _true_ in _draw()_:

> [@hamoid](#):
>
> `if(frameCount < 1)`

This will be _true_ for the first frame in _draw()_:

```auto
if (frameCount == 1)

```

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e708cc8feb7eb1d4295b0681c8a050569108bac0.png)

Perhaps drawing the images in setup() first would also help.

`:)`

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [May 8, 2021, 1:38pm UTC](https://discourse.processing.org/t/why-does-drawing-an-image-for-the-first-time-slow-down-the-sketch/29909/11 "2021-05-08T13:38:35Z")

</div>

Ok changed to `==`. You got the idea 🙂

I think it was mentioned earlier that drawing the images inside setup didn’t help with transferring them to the GPU to avoid later unexpected pauses.