Make the camera follow an object

[jeremydouglass]

Camera is designed for 3D (P3D). camera() / Reference / Processing.org

In 2D, “translate()” (and rotate) is the essence of the camera.

Here is a very simple example. The sketch is drawing a fixed platform and avatar around 0,0, but a moving “camera” can be toggled with the spacebar.

/**
 * 2D camera for platformer -- left/right moves, space toggles camera
 * 2019-04 Processing 3.4
 * https://discourse.processing.org/t/help-with-camera-function/10386
 */
int x;
boolean cameraOn = true;

void draw() {
  background(0);
  translate(width/2, height/2); // center the shot
  if(cameraOn) myCamera();
  platform();
  avatar();
}

void platform(){
  rectMode(CENTER);
  rect(0, 0, 70, 20);
}

void avatar(){
  if(keyPressed){
    if(keyCode==RIGHT) x++;  // move
    if(keyCode==LEFT) x--;
    if(x>35) x=-35;          // wrap around
    if(x<-35) x=35;
  }
  ellipse(x, -10, 10, 10);   // draw
}

// move the camera in a circle based on time
void myCamera(){
  translate(width/3 * sin(millis()*.001), height/3 * cos(millis()*.001));
}

void keyReleased(){
  if(key==' ') cameraOn = !cameraOn;
}

Notice that the platform is always drawn centered on 0,0. The “camera” is just an optional translate command that changes the frame of reference – the view – before the platform is drawn.

For a different example with vertical scrolling, see:

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

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 ti…

Again, it is just a translate command before drawing.