# How do I center a rect in a grid?
**URL:** https://discourse.processing.org/t/how-do-i-center-a-rect-in-a-grid/15074
**Category:** Coding Questions
**Created:** [October 31, 2019, 11:31am UTC](https://discourse.processing.org/t/how-do-i-center-a-rect-in-a-grid/15074 "2019-10-31T11:31:52Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@RubenF](https://discourse.processing.org/u/RubenF)
#### Post date: [October 31, 2019, 11:31am UTC](https://discourse.processing.org/t/how-do-i-center-a-rect-in-a-grid/15074/1 "2019-10-31T11:31:52Z")
I’m making a snake game, where the user has to click at a position in the grid for it to move there. The problem is, how do I make this rect align in the center of the grid?
Here’s my code:
```auto
float mousePosX=100, mousePosY=100, mousePosXFinal=100, mousePosYFinal=100;
void setup() {
size(500, 500);
background(255);
}
void draw() {
background(255);
for (int i = 0; i < width; i += 50) {
line(i, 0, i, height);
}
for (int i = 0; i < height; i += 50) {
line(0, i, width, i);
}
mousePosX = lerp(mousePosX, mousePosXFinal, .025);
mousePosY = lerp(mousePosY, mousePosYFinal, .025);
if (mousePressed) {
mousePosXFinal = mouseX;
mousePosYFinal = mouseY;
}
fill(255, 0, 0);
rect(mousePosX, mousePosY, 50, 50);
}
```
Video of the problem: [https://streamable.com/za4sj](https://streamable.com/za4sj)
Thanks for reading this! 😃
---
### Author:  [@Tiemen](https://discourse.processing.org/u/Tiemen)
#### Post date: [October 31, 2019, 11:52am UTC](https://discourse.processing.org/t/how-do-i-center-a-rect-in-a-grid/15074/2 "2019-10-31T11:52:08Z")
Hi there Ruben, welcome to the forum.
`mousePosXFinal` and `mousePosYFinal` get appointed the x and y values of where you click with the mouse button. Instead, you could let your sketch calculate to which grid cell the snake should align. [Modulo](https://processing.org/reference/modulo.html) might help you there.
---
### Author:  [@RubenF](https://discourse.processing.org/u/RubenF)
#### Post date: [October 31, 2019, 12:24pm UTC](https://discourse.processing.org/t/how-do-i-center-a-rect-in-a-grid/15074/3 "2019-10-31T12:24:50Z")
I’m not sure how I would implement that into my code. Could you point me in the right direction? Thanks for your help!
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [October 31, 2019, 12:36pm UTC](https://discourse.processing.org/t/how-do-i-center-a-rect-in-a-grid/15074/4 "2019-10-31T12:36:28Z")
```auto
float mousePosX=100, mousePosY=100,
mousePosXFinal=100, mousePosYFinal=100;
void setup() {
size(500, 500);
background(255);
}
void draw() {
background(255);
for (int i = 0; i < width; i += 50) {
line(i, 0, i, height);
}
for (int i = 0; i < height; i += 50) {
line(0, i, width, i);
}
mousePosX = lerp(mousePosX, mousePosXFinal, .025);
mousePosY = lerp(mousePosY, mousePosYFinal, .025);
fill(255, 0, 0);
rect(mousePosX, mousePosY, 50, 50);
}
// ---------------------------------------------------------
void mousePressed() {
// receive new target position
for (int i = 0; i < width; i += 50) {
if (mouseX<=i+50) {
mousePosXFinal = i;
break;
}
}
for (int i = 0; i < height; i += 50) {
if (mouseY<=i+50) {
mousePosYFinal = i;
break;
}
}
}
```
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [October 31, 2019, 12:43pm UTC](https://discourse.processing.org/t/how-do-i-center-a-rect-in-a-grid/15074/5 "2019-10-31T12:43:27Z")
new version with improved lerp function (using amt)
```auto
float mousePosX=100, mousePosY=100,
mousePosXFinal=100, mousePosYFinal=100;
void setup() {
size(500, 500);
background(255);
}
void draw() {
background(255);
// show grid
for (int i = 0; i < width; i += 50) {
line(i, 0, i, height);
}
for (int i = 0; i < height; i += 50) {
line(0, i, width, i);
}
// move red rect
float amt=0.025;
if (dist(mousePosX, mousePosY, mousePosXFinal, mousePosYFinal) < 30)
amt = 0.25;
mousePosX = lerp(mousePosX, mousePosXFinal, amt);
mousePosY = lerp(mousePosY, mousePosYFinal, amt);
// show red rect
fill(255, 0, 0);
rect(mousePosX, mousePosY, 50, 50);
}
// ---------------------------------------------------------
void mousePressed() {
// receive new target position
// search mousePosXFinal
for (int i = 0; i < width; i += 50) {
if (mouseX<=i+50) {
mousePosXFinal = i;
break;
}
}
//
// search mousePosYFinal
for (int i = 0; i < height; i += 50) {
if (mouseY<=i+50) {
mousePosYFinal = i;
break;
}
}
}
```
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [October 31, 2019, 12:56pm UTC](https://discourse.processing.org/t/how-do-i-center-a-rect-in-a-grid/15074/6 "2019-10-31T12:56:54Z")
anyway.
When making the snake game this is not the way to go.
Better have a data structure (lists of rect properties) and let each rect know its position and whether its snake or apple or wall…
**here is a new version, again with better lerp / amt**
```auto
float mousePosX=100, mousePosY=100,
mousePosXFinal=100, mousePosYFinal=100;
boolean startUp=false;
float amt;
float maxAmt = 0.066; // WAS 0.025
int i=0;
float initalDist1;
void setup() {
size(500, 500);
background(255);
frameRate(20);
}
void draw() {
background(255);
// show grid
for (int i = 0; i < width; i += 50) {
line(i, 0, i, height);
}
for (int i = 0; i < height; i += 50) {
line(0, i, width, i);
}
// move red rect
float dist1 = dist(mousePosX, mousePosY, mousePosXFinal, mousePosYFinal);
// Are we in the starting phase?
if (startUp &&
amtinitalDist1/2) { //
// Yes, slowly accelerate
amt += 0.0011;
} else { // OR else if (amt>=0.025)
// No, we slowly decelerate
if (startUp)
println("hit");
startUp=false;
amt = map (dist1, 0, 900, 0.06, maxAmt);
}
ellipse(i++, height-(float)amt*1900, 5, 5);
mousePosX = lerp(mousePosX, mousePosXFinal, amt);
mousePosY = lerp(mousePosY, mousePosYFinal, amt);
if (dist1<0.029) {
if (amt>0)
println("Thank you");
amt=0;
mousePosX = mousePosXFinal;
mousePosY = mousePosYFinal;
}
// show red rect
fill(255, 0, 0);
rect(mousePosX, mousePosY, 50, 50);
text(amt, 31, 31);
}
// ---------------------------------------------------------
void mousePressed() {
// receive new target position
// search mousePosXFinal
for (int i = 0; i < width; i += 50) {
if (mouseX<=i+50) {
mousePosXFinal = i;
break;
}
}
//
// search mousePosYFinal
for (int i = 0; i < height; i += 50) {
if (mouseY<=i+50) {
mousePosYFinal = i;
break;
}
}
// reset
startUp=true;
amt=0;
i=0;
float dist1 = dist(mousePosX, mousePosY, mousePosXFinal, mousePosYFinal);
println(dist1);
initalDist1=dist1;
}
//
```
---
### Author:  [@Tiemen](https://discourse.processing.org/u/Tiemen)
#### Post date: [October 31, 2019, 4:39pm UTC](https://discourse.processing.org/t/how-do-i-center-a-rect-in-a-grid/15074/7 "2019-10-31T16:39:09Z")
At the start of `void draw()` you use for loops to draw a grid. Lets restrict ourselves to the vertical lines in this example for simplicity sake. It draws a vertical line every 50 pixels, starting at 50. This means that the x-coordinates of the cells are 0, 50, 100, … etc.
If I’d click anywhere with my mouse between (x-coordinate) 50 and 99, you could force your sketch to make ` mousePosXFinal` 50. A way to do this is by using the earlier mentioned module; you could discard the amount that exceeds the 50. So if the x-coordinate of mouseX would be 55, it has to lower the amount of 5 so it leaves 50. This value can be used to set the snake’s location.