# \[Processing 3\] Moving through a map bigger than the screen

**URL:** <https://discourse.processing.org/t/processing-3-moving-through-a-map-bigger-than-the-screen/10393>\
**Category:** Beginners\
**Created:** [April 17, 2019, 1:26pm UTC](https://discourse.processing.org/t/processing-3-moving-through-a-map-bigger-than-the-screen/10393 "2019-04-17T13:26:57Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![whedz](https://avatars.discourse-cdn.com/v4/letter/w/9de053/32.png) [@whedz](https://discourse.processing.org/u/whedz)\
**Post date:** [April 17, 2019, 1:26pm UTC](https://discourse.processing.org/t/processing-3-moving-through-a-map-bigger-than-the-screen/10393/1 "2019-04-17T13:26:57Z")

</div>

Hello,

I’m currently trying to make a arcade video game, with a vertical scrolling. I use eclipse and processing 3 as a library import into java classes and I don’t face any issue about it.

I now get two variables for screenHeight and screenWeight (768 and 1024).  
My map is about 1024x15669

I try to load the map as a background image but i’m facing to a RuntimeException : background image must be the same size as your application. It’s logic, the issue is explicit.

Is there a way to fix this?

Thanks in advance

---

<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:** [April 17, 2019, 1:33pm UTC](https://discourse.processing.org/t/processing-3-moving-through-a-map-bigger-than-the-screen/10393/2 "2019-04-17T13:33:31Z")

</div>

Hi! Welcome to the forum! 🙂

Are you trying to draw the image doing `background(img)`?

If that’s the case, I think you should be calling `image(img, x, y, width, height)` instead, and then you change `x` and `y` to control which part of the background you want to see, probably using negative numbers to move the background left and up.

Might that work?

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [April 17, 2019, 2:56pm UTC](https://discourse.processing.org/t/processing-3-moving-through-a-map-bigger-than-the-screen/10393/3 "2019-04-17T14:56:37Z")

</div>

You can do a search in the forum about panning or scrolling. These are links from the previous forum:

> [Constraining an image while panning and zooming - Processing 2.x and 3.x Forum](https://forum.processing.org/two/discussion/1364/constraining-an-image-while-panning-and-zooming)

> [https://forum.processing.org/two/discussion/4945/zooming-and-panning/p1](https://forum.processing.org/two/discussion/4945/zooming-and-panning/p1)

> [Having issues with dragging when creating a map - Processing 2.x and 3.x Forum](https://forum.processing.org/two/discussion/24488/having-issues-with-dragging-when-creating-a-map#latest)

Kf

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [April 19, 2019, 11:05pm UTC](https://discourse.processing.org/t/processing-3-moving-through-a-map-bigger-than-the-screen/10393/4 "2019-04-19T23:05:21Z")

</div>

> [@whedz](#):
>
> 1024x15669

Do you actually have a 1024x15669 image file, like a jpg, that you are loading and want to scroll? Or is it many tiles, or are you generating the background image dynamically inside your sketch…?

Here is a very very simple example of a vertical scroller written in PDE (not Eclipse). It demonstrates using translate and the coordinate system to keep track of where you are, then check collision with the viewframe to decide what to render (e.g. only part of a very large graphic, or only certain tiles from a map).

```auto
// https://discourse.processing.org/t/processing-3-moving-through-a-map-bigger-than-the-screen/10393/2
// scrolling

PVector view;
PVector scroll;
PImage img;
int ymax = 400;

void setup() {
  view = new PVector(0, -20); // starting location
  scroll = new PVector (0, 1); // scrolling direction and speed 
  // example image to place on the map
  img = loadImage("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Processing_3_logo.png/480px-Processing_3_logo.png");
  img.resize(200,200);
}

void draw() {
  background(192);
  translate(view.x, -view.y); // align canvas to view
  content(); // draw contents
  view.add(scroll); // scroll
  if (view.y > ymax) {
    view.y = -height*1.5; // bounce from end to start
  }
}

void content() {
  if(view.y + height > 100 && view.y < 100 + img.height ){ // display image if in view
    image(img, 20, 100);
  }
  for (int i=0; i<=ymax; i+=20) { // display lines
    if (i > view.y && i < view.y + height + 20) { // ...if in view
      line(0, i, width, i);
      text(i, 0, i);
    }
  }
}

```

![36%20PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/147a7afad5b4595685d0203a25505fd002117b38.png)

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [April 19, 2019, 11:07pm UTC](https://discourse.processing.org/t/processing-3-moving-through-a-map-bigger-than-the-screen/10393/5 "2019-04-19T23:07:30Z")

</div>

> [@whedz](#):
>
> RuntimeException : background image must be the same size as your application

Also: in general, don’t use `background()` to display an image; use it for color, and use `image()` for images.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [April 19, 2019, 11:12pm UTC](https://discourse.processing.org/t/processing-3-moving-through-a-map-bigger-than-the-screen/10393/6 "2019-04-19T23:12:38Z")

</div>

> [@jeremydouglass](#):
>
> … in general, don’t use `background()` to display an image;

Alternatively we can use **set()** in place of **background()**:

> **[set() / Reference](https://processing.org/reference/set_.html)**
>
> Changes the color of any pixel or writes an image directly into the display window. The x and y parameters specify the pixel to change and the color parameter specifies…

Both **set()** & **background()** merely copy a PImage’s _pixels[]_ raw to the canvas.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [April 20, 2019, 12:35am UTC](https://discourse.processing.org/t/processing-3-moving-through-a-map-bigger-than-the-screen/10393/7 "2019-04-20T00:35:27Z")

</div>

Also for scrolling, see this recent gallery share:

> [@Magic game Scroll code slight\_smile](https://discourse.processing.org/t/magic-game-scroll-code/10385):
>
> Hello people, I bring you a code that I have not yet seen in the processing forum, it is a great help to make video scrolling games or a huge help to make cyclic textures effects completely adaptable to all the needs you may have. Let’s enjoy it wink CODE: /\* [This code is part of gameLibZero for Processing 3.x.x] 17/04/2019 - By Luis lopez martinez.. + This code shows how it makes a complex scroll parallax layer.. + This code is free for all use, enjoy it. …