Pan and zoom large panorama image

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.

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

Indeed it is. Yes it is portrait mode. I changed the RAM to 4000MB but it is still not working.

Thank you anyway.

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

@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?

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.


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 );
        
    }
}

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!

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;

   }
}

when it gets super slow, you need to load less images and instead overwrite old ones

That makes sense. How can this be done?

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<ImageClass> = new ArrayList ();

when a image left the screen (like 2x away from screen border) isAlive = false ;

for loop backwards (!) to remove dead items

Chrisir