# To go beyond the limit of your screen
**URL:** https://discourse.processing.org/t/to-go-beyond-the-limit-of-your-screen/24136
**Category:** Coding Questions
**Created:** [September 26, 2020, 10:51am UTC](https://discourse.processing.org/t/to-go-beyond-the-limit-of-your-screen/24136 "2020-09-26T10:51:45Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@yanze03](https://discourse.processing.org/u/yanze03)
#### Post date: [September 26, 2020, 10:51am UTC](https://discourse.processing.org/t/to-go-beyond-the-limit-of-your-screen/24136/1 "2020-09-26T10:51:45Z")
Hi,
I am trying to make a program where the size of my screen is a bit to small.
I am trying to make it so that when I pusch a button or scroll a scrollbar the X coordinate of the canvas moves. This would mean that the left side of my screen is no longer x = 0; but for example x = 100;
How do I change the X variable of my screen?
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [September 26, 2020, 11:46am UTC](https://discourse.processing.org/t/to-go-beyond-the-limit-of-your-screen/24136/2 "2020-09-26T11:46:23Z")
Hello,
You can translate() everything at the start of your program.
[https://processing.org/tutorials/drawing/](https://processing.org/tutorials/drawing/)
```auto
void setup()
{
size(200, 200);
}
void draw()
{
background(0);
translate(-100, 0);
strokeWeight(5);
stroke(255, 0, 0);
point(100,0);
}
```
There is also a map function that you may find useful:
[https://processing.org/reference/map\_.html](https://processing.org/reference/map_.html)
`:)`
---
### Author:  [@yanze03](https://discourse.processing.org/u/yanze03)
#### Post date: [September 26, 2020, 2:10pm UTC](https://discourse.processing.org/t/to-go-beyond-the-limit-of-your-screen/24136/3 "2020-09-26T14:10:37Z")
I understand what you mean but I am still a bit confused.
Lets suppose I am placing squares on my screen which currently ranges from x = 0 to x = 1600, now my screen is filled with squares and I want to go further to the right and fill it from x = 1600 to x = 3200. How would I use translate(); or map(); to do this?
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [September 26, 2020, 2:56pm UTC](https://discourse.processing.org/t/to-go-beyond-the-limit-of-your-screen/24136/4 "2020-09-26T14:56:52Z")
> [@yanze03](#):
>
> I understand what you mean but I am still a bit confused.
Your original problem statement is not clear to me.
A small snippet of code that you are working through helps.
You can plot beyond your canvas (this may be your screen size) but you will not see this.
You can map() values from 0 to 3200 to 0 to 1600 and plot those on your canvas; this is just scaling it down which can also be done by dividing by 2 in this case.
You may want to do a bit more exploration into the resources available to you first and work through some of the examples and functions.
One of the best tools in a programmer’s tool chest is knowing the resources available to you and learning to navigate, filter, and use them.
A short list of resources to peruse:
> **Resources \< Click here to expand !**
>
> Explore the resources available here:
>
> - The Processing _website_ has references, examples, tutorials, links to resources, etc.
> [https://processing.org/](https://processing.org/)
>
> - The Processing PDE (IDE) has lots to offer!
> An exploration of the menu bar will reveal what is available; libraries, tools, local examples, and other goodies are in there.
>
> - The Coding Train \< Experience the unbridled enthusiasm of Daniel Shiffman
> [https://shiffman.net/](https://shiffman.net/)
> [https://www.youtube.com/user/shiffman](https://www.youtube.com/user/shiffman)
> [https://thecodingtrain.com/](https://thecodingtrain.com/)
>
> - Happy Coding
> [Processing Tutorials - Happy Coding](https://happycoding.io/tutorials/processing/)
>
> - The source code can give insight if you are adventurous:
> [GitHub - processing/processing: Source code for the Processing Core and Development Environment (PDE)](https://github.com/processing/processing)
>
> - Explore Processing on GitHub:
> [Processing Foundation · GitHub](https://github.com/processing)
> [processing/core/src/processing/core/PApplet.java at master · processing/processing · GitHub](https://github.com/processing/processing/blob/master/core/src/processing/core/PApplet.java) \< Many of the Processing functions are here!
>
> - The Processing Foundation
> [https://processingfoundation.org/](https://processingfoundation.org/)
> Check out the menu.
> In the education menu, there is a reference to the Coding Train.
>
> - And the Internet. `:)`
`:)`
---
### Author:  [@yanze03](https://discourse.processing.org/u/yanze03)
#### Post date: [September 26, 2020, 3:32pm UTC](https://discourse.processing.org/t/to-go-beyond-the-limit-of-your-screen/24136/5 "2020-09-26T15:32:55Z")
So I have this code:
```auto
ArrayList tegenstanders;
void setup(){
fullScreen();
background(0);
tegenstanders = new ArrayList();
tegenstanders.add(new Tegenstander());
}
void draw(){
background(0);
for (int i = tegenstanders.size() - 1; i >= 0; i--) {
Tegenstander t = tegenstanders.get(i);
t.update();
t.getX();
t.getY();
}
println(tegenstanders.size());
if(keyPressed && key == 'v'){
tegenstanders.add(new Tegenstander());
}
}
```
```auto
class Tegenstander{
int x;
int y;
Tegenstander(){
x = 100;
y =100;
}
void update(){
fill(100);
rect(x, y, 100, 100);
if(mouseX> x && mouseX < x+100 && mouseY > y && mouseY < y+100){
cursor(HAND);
stroke(255);
if(mousePressed){
strokeWeight(5);
x = mouseX-50;
y = mouseY-50;
}
else{
strokeWeight(2);
}
}
else{
cursor(ARROW);
noStroke();
}
}
int getX(){
return x;
}
int getY(){
return y;
}
}
```
I can store the objects on any coordinates I want even outside my computer window wich means I cant see them. The coordinates range from 0 to 16k I read somewhere, however I can only see x from 0 to 1600 on my screen. What I am trying to do is make it so that I can scroll and see X from 0 all the way to 16k. for example by pressing a button which changes the view from x 0-1600 to x 1600-3200. That way I can store objects on a much larger scale and still interact with them. I understand I can use translate(): or map(): but how do I connect those comands to the point of view on a canvas. example:
start screen: you can see X: 0 to X: 1600. I press a button/mouse and now I can see X: 1600 to X: 3200
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [September 26, 2020, 3:43pm UTC](https://discourse.processing.org/t/to-go-beyond-the-limit-of-your-screen/24136/6 "2020-09-26T15:43:21Z")
I did not look at your code but did provide a simple example to start with.
Take a look a this:
```auto
int xPos = 0;
void setup()
{
size(500, 500);
}
void draw()
{
background(0);
translate(0, 0);
//translate(-500, 0);
//translate(xPos, 0);
for (int x = 0; x<1000; x+=5)
{
int y = height/2;
strokeWeight(3);
if (x >500)
stroke(255, 0, 0);
else
stroke(0, 255, 0);
point(x, y);
}
}
```
You will have to uncomment and try the different translates.
Use mousePressed() or keyPressed() to change the variable xPos.
`:)`
---
### Author:  [@yanze03](https://discourse.processing.org/u/yanze03)
#### Post date: [September 26, 2020, 4:14pm UTC](https://discourse.processing.org/t/to-go-beyond-the-limit-of-your-screen/24136/7 "2020-09-26T16:14:40Z")
I used your code and played around with it. This is what I am trying to do thanks!
But how does xPos connect with x, how does the program know it has to change x? Suppose I make a lot of variables how does translate connect with the right variable?
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [September 26, 2020, 4:20pm UTC](https://discourse.processing.org/t/to-go-beyond-the-limit-of-your-screen/24136/8 "2020-09-26T16:20:00Z")
> [@yanze03](#):
>
> But how does xPos connect with x, how does the program know it has to change x? Suppose I make a lot of variables how does translate connect with the right variable?
xPos is a global variable.
You can set it to whatever you want in your code.
> [@glv](#):
>
> Use mousePressed() or keyPressed() to change the variable xPos.
Keep at it!
`:)`
---
### Author:  [@yanze03](https://discourse.processing.org/u/yanze03)
#### Post date: [September 26, 2020, 4:54pm UTC](https://discourse.processing.org/t/to-go-beyond-the-limit-of-your-screen/24136/9 "2020-09-26T16:54:39Z")
I did use mousePressed and it worked. But how does translate(xPos, 500); change int x? How does translate know those two are connected?
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [September 26, 2020, 5:21pm UTC](https://discourse.processing.org/t/to-go-beyond-the-limit-of-your-screen/24136/10 "2020-09-26T17:21:52Z")
> [@yanze03](#):
>
> But how does translate(xPos, 500); change int x?
**It does not** ; they are two different variables.
Check out the tutorials for _Coordinate System and Shapes_ and the reference for _translate()_.
`:)`