# Pan and zoom large panorama image
**URL:** https://discourse.processing.org/t/pan-and-zoom-large-panorama-image/28076
**Category:** Coding Questions
**Created:** [February 25, 2021, 2:21pm UTC](https://discourse.processing.org/t/pan-and-zoom-large-panorama-image/28076 "2021-02-25T14:21:31Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@petemanzel](https://discourse.processing.org/u/petemanzel)
#### Post date: [February 25, 2021, 2:21pm UTC](https://discourse.processing.org/t/pan-and-zoom-large-panorama-image/28076/1 "2021-02-25T14:21:31Z")
Hi, i have an panorama-image with the size of 2048x179121px. I would like to pan through the image using a rotary encoder and zoom in using a touchscreen.
The encoder/arduino part is working fine but if i try to load the image i get the error that it is running out of memory. How can this be done?
Thanks for all help in advance.
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [February 25, 2021, 2:48pm UTC](https://discourse.processing.org/t/pan-and-zoom-large-panorama-image/28076/2 "2021-02-25T14:48:17Z")
Wow, huge image! Is it vertical (portrait mode?)
in processing you can change the RAM in the Menu File | preferences
not sure if this helps?
Warm regards,
Chrisir
---
### Author:  [@petemanzel](https://discourse.processing.org/u/petemanzel)
#### Post date: [February 25, 2021, 3:37pm UTC](https://discourse.processing.org/t/pan-and-zoom-large-panorama-image/28076/3 "2021-02-25T15:37:38Z")
Indeed it is. Yes it is portrait mode. I changed the RAM to 4000MB but it is still not working.
Thank you anyway.
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [February 25, 2021, 4:23pm UTC](https://discourse.processing.org/t/pan-and-zoom-large-panorama-image/28076/4 "2021-02-25T16:23:17Z")
You could try an array of images and display different images from the array when panning (copy your image, cut in 100 images and load those in a for-loop)
either load all images in `setup()` into the array (when possible) OR even load images during `draw()` when panning demands it, keeping only e.g. 5 images in the array
---
### Author:  [@petemanzel](https://discourse.processing.org/u/petemanzel)
#### Post date: [February 26, 2021, 8:22am UTC](https://discourse.processing.org/t/pan-and-zoom-large-panorama-image/28076/5 "2021-02-26T08:22:54Z")
@Chrisir I got my attention on p5.js do you think it could be done as a project that can run in a local web-browser with p5.js?
---
### Author:  [@petemanzel](https://discourse.processing.org/u/petemanzel)
#### Post date: [March 3, 2021, 2:49pm UTC](https://discourse.processing.org/t/pan-and-zoom-large-panorama-image/28076/6 "2021-03-03T14:49:31Z")
Hi i am trying to reassemble this panorama image with p5. I divided the image in 88 2048x2048px tiles.
Now i would like to load the images out of an array. As the images are bigger than my screenresolution i used the windowHight as my reference size. How can i load the images one after the other moving every next picture to the right by the size of the windowHight.
Thats what i tried so far but with no success.
```auto
var images = [];
function preload() {
for (var i = 0; i< 5; i++) {
images[i] = loadImage("img/slice_0_" + i + ".png");
}
}
function setup() {
createCanvas(windowWidth, windowHeight);
background(0);
preload();
}
function draw() {
//image(images[0], 0, 0, windowHeight, windowHeight );
for (var i = 0; i< 5; i++) {
image(images[i], i*windowHeight+windowHeight, 0, windowHeight, windowHeight );
}
}
```
---
### Author:  [@petemanzel](https://discourse.processing.org/u/petemanzel)
#### Post date: [March 4, 2021, 6:44pm UTC](https://discourse.processing.org/t/pan-and-zoom-large-panorama-image/28076/7 "2021-03-04T18:44:05Z")
This is my working version.
Next challenge is to get it working with all images.
If i load more than 5 images everything becomes super slow and nonreactive. how can this be optimised?
Thanks!
```auto
var images = [];
function preload() {
for (var i = 0; i< 20; i++) {
images[i] = loadImage("img/slice_0_" + i + ".png");
}
}
function setup() {
createCanvas(3000, windowHeight);
background(0);
preload();
}
function draw() {
var positionX = 0;
for (var k = 0; k< 20; k++) {
image(images[k], positionX, 0, windowHeight, windowHeight );
positionX += windowHeight;
}
}
```
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [March 4, 2021, 8:01pm UTC](https://discourse.processing.org/t/pan-and-zoom-large-panorama-image/28076/8 "2021-03-04T20:01:34Z")
when it gets super slow, you need to load less images and instead overwrite old ones
---
### Author:  [@petemanzel](https://discourse.processing.org/u/petemanzel)
#### Post date: [March 4, 2021, 9:10pm UTC](https://discourse.processing.org/t/pan-and-zoom-large-panorama-image/28076/9 "2021-03-04T21:10:27Z")
That makes sense. How can this be done?
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [March 5, 2021, 9:20am UTC](https://discourse.processing.org/t/pan-and-zoom-large-panorama-image/28076/10 "2021-03-05T09:20:59Z")
you can use an ArrayList and use add / remove therein
you can make a class ImageClass
- with image and imagePos and isAlive
ArrayList is of type ImageClass
`ArrayList = new ArrayList ();`
when a image left the screen (like 2x away from screen border) isAlive = false ;
for loop backwards (!) to remove dead items
Chrisir