Pan and zoom large panorama image

p5.js Coding Questions
1

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.

2

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

3

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

Thank you anyway.

4

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

5

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

6

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

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;

   }
}
8

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

9

That makes sense. How can this be done?

10

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