# Make a camera who follow a player

**URL:** https://discourse.processing.org/t/make-a-camera-who-follow-a-player/12471
**Category:** Coding Questions
**Created:** [July 3, 2019, 9:02am UTC](https://discourse.processing.org/t/make-a-camera-who-follow-a-player/12471 "2019-07-03T09:02:28Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![vincentstrebelle](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vincentstrebelle/32/6963_2.png) [@vincentstrebelle](https://discourse.processing.org/u/vincentstrebelle)
#### Post date: [July 3, 2019, 9:02am UTC](https://discourse.processing.org/t/make-a-camera-who-follow-a-player/12471/1 "2019-07-03T09:02:28Z")

</div>

Hi everyone, i want to make a camera who follow my player ( i allready make a topic about it but now it’s a bit different)

so, i need a camera who follow the player but not linked to the screen so if i change the size of my screen it does not cause issue.

here’s a basic example:

```auto
Player player;
LimitOfTheWorld limitoftheworld;

int worldSize = 500;

void setup(){
  frame.setResizable(true);
  size(250,250);
  PVector pos = new PVector(250,250);
  PVector pos2 = new PVector(10,10);
  player = new Player(pos);
  limitoftheworld = new LimitOfTheWorld(pos2);
}

void draw(){
  background(255);
  fill(0,0,0);
  rect(worldSize,worldSize,0,0);
  player.display();
  player.playerMvt();
  limitoftheworld.display();
}

```

```auto
class LimitOfTheWorld{
  PVector position;
  float r;

  LimitOfTheWorld(PVector pos2){
    position = pos2.get();
    r = 450;
  }
  
  void display(){
    noFill();
    rect(position.x,position.y,r,r);
    stroke(5);
  }
}

```

```auto
class Player{
  
  PVector position;
  float r;
  
  
  Player(PVector pos){
    position = pos.get();
    r = 10;
  }
  
  void display(){
    fill(255,0,0);
    ellipse(position.x,position.y,r,r);
  }
  
  void playerMvt(){
    if(keyPressed){
      if(key == CODED){
        if(keyCode == UP){
          position.y -= 10;
        }
        if(keyCode == DOWN){
          position.y += 10;
        }
        if(keyCode == LEFT){
          position.x -= 10;
        }
        if(keyCode == RIGHT){
          position.x += 10;
        }
      }
    }
  }
}

```

So how can i make a “camera” who follow my player ?

Thanks for your help and your time.

---

<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: [July 3, 2019, 10:49am UTC](https://discourse.processing.org/t/make-a-camera-who-follow-a-player/12471/2 "2019-07-03T10:49:41Z")

</div>

> [@How can I center an object on my screen that moves?](https://discourse.processing.org/t/how-can-i-center-an-object-on-my-screen-that-moves/12196/4):
>
> Understanding the relationship between translate, scale, and the idea of a 2D “camera” can sometimes be a bit tricky. It is worth reviewing the coordinate system and 2D transformations tutorials: [https://processing.org/tutorials/drawing/](https://processing.org/tutorials/drawing/)[https://processing.org/tutorials/transform2d/](https://processing.org/tutorials/transform2d/) However, in the end, there are three key transformations: translate to the center of the screen optionally scale the view, e.g. based on player speed or inter-player distance translate again to recenter the came…

Chrisir

---

<div class="post-metadata">

### Author: ![vincentstrebelle](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vincentstrebelle/32/6963_2.png) [@vincentstrebelle](https://discourse.processing.org/u/vincentstrebelle)
#### Post date: [July 3, 2019, 11:31am UTC](https://discourse.processing.org/t/make-a-camera-who-follow-a-player/12471/3 "2019-07-03T11:31:20Z")

</div>

thanks i will read that and come back later for questions 🙂

---

<div class="post-metadata">

### Author: ![vincentstrebelle](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vincentstrebelle/32/6963_2.png) [@vincentstrebelle](https://discourse.processing.org/u/vincentstrebelle)
#### Post date: [July 10, 2019, 11:16am UTC](https://discourse.processing.org/t/make-a-camera-who-follow-a-player/12471/4 "2019-07-10T11:16:41Z")

</div>

Thanks guys, as always it’s work perfectly.

I just modify it a little bit so its work in my code, here is what i make.

```auto
Player player;
LimitOfTheWorld limitoftheworld;
PVector view;
int mode;
int worldSize = 500;

void setup(){
  surface.setResizable(true);
  size(250,250);
  PVector pos = new PVector(250,250);
  PVector pos2 = new PVector(10,10);
  player = new Player(pos);
  limitoftheworld = new LimitOfTheWorld(pos2);
  rect(worldSize,worldSize,0,0);
}

void draw(){
  background(255);
  
  switch(mode){
    case 0: // FLAT
    break;
    case 1: // TRACK
    translate(width/2, height/2); // center screen on 0,0
    translate(-view.x, -view.y); // recenter screen on view
    break;
  }

  
  pushMatrix();
  noFill();
  player.playerMvt();
  view = PVector.lerp(player.position,player.position,0.0);
 
  limitoftheworld.display();
  player.display();
  //ellipse(view.x,view.y,3,3);
  popMatrix();
}

void keyReleased() {
  if (key == CODED) {
    if (keyCode == CONTROL) {
      mode = (mode+1)%2;
    }
  }
}

```

i didn’t change Player and LimitOfTheWorld