# Creating a grid for art

**URL:** <https://discourse.processing.org/t/creating-a-grid-for-art/25874>\
**Category:** Coding Questions\
**Created:** [December 1, 2020, 9:03pm UTC](https://discourse.processing.org/t/creating-a-grid-for-art/25874 "2020-12-01T21:03:50Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Matrix](https://avatars.discourse-cdn.com/v4/letter/m/dec6dc/32.png) [@Matrix](https://discourse.processing.org/u/Matrix)\
**Post date:** [December 1, 2020, 9:03pm UTC](https://discourse.processing.org/t/creating-a-grid-for-art/25874/1 "2020-12-01T21:03:50Z")

</div>

Hi, I’m trying to create grid that makes it so the rectangles that are created by my mouse clicks are lined up perfectly on either the x or y axis. This is all so I can make pixel art that’s consistent. This is what I have so far:

```auto
void setup() {
  size(500,400);
  background(0);
}

void draw() {
  if (mousePressed) {
    stroke(10);
    fill((255),(255),random(255));
    rect(mouseX, mouseY, 50, 50);
  }
}

```

---

<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:** [December 1, 2020, 10:14pm UTC](https://discourse.processing.org/t/creating-a-grid-for-art/25874/2 "2020-12-01T22:14:16Z")

</div>

I quote from the forum

MouseX and MouseY are linear values. You need some “scalar” values like:  
GridSize=100;  
MX= int(MouseX/GridSize)\*GridSize;  
// (MX IS NOW A MULTIPLE OF 100)

Then use MX instead of MouseX

same for y