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

Processing Beginners
4

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).

// 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