# Make the camera follow an object

**URL:** <https://discourse.processing.org/t/make-the-camera-follow-an-object/10386>\
**Category:** Beginners\
**Created:** [April 17, 2019, 10:57am UTC](https://discourse.processing.org/t/make-the-camera-follow-an-object/10386 "2019-04-17T10:57:10Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![jensemand](https://avatars.discourse-cdn.com/v4/letter/j/b38774/32.png) [@jensemand](https://discourse.processing.org/u/jensemand)\
**Post date:** [April 17, 2019, 10:57am UTC](https://discourse.processing.org/t/make-the-camera-follow-an-object/10386/1 "2019-04-17T10:57:10Z")

</div>

Hi, I am trying to make a game in processing and I need to make the camera follow an object by using camera, but i can’t get it to work so it would be nice with just a simple example

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 17, 2019, 11:13am UTC](https://discourse.processing.org/t/make-the-camera-follow-an-object/10386/2 "2019-04-17T11:13:08Z")

</div>

Is this in P3D…? In 3D…?

---

<div class="post-metadata">

**Author:** ![jensemand](https://avatars.discourse-cdn.com/v4/letter/j/b38774/32.png) [@jensemand](https://discourse.processing.org/u/jensemand)\
**Post date:** [April 17, 2019, 11:14am UTC](https://discourse.processing.org/t/make-the-camera-follow-an-object/10386/3 "2019-04-17T11:14:09Z")

</div>

it’s 2d  
i wrote: size(800,800,P2D);

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 17, 2019, 11:23am UTC](https://discourse.processing.org/t/make-the-camera-follow-an-object/10386/4 "2019-04-17T11:23:52Z")

</div>

There is no camera in 2D

Instead always draw your character at widrh/2 , height/2 and move floor/map/buildings underneath by adding -x to each position

---

<div class="post-metadata">

**Author:** ![f42ter](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/f42ter/32/16793_2.png) [@f42ter](https://discourse.processing.org/u/f42ter)\
**Post date:** [April 18, 2019, 4:00pm UTC](https://discourse.processing.org/t/make-the-camera-follow-an-object/10386/5 "2019-04-18T16:00:20Z")

</div>

Sorry my fault, check [https://www.euclideanspace.com/](https://www.euclideanspace.com/) for a tutorial about How to write a game.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [April 21, 2019, 3:52pm UTC](https://discourse.processing.org/t/make-the-camera-follow-an-object/10386/6 "2019-04-21T15:52:10Z")

</div>

Camera is designed for 3D (P3D). [camera() / Reference / Processing.org](https://processing.org/reference/camera_.html)

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.

```auto
/**
 * 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;
}

```

![08%20AM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/eab47fa4d288d618692ac81ddc329626b1a9fb94.png)

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](https://discourse.processing.org/t/processing-3-moving-through-a-map-bigger-than-the-screen/10393/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 ti…

Again, it is just a translate command before drawing.