# Making a large image move without lag?

**URL:** <https://discourse.processing.org/t/making-a-large-image-move-without-lag/8406>\
**Category:** Coding Questions\
**Created:** [February 14, 2019, 7:22pm UTC](https://discourse.processing.org/t/making-a-large-image-move-without-lag/8406 "2019-02-14T19:22:30Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Schred](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/schred/32/13146_2.png) [@Schred](https://discourse.processing.org/u/Schred)\
**Post date:** [February 14, 2019, 7:22pm UTC](https://discourse.processing.org/t/making-a-large-image-move-without-lag/8406/1 "2019-02-14T19:22:30Z")

</div>

Hey!  
So I’m trying to implement a background to my 2d platformer. The image moves with the player, just a lot slower. However, moving the image causes a lot of lag. This is my code(simplified):

```auto
void draw(){
  playerClass player = playerList.get(0);
  image(backgroundIMG, player.cameraX * 0.05, 400);
  //cameraX is basicaly:
  if(keyPressed && keyCode == RIGHT){
    cameraX += someValue;
  }
}

```

Here’s a video:

[![](https://img.youtube.com/vi/gHP3daFLVnM/maxresdefault.jpg "Example") ](https://www.youtube.com/watch?v=gHP3daFLVnM)

Yeah the art is beautiful I know

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [February 15, 2019, 12:56am UTC](https://discourse.processing.org/t/making-a-large-image-move-without-lag/8406/2 "2019-02-15T00:56:11Z")

</div>

How large is your image? If you don’t show the image, do you still see the lag?

---

<div class="post-metadata">

**Author:** ![Schred](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/schred/32/13146_2.png) [@Schred](https://discourse.processing.org/u/Schred)\
**Post date:** [February 15, 2019, 6:17am UTC](https://discourse.processing.org/t/making-a-large-image-move-without-lag/8406/3 "2019-02-15T06:17:24Z")

</div>

It’s 3000 by 800 and about 20 kb, I think. Since I’m displaying it with image(), i can not NOT display it, can I?😅

---

<div class="post-metadata">

**Author:** ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)\
**Post date:** [February 15, 2019, 12:38pm UTC](https://discourse.processing.org/t/making-a-large-image-move-without-lag/8406/4 "2019-02-15T12:38:30Z")

</div>

you could break it down into smaller images (maybe the size of the canvas) and just render 3 (at most) at one time and just switch in/out what images are needed according to the progress left-right through the level.

---

<div class="post-metadata">

**Author:** ![Schred](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/schred/32/13146_2.png) [@Schred](https://discourse.processing.org/u/Schred)\
**Post date:** [February 15, 2019, 1:03pm UTC](https://discourse.processing.org/t/making-a-large-image-move-without-lag/8406/5 "2019-02-15T13:03:42Z")

</div>

I broke it down into 5 equal pieces, and the frameRate already improved. I gues I’ll need to cut it into smaller pieces.

---

<div class="post-metadata">

**Author:** ![Schred](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/schred/32/13146_2.png) [@Schred](https://discourse.processing.org/u/Schred)\
**Post date:** [February 15, 2019, 2:32pm UTC](https://discourse.processing.org/t/making-a-large-image-move-without-lag/8406/6 "2019-02-15T14:32:22Z")

</div>

Now I broke it down into 30 pieces and it CAN run at 60fps, which is great! However, my program runs at 40 fps, when I get to a certain area, as shown in the video below. It doesn’t matter if all the images are loaded, or if just the ones that need to be there are shown, the frameRate remains the same.  
This is how I draw the images:

```auto
playerClass player = playerList.get(0);
    for (int i = 0; i < 20; i++) {
      if (i * 100 - player.cameraX * 0.1 >= -10 && i * 100 - player.cameraX * 0.1 <= 13000) {
        println(i + "loaded");
        image(backgroundIMG[i], i * 100 - player.cameraX * 0.1, 400);
      }
    }

```

[![](https://img.youtube.com/vi/-LgM8Re7Y08/maxresdefault.jpg "Another Example") ](https://www.youtube.com/watch?v=-LgM8Re7Y08)

You can see which images are loaded in the console, and the framerate in the upper.right corner (it’s at 50fps instead of 60 because of my recording software). The first time I run it just the needed images are loaded, the second time all of them.

---

<div class="post-metadata">

**Author:** ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)\
**Post date:** [February 15, 2019, 2:41pm UTC](https://discourse.processing.org/t/making-a-large-image-move-without-lag/8406/7 "2019-02-15T14:41:44Z")

</div>

you could remove a few of those calculations something like

```auto
var xScaled = player.cameraX * .1;
var x = 0;
for (int i = 0; i < 20; i++) {
	x = i * 100 - xScaled;
    if (x >= -10 && x <= 13000) {
		println(i + "loaded");
		image(backgroundIMG[i], x, 400);
	}
}

```

i’m not sure how much affect this would have but it is something. and unless you have multiple players i’d just store the player in a single var and not retrieve it each frame. without seeing the rest of the code it’s difficult to say what would be causing the frame drops. also there will be a limit to the amount of background divisions before the performance returns will diminish.

---

<div class="post-metadata">

**Author:** ![Schred](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/schred/32/13146_2.png) [@Schred](https://discourse.processing.org/u/Schred)\
**Post date:** [February 15, 2019, 2:54pm UTC](https://discourse.processing.org/t/making-a-large-image-move-without-lag/8406/8 "2019-02-15T14:54:17Z")

</div>

Thanks, that saves a lot of calculation! Sadly this doesn’t improve the framerate much. At least I discovered something: while editing my code, i forgot to remove the \* 0.1 int the image() function. This resulted in having to move the images less, and brought the framerate up to 60.

---

<div class="post-metadata">

**Author:** ![Schred](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/schred/32/13146_2.png) [@Schred](https://discourse.processing.org/u/Schred)\
**Post date:** [February 15, 2019, 3:05pm UTC](https://discourse.processing.org/t/making-a-large-image-move-without-lag/8406/9 "2019-02-15T15:05:14Z")

</div>

Turns out I was right. I set the scaleValue to 0.02 and it works fine! Altough this seems a little bit slow, I would have (and should have) experimented with that more. Thanks for your help @hotfooted ! 😃