# Responsive grid

**URL:** https://discourse.processing.org/t/responsive-grid/29507
**Category:** Coding Questions
**Created:** [April 20, 2021, 12:44am UTC](https://discourse.processing.org/t/responsive-grid/29507 "2021-04-20T00:44:41Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![henryM](https://avatars.discourse-cdn.com/v4/letter/h/7ab992/32.png) [@henryM](https://discourse.processing.org/u/henryM)
#### Post date: [April 20, 2021, 12:44am UTC](https://discourse.processing.org/t/responsive-grid/29507/1 "2021-04-20T00:44:41Z")

</div>

I am making a small little testing thing I am trying to make it so when the mouse is over it turns a different color here is the code.

[https://editor.p5js.org/Henhog1234/sketches/ehfcx4O9f](https://editor.p5js.org/Henhog1234/sketches/ehfcx4O9f)

https://editor.p5js.org/Henhog1234/embed/ehfcx4O9f

I am probably doing everything wrong so your feedback would be helpful.

---

<div class="post-metadata">

### Author: ![Pr0tonX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pr0tonx/32/2590_2.png) [@Pr0tonX](https://discourse.processing.org/u/Pr0tonX)
#### Post date: [April 20, 2021, 8:04am UTC](https://discourse.processing.org/t/responsive-grid/29507/2 "2021-04-20T08:04:33Z")

</div>

Hi,  
you’re drawing way too much squares, and actually your issue comes from the following error :

```auto
for (var y = 0; y < height; y++)

```

So for a canvas of 100px height, your will execute the code inside your `for` loop 100 times. Then it means that you draw a lot of squares outside of the canvas (`rect(x * scl, y * scl, scl , scl)`  
Moreover, it means that the `x` and `y` values are not the position of your squares, in your condition :

```auto
if (x < mouseX && x + scl > mouseX && y < mouseY && y + scl > mouseY)

```

So you should multiply x and y also by `scl ` here.

Another way would be to increment your iterators (x and y) by the size of your squares :

```auto
for (let i = 0 ; i < width ; i += scl){}

```