# How do I keep my rectangles on the grid?

**URL:** <https://discourse.processing.org/t/how-do-i-keep-my-rectangles-on-the-grid/4630>\
**Category:** Coding Questions\
**Created:** [October 19, 2018, 11:01am UTC](https://discourse.processing.org/t/how-do-i-keep-my-rectangles-on-the-grid/4630 "2018-10-19T11:01:27Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![tomer1504](https://avatars.discourse-cdn.com/v4/letter/t/6f9a4e/32.png) [@tomer1504](https://discourse.processing.org/u/tomer1504)\
**Post date:** [October 19, 2018, 11:01am UTC](https://discourse.processing.org/t/how-do-i-keep-my-rectangles-on-the-grid/4630/1 "2018-10-19T11:01:27Z")

</div>

Hello! I am making a simple Snake game with p5.js. I drew a grid, and two rectangles (snake and apple). But, I want to keep my rectangles on the grid, so they align with it. How do I do that? Here is my code:

```auto
let snake;
let apple;
let size = 25;

function setup() {
	let canvas = createCanvas(650, 650);
	canvas.center("horizontal");
	frameRate(15);
	snake = new Snake();
	DrawAppleRandomPos();
}

function draw() {
	background(242);

	for (let x = 0; x < width; x += width / 25) {
		for (let y = 0; y < height; y += height / 25) {
			stroke(100, 100, 100);
			strokeWeight(0.5);
			line(x, 0, x, height);
			line(0, y, width, y);
		}
	}

	snake.Move();
	snake.Show();
	
	if (snake.Eat(apple)) {
		DrawAppleRandomPos();
	}
	fill(255, 100, 0);
	rect(apple.x, apple.y, size, size);
}

const DrawAppleRandomPos = () => {
	let cols = floor(width / size);
	let rows = floor(height / size);
	apple = createVector(floor(random(cols)), floor(random(rows)));
	apple.mult(size);
}

function keyPressed() {
	if (keyCode === UP_ARROW || key === "w") {
		snake.Direction(0, -1);
	} else if (keyCode === DOWN_ARROW || key === "s") {
		snake.Direction(0, 1);
	} else if (keyCode === LEFT_ARROW || key === "a") {
		snake.Direction(-1, 0);
	} else if (keyCode === RIGHT_ARROW || key === "d") {
		snake.Direction(1, 0);
	}
}

function Snake() {
	this.vec = createVector(0, 0);
	this.movex = 1;
	this.movey = 0;
	this.w = 25;
	this.h = 25;
	this.speed = 15;
	
	this.Move = () => {
		this.vec.x += this.movex * this.speed;
		this.vec.y += this.movey * this.speed;
		this.vec.x = constrain(this.vec.x, 0, width - this.w);
		this.vec.y = constrain(this.vec.y, 0, height - this.h);
	}
	this.Show = () => {
		fill(200, 20, 230);
		rect(this.vec.x, this.vec.y, this.w, this.h);
	}
	this.Direction = (x, y) => {
		this.movex = x;
		this.movey = y;
	}
	this.Eat = (position) => {
		let distance = dist(this.vec.x, this.vec.y, position.x, position.y);
		if (distance < 10) {
			console.log("ate");
			return true;
		} else {
			return false;
		}
	}
}

```

Thank you in advance guys 😄 !!

---

<div class="post-metadata">

**Author:** ![UnGast](https://avatars.discourse-cdn.com/v4/letter/u/3bc359/32.png) [@UnGast](https://discourse.processing.org/u/UnGast)\
**Post date:** [October 19, 2018, 10:24pm UTC](https://discourse.processing.org/t/how-do-i-keep-my-rectangles-on-the-grid/4630/2 "2018-10-19T22:24:07Z")

</div>

I changed something in DrawAppleRandomPos. Now it works for the columns. The first columns x must be 0 so you have to calculate (column - 1) \* size for the base x, and then add the stroke weights of the grid (for every column twice the stroke weight, because the stroke is on both sides).

```auto
let snake;
let apple;
let size = 25;

function setup() {
	let canvas = createCanvas(650, 650);
	canvas.center("horizontal");
	frameRate(15);
	snake = new Snake();
	DrawAppleRandomPos();
}

function draw() {
	background(242);

	for (let x = 0; x < width; x += width / 25) {
		for (let y = 0; y < height; y += height / 25) {
			stroke(100, 100, 100);
			strokeWeight(0.5);
			line(x, 0, x, height);
			line(0, y, width, y);
		}
	}

	snake.Move();
	snake.Show();
	
	if (snake.Eat(apple)) {
		DrawAppleRandomPos();
	}
	fill(255, 100, 0);
	rect(apple.x, apple.y, size, size);
}

const DrawAppleRandomPos = () => {
	let cols = floor(width / size);
	let rows = floor(height / size);
	const col = floor(random(cols));
	const row = floor(random(rows));
	const x = (col - 1) * size + (col) * 0.5 * 2
	apple = createVector(x, floor(random(rows)) * 25);
}

function keyPressed() {
	if (keyCode === UP_ARROW || key === "w") {
		snake.Direction(0, -1);
	} else if (keyCode === DOWN_ARROW || key === "s") {
		snake.Direction(0, 1);
	} else if (keyCode === LEFT_ARROW || key === "a") {
		snake.Direction(-1, 0);
	} else if (keyCode === RIGHT_ARROW || key === "d") {
		snake.Direction(1, 0);
	}
}

function Snake() {
	this.vec = createVector(0, 0);
	this.movex = 1;
	this.movey = 0;
	this.w = 25;
	this.h = 25;
	this.speed = 15;
	
	this.Move = () => {
		this.vec.x += this.movex * this.speed;
		this.vec.y += this.movey * this.speed;
		this.vec.x = constrain(this.vec.x, 0, width - this.w);
		this.vec.y = constrain(this.vec.y, 0, height - this.h);
	}
	this.Show = () => {
		fill(200, 20, 230);
		rect(this.vec.x, this.vec.y, this.w, this.h);
	}
	this.Direction = (x, y) => {
		this.movex = x;
		this.movey = y;
	}
	this.Eat = (position) => {
		let distance = dist(this.vec.x, this.vec.y, position.x, position.y);
		if (distance < 10) {
			console.log("ate");
			return true;
		} else {
			return false;
		}
	}
}

```

---

<div class="post-metadata">

**Author:** ![tomer1504](https://avatars.discourse-cdn.com/v4/letter/t/6f9a4e/32.png) [@tomer1504](https://discourse.processing.org/u/tomer1504)\
**Post date:** [October 20, 2018, 7:50am UTC](https://discourse.processing.org/t/how-do-i-keep-my-rectangles-on-the-grid/4630/3 "2018-10-20T07:50:55Z")

</div>

Thank you for your help but it doesn’t work…

---

<div class="post-metadata">

**Author:** ![UnGast](https://avatars.discourse-cdn.com/v4/letter/u/3bc359/32.png) [@UnGast](https://discourse.processing.org/u/UnGast)\
**Post date:** [October 20, 2018, 8:57am UTC](https://discourse.processing.org/t/how-do-i-keep-my-rectangles-on-the-grid/4630/4 "2018-10-20T08:57:46Z")

</div>

The apple is now always aligned with the columns, not with the rows yet (same principle like columns). The snake is a little more complicated. Could be done like that: The snake now has a CheckMove function, because you need to store how much time has passed since the snake moved the last time. When this time reaches a threshhold, move the snake one complete field instead of a little bit each frame.

```auto
let snake;
let apple;
let size = 25;

function setup() {
	let canvas = createCanvas(650, 650);
	canvas.center("horizontal");
	frameRate(15);
	snake = new Snake();
	DrawAppleRandomPos();
}

function draw() {
	background(242);

	for (let x = 0; x < width; x += width / 25) {
		for (let y = 0; y < height; y += height / 25) {
			stroke(100, 100, 100);
			strokeWeight(0.5);
			line(x, 0, x, height);
			line(0, y, width, y);
		}
	}

	snake.CheckMove();
	snake.Show();
	
	if (snake.Eat(apple)) {
		DrawAppleRandomPos();
	}
	fill(255, 100, 0);
	rect(apple.x, apple.y, size, size);
}

const DrawAppleRandomPos = () => {
	let cols = floor(width / size);
	let rows = floor(height / size);
	const col = floor(random(cols));
	const row = floor(random(rows));
	const x = (col - 1) * size + (col) * 0.5 * 2
	apple = createVector(x, floor(random(rows)) * 25);
}

function keyPressed() {
	if (keyCode === UP_ARROW || key === "w") {
		snake.Direction(0, -1);
	} else if (keyCode === DOWN_ARROW || key === "s") {
		snake.Direction(0, 1);
	} else if (keyCode === LEFT_ARROW || key === "a") {
		snake.Direction(-1, 0);
	} else if (keyCode === RIGHT_ARROW || key === "d") {
		snake.Direction(1, 0);
	}
}

function Snake() {
	this.vec = createVector(0, 0);
	this.movex = size + 1;
	this.movey = 0;
	this.w = 25;
	this.h = 25;
	this.speed = 1000; // how many milliseconds for one box?
	this.lastMoveTime = 0;
	
	this.CheckMove = () => {
		if (this.lastMoveTime === 0 || Date.now() - this.lastMoveTime > this.speed) {
			this.Move()
		}
	}
	
	this.Move = () => {
		this.vec.x += this.movex;
		this.vec.y += this.movey * this.speed;
		this.vec.x = constrain(this.vec.x, 0, width - this.w);
		this.vec.y = constrain(this.vec.y, 0, height - this.h);
		this.lastMoveTime = Date.now()
	}
	this.Show = () => {
		fill(200, 20, 230);
		rect(this.vec.x, this.vec.y, this.w, this.h);
	}
	this.Direction = (x, y) => {
		this.movex = x;
		this.movey = y;
	}
	this.Eat = (position) => {
		let distance = dist(this.vec.x, this.vec.y, position.x, position.y);
		if (distance < 10) {
			console.log("ate");
			return true;
		} else {
			return false;
		}
	}
}

```

---

<div class="post-metadata">

**Author:** ![julian2](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/julian2/32/1551_2.png) [@julian2](https://discourse.processing.org/u/julian2)\
**Post date:** [October 21, 2018, 6:03pm UTC](https://discourse.processing.org/t/how-do-i-keep-my-rectangles-on-the-grid/4630/5 "2018-10-21T18:03:15Z")

</div>

you want to move in _grid increments_, one way to do this is to make sure you are using the variable you’ve named `size` at every location that governs position _and_ movement!

Another way to do it is to have position and movement operate on grid _indexes_ and have a function that converts grid index to canvas pixel coordinates (scaling factor).

I can expand a bit more on this once I get home to a keyboard! (Right now I’ve only babbled in English without referring to any code!)

* * *

ok! so after trying the code and modifying a _few_ parts of it (i’ve tried to leave a comment in the code at the parts I changed! 🙂 )  
[https://editor.p5js.org/julian2/sketches/HJHbAS9iQ](https://editor.p5js.org/julian2/sketches/HJHbAS9iQ)

What I did here was to make sure that all increments, steps & movements happen in multiples of `size`, I think I initially understood your definition of `size`, it seems you wanted size to be the ‘count of columns and rows’ in the game, but I thought it was the actual _grid size_ (25 pixels width & height). I’ve changed it so that it’s just the ‘size of a single cell’ aka. _grid size_.