To go beyond the limit of your screen

Processing Coding Questions
1

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?

1 Like
2

Hello,

You can translate() everything at the start of your program.
https://processing.org/tutorials/drawing/

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

:)

1 Like
3

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?

4

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:

:)

5

So I have this code:

ArrayList<Tegenstander> tegenstanders;


void setup(){
  fullScreen();
  background(0);
  tegenstanders = new ArrayList<Tegenstander>();
  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());
  }
  
    
}

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

6

I did not look at your code but did provide a simple example to start with.

Take a look a this:

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.

:)

2 Likes
7

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?

8

xPos is a global variable.

You can set it to whatever you want in your code.

Keep at it!

:)

9

I did use mousePressed and it worked. But how does translate(xPos, 500); change int x? How does translate know those two are connected?

10

It does not; they are two different variables.

Check out the tutorials for Coordinate System and Shapes and the reference for translate().

:)

1 Like