# Camera in Processing (ViewPort)

**URL:** <https://discourse.processing.org/t/camera-in-processing-viewport/40442>\
**Category:** Coding Questions\
**Created:** [January 4, 2023, 1:14pm UTC](https://discourse.processing.org/t/camera-in-processing-viewport/40442 "2023-01-04T13:14:28Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![OverLord](https://avatars.discourse-cdn.com/v4/letter/o/ecc23a/32.png) [@OverLord](https://discourse.processing.org/u/OverLord)\
**Post date:** [January 4, 2023, 1:14pm UTC](https://discourse.processing.org/t/camera-in-processing-viewport/40442/1 "2023-01-04T13:14:28Z")

</div>

Hello Community Processing.  
I want to make a 2D game with a top view, I need the camera to follow the player, but how many times I have not tried it either “floated” or flew away.

---

<div class="post-metadata">

**Author:** ![micycle](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micycle/32/201_2.png) [@micycle](https://discourse.processing.org/u/micycle)\
**Post date:** [January 4, 2023, 1:34pm UTC](https://discourse.processing.org/t/camera-in-processing-viewport/40442/2 "2023-01-04T13:34:32Z")

</div>

I worked on a camera class for a processing-based 2D platformer a while ago. May be of use:

> <https://github.com/Stephcraft/Project-16x16/blob/master/src/main/java/project_16x16/Camera.java>

---

<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:** [January 4, 2023, 10:04pm UTC](https://discourse.processing.org/t/camera-in-processing-viewport/40442/3 "2023-01-04T22:04:28Z")

</div>

> [@OverLord](#):
>
> it either “floated” or flew away.

we need to see your code to comment on this

---

<div class="post-metadata">

**Author:** ![OverLord](https://avatars.discourse-cdn.com/v4/letter/o/ecc23a/32.png) [@OverLord](https://discourse.processing.org/u/OverLord)\
**Post date:** [January 5, 2023, 11:11am UTC](https://discourse.processing.org/t/camera-in-processing-viewport/40442/4 "2023-01-05T11:11:36Z")

</div>

```auto
int x;
int y;
void setup() {
 fullScreen(OPENGL);
}

void draw() {
  background (0);
  rect(0,0, 5000,5000); //background of game
  beginCamera();
  translate (x, 0);
  endCamera();
  
  println(x);
}

void mousePressed (){
  x+=50;
}

```

---

<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:** [January 5, 2023, 3:23pm UTC](https://discourse.processing.org/t/camera-in-processing-viewport/40442/5 "2023-01-05T15:23:01Z")

</div>

The camera() command is mainly meant for 3D purposes.

it’s not really cool for 2D purpose

**For 2D**

For 2D it’s easier to have a very big background image with path and towns and all.

You then move the image so that the player is always in the center of the screen, and when he’s running around, the background moves. This gives the impression of the camera moving with the player.

for example start with image at `-2000,-2000`

`image ( bigBk, -2000,-2000); // negativ, so the background is far left`

when he moves right it’s  
`image ( bigBk, -2500,-2000);`

when he moves left it’s  
`image ( bigBk, -1000,-2000);`  
or ` image ( bigBk, 0,-2000);`  
or ` image ( bigBk, 1000,-2000);`

so your line of code is just

```
 `image ( bigBk, viewPortX, viewPortY);` 

```

**Example**

This can be used for

- a side scroller game or

[![](https://upload.wikimedia.org/wikipedia/commons/d/d1/Secretmaryochronicles.png) ](https://upload.wikimedia.org/wikipedia/commons/d/d1/Secretmaryochronicles.png)

see [Side-scrolling video game - Wikipedia](https://en.wikipedia.org/wiki/Side-scrolling_video_game)

- an isometric game

[![](https://upload.wikimedia.org/wikipedia/commons/e/ef/Daimonin_Stoneglow_beta4.png) ](https://upload.wikimedia.org/wikipedia/commons/e/ef/Daimonin_Stoneglow_beta4.png)

see [Isometric video game graphics - Wikipedia](https://en.wikipedia.org/wiki/Isometric_video_game_graphics)

**ViewPort**

this principle is called ViewPort of the game.

see [Viewport - Wikipedia](https://en.wikipedia.org/wiki/Viewport)

Chrisir

---

<div class="post-metadata">

**Author:** ![OverLord](https://avatars.discourse-cdn.com/v4/letter/o/ecc23a/32.png) [@OverLord](https://discourse.processing.org/u/OverLord)\
**Post date:** [January 5, 2023, 4:05pm UTC](https://discourse.processing.org/t/camera-in-processing-viewport/40442/6 "2023-01-05T16:05:19Z")

</div>

Thank you! Im try this method

---

<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:** [January 5, 2023, 4:05pm UTC](https://discourse.processing.org/t/camera-in-processing-viewport/40442/7 "2023-01-05T16:05:39Z")

</div>

by the way,

from your initial approach:  
I quote the reference

> For this reason, camera functions should be placed at the beginning of **draw()** (so that transformations happen afterwards)

from reference and then beginCamera

**Working Sketch**

```auto

int x;
int y;

void setup() {
  fullScreen(OPENGL);
}

void draw() {
  background (0);

  beginCamera();
  camera();
  translate (x, 0);
  endCamera();

  fill(255, 0, 0); 
  rect(0, 0, 5000, 5000); //background of game

  pushMatrix(); 
  translate(width/2, height/2);
  rotateZ(PI/4.0); 
  fill(0, 255, 0); 
  box(133); 
  popMatrix(); 

  println(x);
}

void mousePressed () {
  x += 50;
}

```