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
I am probably doing everything wrong so your feedback would be helpful.
Hi,
you’re drawing way too much squares, and actually your issue comes from the following error :
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 :
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 :
for (let i = 0 ; i < width ; i += scl){}