# 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:** 3
**Page:** 2

<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 4, 2021, 6:37pm UTC](https://discourse.processing.org/t/creating-screen-boundaries/28855/21 "2021-04-04T18:37:02Z")

</div>

here — you missed this

`if (keyCode == UP)`

**Example**

Example with screen boundaries

here is an example where a 2nd STATE of the program is started when the border is hit. Then we see a text and can restart. See variable `state`.

```auto
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; 
float rectW = 50;

int state = 0; 

// ----------------------------------------------------------------------------------------------------------

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

void draw() {
  background(255);

  switch(state) {
  case 0: 
    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, 10, 10); 
    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;
    }

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

    // same for y

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

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

  case 1: 
    // 
    fill(2); 
    text(" YOU HIT the border", 
      33, 222);
    break; 
    //
  } //switch 
  //
} // draw()

// ----------------------------------------------------------------------------------------------------------

void restart() {
  // set state to Hit border state 
  state = 1;
}

void keyPressed() {

  switch(state) {
  case 0: 

    if (key == CODED && keyPressed) {

      if (keyCode == UP)
      {
        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;
      }
    }
    break;

    //----

  case 1:
    //reset 
    snakeX = 30;
    snakeY = 30;
    x = constrain(snakeX, rectW/2, width-rectW/2);
    y = constrain(snakeY, rectW/2, height-rectW/2);
    state=0; 
    break;
  }//switch
}//func 
//

```

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [April 4, 2021, 9:15pm UTC](https://discourse.processing.org/t/creating-screen-boundaries/28855/22 "2021-04-04T21:15:13Z")

</div>

Hello,

_width_ and _height_ are system variables that represent the size of the canvas:

- [width \ Language (API) \ Processing 3+](https://processing.org/reference/width.html)
- [height \ Language (API) \ Processing 3+](https://processing.org/reference/height.html)

You decided to use these variables and that is going to cause unexpected behavior if you did not expect this. `:)`

I renamed these in your code and also added some color.

Try this:

```auto
int width1 = 10; // Renamed
int height1 = 10; // Renamed
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, width1, height1); 
  fill(255, 0, 0);
  rect(snakeX, snakeY, height1, width1);

  //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);
  fill(0, 255, 0);
  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;
    }
  }
}

```

The green box is now constrained to the width and height of the canvas.

Now work on the red box.

And other things… I only spent a moment on this.

`:)`

---

<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 6, 2021, 6:30pm UTC](https://discourse.processing.org/t/creating-screen-boundaries/28855/23 "2021-04-06T18:30:41Z")

</div>

Thank you glv, that actually helps quite a bit as I didn’t know about that.  
So this is what I’ve come up with.

```auto
int width1 = 10; // Renamed
int height1 = 10; // Renamed
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 = 10;
float y = 10;

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, width1, height1); 
  fill(255, 0, 0);
  rect(snakeX, snakeY, height1, width1);

  //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;
  }

  snakeX = constrain(snakeX, snakeX/2, width-snakeX/40);
  snakeY = constrain(snakeY, snakeY/2, height-snakeY/40);

};

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;
    }
  }
}

```

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