# How do I center a rect in a grid?

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:

``````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

Thanks for reading this!

1 Like

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 might help you there.

1 Like

I’m not sure how I would implement that into my code. Could you point me in the right direction? Thanks for your help!

``````

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

}
``````

new version with improved lerp function (using amt)

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

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

``````
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  &&
amt<maxAmt &&
dist1>initalDist1/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;
}
//
``````
1 Like

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.

2 Likes