# Creating screen boundaries

**URL:** <https://discourse.processing.org/t/creating-screen-boundaries/28855>\
**Category:** Coding Questions\
**Created:** [March 26, 2021, 2:07am UTC](https://discourse.processing.org/t/creating-screen-boundaries/28855 "2021-03-26T02:07:20Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![NewProgrammer123](https://avatars.discourse-cdn.com/v4/letter/n/ecc23a/32.png) [@NewProgrammer123](https://discourse.processing.org/u/NewProgrammer123)\
**Post date:** [March 26, 2021, 2:07am UTC](https://discourse.processing.org/t/creating-screen-boundaries/28855/1 "2021-03-26T02:07:20Z")

</div>

Hello, I am making a simple game but as a beginner I cannot find a way to do the following. It a moving square but I want to write an IF statement so that when it hits the edge of the window for the game to restart. I already have the restart part done.  
Thank you

---

<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:** [March 26, 2021, 10:23am UTC](https://discourse.processing.org/t/creating-screen-boundaries/28855/2 "2021-03-26T10:23:26Z")

</div>

> [@NewProgrammer123](#):
>
> but I want to write an IF statement so that when it hits the edge of the window

so, its better to see your code.

But for example when your rectangle is at x,y and has a size w,h

```auto
// check x
if(x<1) 
    restart();
if(x>width-w) 
    restart();

// same for y

if(y<1) 
    restart();
if(y>height-h) 
    restart();

```

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [March 26, 2021, 11:16am UTC](https://discourse.processing.org/t/creating-screen-boundaries/28855/3 "2021-03-26T11:16:56Z")

</div>

a simple boundary check using constrain.

```auto
float x,w,y,h,rectW = 50;

void setup(){
  size(400,400);  
  
};

void draw(){
  background(0);
  fill(255);
  
  rectMode(CENTER);
  
  x = constrain(mouseX,rectW/2,width-rectW/2);
  y = constrain(mouseY,rectW/2,height-rectW/2);
  rect(x,y,rectW,rectW);
};

```

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [March 26, 2021, 11:24am UTC](https://discourse.processing.org/t/creating-screen-boundaries/28855/4 "2021-03-26T11:24:14Z")

</div>

a simple circle square collision.

```auto
float x,y;
float radius = 50;
void setup(){
  size(400,400);
};

void draw(){
  
  background(0);
  fill(255);
  rectMode(CENTER);
  rect(width/2,height/2,200,200);
  fill(255,0,0);
  
  //fill(0,0,255);
  x = pos().x;y = pos().y;
  ellipse(pos().x,pos().y,radius,radius);
};

PVector pos(){
  PVector p = new PVector(mouseX,mouseY);
  if(!(mouseX-radius/2<width/2+100
     &&mouseY+radius/2>height/2-100
     &&mouseY-radius/2<height/2+100
     &&mouseX+radius/2>width/2-100))
     return p;
     else return new PVector(x,y);
     
};

```

Please pay attention to the for loop. Some improvements could be made but thats a start.

---

<div class="post-metadata">

**Author:** ![NewProgrammer123](https://avatars.discourse-cdn.com/v4/letter/n/ecc23a/32.png) [@NewProgrammer123](https://discourse.processing.org/u/NewProgrammer123)\
**Post date:** [April 3, 2021, 5:59pm UTC](https://discourse.processing.org/t/creating-screen-boundaries/28855/5 "2021-04-03T17:59:49Z")

</div>

So this is part of my code to give some context. I am looking for something so that when the rect hits the end of the window the game restarts, I already have the restart part done I’m just struggling with the when it hits the edge and I have tried applying the suggested bits of code but cannot do it. Any help would be appreciated.

```auto
int width = 10;
int height = 10;
int size = 10;
float snakeX = 10;
float snakeY = 10;
ArrayList<PVector>body = new ArrayList<PVector>(); // new array (PVector is x,y)

int foodX=(int) random(10, 440);
int foodY=(int) random(10, 440);
boolean up = false;
boolean down = false;
boolean left = false;
boolean right = true;
int score = 0;

void setup() {
  size(450,450);
  frameRate(60);
}

void draw(){
 background(255);
 
   fill(0); 
   textSize(18);
   text("Score:"+score,370,445);
   

 if (up){
   snakeY -= 2;
 }
 else if (down){
   snakeY += 2;
 }
  else if (left){
   snakeX -= 2;
 } 
  else if (right){
   snakeX += 2;
 } 
 
 rect(snakeX, snakeY, width, height); 
 fill(255);
 rect(snakeX, snakeY, height, width);
 
 
 //snake hits food and generates new location + adds length to snake + adds 1 to score
 if ( snakeX + 10 >= foodX && // Snakes right hits foods left
      snakeX <= foodX + 10 && // Snakes left hits foods right
      snakeY + 10 >= foodY && // Snakes top hits foods bottom
      snakeY <= foodY + 10) // Snakes bottom hits foods top
 
 {
   foodX = (int) random(10, 440);
   foodY = (int) random(10, 440);
   score += 1;
 }

 
   
 }

 void keyPressed()
{
  if (key == CODED && keyPressed)
  {
    {
      up = true;
      down = false;
      left = false;
      right = false;
    }
    if (keyCode == DOWN)
    {
      up = false;
      down = true;
      left = false;
      right = false;
    }
        if (keyCode == LEFT)
    {
      up = false;
      down = false;
      left = true;
      right = false;
    }
        if (keyCode == RIGHT)
    {
      up = false;
      down = false;
      left = false;
      right = true;
    }
  }
}
 

```

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [April 3, 2021, 6:16pm UTC](https://discourse.processing.org/t/creating-screen-boundaries/28855/6 "2021-04-03T18:16:53Z")

</div>

can you please show me your implementation because at the last post just contains the same code as before.

Please read my code as its very self explanatory. The PVector boolean can be amended to fit any of your requirements.

you are currently not checking if your player is within bounds

```auto
if (key == CODED && keyPressed)

```

you need to include a check here to make sure you are within bounds.

I cannot complete this exercise for you but I can guide you, but currently anymore would mean you fail to learn the point of the exercise.

---

<div class="post-metadata">

**Author:** ![NewProgrammer123](https://avatars.discourse-cdn.com/v4/letter/n/ecc23a/32.png) [@NewProgrammer123](https://discourse.processing.org/u/NewProgrammer123)\
**Post date:** [April 3, 2021, 6:34pm UTC](https://discourse.processing.org/t/creating-screen-boundaries/28855/7 "2021-04-03T18:34:18Z")

</div>

So I’ve attempted this one, I basically just copied it over and changed the values to mine to see what exactly it did and it just kept a square in the corner.  
This is what I did

```auto
int width = 10;
int height = 10;
int size = 10;
float snakeX = 10;
float snakeY = 10;
ArrayList<PVector>body = new ArrayList<PVector>(); // new array (PVector is x,y)

int foodX=(int) random(10, 440);
int foodY=(int) random(10, 440);
boolean up = false;
boolean down = false;
boolean left = false;
boolean right = true;
int score = 0;

float x,w,y,h,rectW = 50;

void setup() {
  size(400,400);
  frameRate(60);
}

void draw(){
 background(255);
 
   fill(0); 
   textSize(18);
   text("Score:"+score,370,445);
   

 if (up){
   snakeY -= 2;
 }
 else if (down){
   snakeY += 2;
 }
  else if (left){
   snakeX -= 2;
 } 
  else if (right){
   snakeX += 2;
 } 
 
 rect(snakeX, snakeY, width, height); 
 fill(255);
 rect(snakeX, snakeY, height, width);
 
 
 //snake hits food and generates new location + adds length to snake + adds 1 to score
 if ( snakeX + 10 >= foodX && // Snakes right hits foods left
      snakeX <= foodX + 10 && // Snakes left hits foods right
      snakeY + 10 >= foodY && // Snakes top hits foods bottom
      snakeY <= foodY + 10) // Snakes bottom hits foods top
 
 {
   foodX = (int) random(10, 440);
   foodY = (int) random(10, 440);
   score += 1;
 }

x = constrain(snakeX,rectW/2, width-rectW/2);
y = constrain(snakeY,rectW/2,height-rectW/2);
 rect(x,y,rectW,rectW);
};
   
 

 void keyPressed()
{
  if (key == CODED && keyPressed)
  {
    {
      up = true;
      down = false;
      left = false;
      right = false;
    }
    if (keyCode == DOWN)
    {
      up = false;
      down = true;
      left = false;
      right = false;
    }
        if (keyCode == LEFT)
    {
      up = false;
      down = false;
      left = true;
      right = false;
    }
        if (keyCode == RIGHT)
    {
      up = false;
      down = false;
      left = false;
      right = true;
    }
  }
}
 

```

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [April 3, 2021, 6:48pm UTC](https://discourse.processing.org/t/creating-screen-boundaries/28855/8 "2021-04-03T18:48:13Z")

</div>

thats because you arent testing for the boundaries.

```auto
if ( snakeX + 10 >= foodX && // Snakes right hits foods left
      snakeX <= foodX + 10 && // Snakes left hits foods right
      snakeY + 10 >= foodY && // Snakes top hits foods bottom
      snakeY <= foodY + 10) // Snakes bottom hits foods top
 
 {
   foodX = (int) random(10, 440);
   foodY = (int) random(10, 440);
   score += 1;
 }

```

you are testing for the food currently, you need to repeat what youve done but for the boundaries. Also at no point in your sketch are you drawing you food.

---

<div class="post-metadata">

**Author:** ![NewProgrammer123](https://avatars.discourse-cdn.com/v4/letter/n/ecc23a/32.png) [@NewProgrammer123](https://discourse.processing.org/u/NewProgrammer123)\
**Post date:** [April 3, 2021, 6:57pm UTC](https://discourse.processing.org/t/creating-screen-boundaries/28855/9 "2021-04-03T18:57:28Z")

</div>

Yes this is a shorter and simplified version on my full code so that I can test for boundaries easier with less clutter, I have everything else working.  
You are saying test or boundaries, if this a built-in function?

---

<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:** [April 3, 2021, 7:02pm UTC](https://discourse.processing.org/t/creating-screen-boundaries/28855/10 "2021-04-03T19:02:59Z")

</div>

> [@NewProgrammer123](#):
>
> You are saying test or boundaries, if this a built-in function?

No. Please read my post above again…

---

<div class="post-metadata">

**Author:** ![NewProgrammer123](https://avatars.discourse-cdn.com/v4/letter/n/ecc23a/32.png) [@NewProgrammer123](https://discourse.processing.org/u/NewProgrammer123)\
**Post date:** [April 3, 2021, 7:15pm UTC](https://discourse.processing.org/t/creating-screen-boundaries/28855/11 "2021-04-03T19:15:21Z")

</div>

I know how to do it with the food because I have the positions of the food but I don’t have the position of the boundaries, I know the screen size but I can’t put them into variables

---

<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:** [April 3, 2021, 7:26pm UTC](https://discourse.processing.org/t/creating-screen-boundaries/28855/12 "2021-04-03T19:26:20Z")

</div>

Please read my post again

Chrisir

---

<div class="post-metadata">

**Author:** ![NewProgrammer123](https://avatars.discourse-cdn.com/v4/letter/n/ecc23a/32.png) [@NewProgrammer123](https://discourse.processing.org/u/NewProgrammer123)\
**Post date:** [April 3, 2021, 7:38pm UTC](https://discourse.processing.org/t/creating-screen-boundaries/28855/13 "2021-04-03T19:38:24Z")

</div>

Chrisir I’m not expecting to be handed the answer but I don’t seem to be understanding, could you rephrase okease

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [April 3, 2021, 7:41pm UTC](https://discourse.processing.org/t/creating-screen-boundaries/28855/14 "2021-04-03T19:41:45Z")

</div>

Well you do have the position of the boundaries. The sketch boundaries are 0,0 height, width unless you want to specify something else.

---

<div class="post-metadata">

**Author:** ![NewProgrammer123](https://avatars.discourse-cdn.com/v4/letter/n/ecc23a/32.png) [@NewProgrammer123](https://discourse.processing.org/u/NewProgrammer123)\
**Post date:** [April 3, 2021, 7:58pm UTC](https://discourse.processing.org/t/creating-screen-boundaries/28855/15 "2021-04-03T19:58:49Z")

</div>

Yes I know that but my issue is with how to would write it because I can to Sketch +450 but how do I declare it

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [April 3, 2021, 8:02pm UTC](https://discourse.processing.org/t/creating-screen-boundaries/28855/16 "2021-04-03T20:02:36Z")

</div>

Please review my initial sketch you need to taylor the code and consider what boundaries you are testing and therefore what points each line should have. In the code there are four tests for four lines, each line has two points. What are the 2 points for each boundary?

---

<div class="post-metadata">

**Author:** ![NewProgrammer123](https://avatars.discourse-cdn.com/v4/letter/n/ecc23a/32.png) [@NewProgrammer123](https://discourse.processing.org/u/NewProgrammer123)\
**Post date:** [April 3, 2021, 8:08pm UTC](https://discourse.processing.org/t/creating-screen-boundaries/28855/17 "2021-04-03T20:08:44Z")

</div>

> [@paulgoux](#):
>
> ```auto
> PVector pos(){
> PVector p = new PVector(mouseX,mouseY);
> if(!(mouseX-radius/2<width/2+100
> &&mouseY+radius/2>height/2-100
> &&mouseY-radius/2<height/2+100
> &&mouseX+radius/2>width/2-100))
> return p;
> else return new PVector(x,y);
>      
> };
> 
> ```

is this what you mean? I have tried this but i continuously get errors

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [April 3, 2021, 8:19pm UTC](https://discourse.processing.org/t/creating-screen-boundaries/28855/18 "2021-04-03T20:19:09Z")

</div>

So your boundaries are as follows

Left

0,0 0,height

Top

0,0 width, 0

Right

Width,0 width, height

Bottom

0,0 width height.

You are not currently testing all of those so it wont produce the logic you are currently looking for. You then need to consider wether the test uses a less than or greater than sign. If the boundary is left of your screen then the mouse should always be greater and vice versa. Now apply that same thinking to the top and bottom boundaries.

At the moment though your tests are conflicting take a minute to review your code and think why would the logic conflict, atm you are 50% done but two logical statements need to be amended.

Hint where is the 0 value in your test?

---

<div class="post-metadata">

**Author:** ![NewProgrammer123](https://avatars.discourse-cdn.com/v4/letter/n/ecc23a/32.png) [@NewProgrammer123](https://discourse.processing.org/u/NewProgrammer123)\
**Post date:** [April 4, 2021, 3:05am UTC](https://discourse.processing.org/t/creating-screen-boundaries/28855/19 "2021-04-04T03:05:17Z")

</div>

What variable type can take a 0,0 variable I didn’t know that there was one for co-ordanites?

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [April 4, 2021, 4:23am UTC](https://discourse.processing.org/t/creating-screen-boundaries/28855/20 "2021-04-04T04:23:04Z")

</div>

You can use pvectors or you can assign them separately as x and y or any other name for that matter.

To further your understanding perhaps this might help.

> **[Collision Detection](https://www.jeffreythompson.org/collision-detection/table_of_contents.php)**
>
> An online book about collision detection using Processing.

[Next page](https://discourse.processing.org/t/creating-screen-boundaries/28855.md?page=2)