# Make a "world" bigger than the screen and a following camera

**URL:** <https://discourse.processing.org/t/make-a-world-bigger-than-the-screen-and-a-following-camera/3311>\
**Category:** Beginners\
**Created:** [September 6, 2018, 10:02am UTC](https://discourse.processing.org/t/make-a-world-bigger-than-the-screen-and-a-following-camera/3311 "2018-09-06T10:02:10Z")\
**Posts on this page:** 11\
**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:** [September 6, 2018, 10:02am UTC](https://discourse.processing.org/t/make-a-world-bigger-than-the-screen-and-a-following-camera/3311/1 "2018-09-06T10:02:10Z")

</div>

Hi everyone i tried to make an ecosystem and for now its working great, mostly because i receive a lot of help from here. ( see topic : A pathfinding solution).

But now my world gonna be too small for my ecosystem, so i need to make a world bigger than my game window and a camera following the player.

For now i cant find a way to make it or a decent tutorial. Can someone guide or help me ?

Thanks for your time.

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [September 6, 2018, 10:06am UTC](https://discourse.processing.org/t/make-a-world-bigger-than-the-screen-and-a-following-camera/3311/2 "2018-09-06T10:06:40Z")

</div>

Try to use the function `camera()` :

[https://forum.processing.org/one/topic/using-camera-to-follow-a-moving-object.html](https://forum.processing.org/one/topic/using-camera-to-follow-a-moving-object.html)

[http://processing.org/reference/camera\_.html](http://processing.org/reference/camera_.html)

Or if you have a 2D world :

[https://forum.processing.org/one/topic/2d-moving-objects-chasing-by-camera.html](https://forum.processing.org/one/topic/2d-moving-objects-chasing-by-camera.html)

---

<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:** [September 6, 2018, 10:11am UTC](https://discourse.processing.org/t/make-a-world-bigger-than-the-screen-and-a-following-camera/3311/3 "2018-09-06T10:11:18Z")

</div>

yes thats a very basic 2d top down game.  
Thanks for your advice, how do i make my world bigger than my game window ?

what i mean by that is, my game screen size is 1200,900 for now and its the limit of my world. So how do i make a bigger world(sorry i cant find a better word for that) than my game screen

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [September 6, 2018, 10:22am UTC](https://discourse.processing.org/t/make-a-world-bigger-than-the-screen-and-a-following-camera/3311/4 "2018-09-06T10:22:31Z")

</div>

For example you have your “world” bigger than your canvas (1000\*1000) and you translate to `px,py` (the coordinates of the up left corner) to draw your world (here it’s a rect).  
Then you can move your world by using the arrows keys :

```auto
int w = 1000, h = w;
int px,py;

void setup() {
  size(500, 500);
  px = width/2 - w/2;
  py = height/2 - h/2;
}

void draw() {
  background(0);
  pushMatrix();
  translate(px,py);
  fill(255);
  rect(px,py,w,h);
  popMatrix();
}

void keyPressed(){
  if (keyCode == LEFT){
    px -= 5;
  }else if (keyCode == UP){
    py -= 5;
  }else if (keyCode == RIGHT){
    px += 5;
  }else if (keyCode == DOWN){
    py += 5;
  }
}

```

---

<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:** [September 6, 2018, 10:38am UTC](https://discourse.processing.org/t/make-a-world-bigger-than-the-screen-and-a-following-camera/3311/5 "2018-09-06T10:38:38Z")

</div>

Many thanks i gonna try it

---

<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:** [September 7, 2018, 9:44am UTC](https://discourse.processing.org/t/make-a-world-bigger-than-the-screen-and-a-following-camera/3311/6 "2018-09-07T09:44:01Z")

</div>

hi i have a problem (one more), i use eclipse with java and i use processing as library.

I dont know how to “translate” your code.

so here is my code

my main class:

```auto
public class Game extends PApplet{
	
	public static void main(String[] args){
		PApplet.main("Game");
	}
	
	public void settings(){
		size(1200,900);
	}
	
	World world;
	
	public void setup(){
		world = new World(this);
	}
	
	public void draw(){
		background(255);
		world.run();
	}
}

```

my world class : (i dont put any of my code its not relevant i think)

```auto

public class World {
	PApplet parent;
        public World(PApplet p){
	       parent = p;
        }

        public void run(){

        }
}

```

i think maybe i need a player class but i wait for your advices before create it.

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [September 7, 2018, 1:10pm UTC](https://discourse.processing.org/t/make-a-world-bigger-than-the-screen-and-a-following-camera/3311/7 "2018-09-07T13:10:59Z")

</div>

Hey,

I’m don’t know too much about “Java classes syntax” but I think that you can add `px` and `py` propreties to your `class World` so when you draw your world in your canvas, translate to px and py.

Then you can update them (when you press a key for example) :

```auto
world.px += 5;
world.py -= 5;

```

Tell me if I’m wrong

---

<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:** [September 9, 2018, 9:15am UTC](https://discourse.processing.org/t/make-a-world-bigger-than-the-screen-and-a-following-camera/3311/8 "2018-09-09T09:15:42Z")

</div>

Hi sorry for the delay.

well what you propose help me, now my world is bigger than my screen. Thanks

Now i need a way to center the “camera” (center of my screen) on my player but i have a lot of bugs and i dont know why. ex here : my player appear on the top left of my white area and dont move but the “camera” move properly.

here is my code for now:

(game class dont change except i remove the background)

world class:

```auto
public class World {
        int worldW = 2000;
	int worldH = 2000;
	Player player;

        public World(PApplet p){
		parent = p;
		
		prairie = new Prairie(parent);

                float px = parent.width/2 - worldW/2;
		float py = parent.height/2 - worldH/2;
		PVector l = new PVector(px,py); 
		player = new Player(parent,l);
       }

       public void run(){
		
		parent.background(0); ///fond noir = le néant
		
		parent.pushMatrix();
		parent.translate(player.position.x, player.position.y);
		
		parent.fill(255); ///le monde en lui meme
		parent.rect(0, 0, worldW, worldH);
		prairie.run(parent);
		
		parent.popMatrix();
		
		player.run(parent);
		player.update(parent);
		player.keyPressed(parent);

       }
}

```

my player class:

```auto
public class Player {
	PApplet parent;
	
	public PVector position;
	
	@SuppressWarnings("deprecation")
	public Player(PApplet p, PVector l){
		parent = p;
		position = l.get();
		
	}
	
	public void run(PApplet p){
		//parent.rectMode(PConstants.CENTER);
		parent.fill(204,0,204);
		parent.rect(position.x, position.y, 10, 10);
	}
	
	public void update(PApplet p){
		
	}
	
	public void keyPressed(PApplet p){
		if(p.key == PConstants.CODED){
			if(p.keyCode == PConstants.UP){
				position.y += 5;
			}
			if(p.keyCode == PConstants.DOWN){
				position.y -= 5;
			}
			if(p.keyCode == PConstants.LEFT){
				position.x += 5;
			}
			if(p.keyCode == PConstants.RIGHT){
				position.x -= 5;
			}
		}
	}
}

```

and my green area :

```auto
public class Prairie {
	PApplet parent;
	
	public Prairie(PApplet p){
		parent = p;
	}
	
	public void run(PApplet p){
		parent.noStroke();
		parent.fill(0,153,0,25);
		parent.rect(250, 250, 1500, 1500,7);
	}
}

```

Thanks again for yours help and i hope you have a nice weekend.

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [September 9, 2018, 9:35am UTC](https://discourse.processing.org/t/make-a-world-bigger-than-the-screen-and-a-following-camera/3311/9 "2018-09-09T09:35:57Z")

</div>

I think that the error is there :

```auto
public void run(PApplet p){
		//parent.rectMode(PConstants.CENTER);
		parent.fill(204,0,204);
		parent.rect(position.x, position.y, 10, 10);
}

```

Look at this diagram :

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/73a280698953327e6dcdc4818fcb6954765c4120.png)

You need to draw your player at the coordinates (width/2,height/2) so it always stays in the center of the screen.

---

<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:** [September 9, 2018, 9:46am UTC](https://discourse.processing.org/t/make-a-world-bigger-than-the-screen-and-a-following-camera/3311/10 "2018-09-09T09:46:01Z")

</div>

Sir many thanks and all my respect for the diagram, its work !!!

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [September 9, 2018, 10:30am UTC](https://discourse.processing.org/t/make-a-world-bigger-than-the-screen-and-a-following-camera/3311/11 "2018-09-09T10:30:49Z")

</div>

You are welcome ! 🙂  
Bonne journée (je suis français aussi 🇫🇷 )