How do I center a rect in a grid?

Processing Coding Questions
1

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! :smiley:

2

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.

3

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

4 


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

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

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

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.