# Functions Problem; Rows of squares

**URL:** <https://discourse.processing.org/t/functions-problem-rows-of-squares/7231>\
**Category:** Coding Questions\
**Created:** [January 5, 2019, 6:39pm UTC](https://discourse.processing.org/t/functions-problem-rows-of-squares/7231 "2019-01-05T18:39:51Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Umer1](https://avatars.discourse-cdn.com/v4/letter/u/5fc32e/32.png) [@Umer1](https://discourse.processing.org/u/Umer1)\
**Post date:** [January 5, 2019, 6:39pm UTC](https://discourse.processing.org/t/functions-problem-rows-of-squares/7231/1 "2019-01-05T18:39:51Z")

</div>

**Hi does anyone know how to do rows of squares using functions?**

**This is what I have so far:**

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

void draw()
{
   background(255);
   stroke(5);

   int x = 10;
   int y = 10;
   int w = 10;
   int h = 10;

   for (int i = 0; i < 12; i++)
   {
      fill(distance(int(random(150, 255)), int(random(0, 30)), 
      int(random(0, 30)), 0));
      rect(x,y,w,h);
      x=x+w; 
   }
}

```

---

<div class="post-metadata">

**Author:** ![Sky](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sky/32/3013_2.png) [@Sky](https://discourse.processing.org/u/Sky)\
**Post date:** [January 5, 2019, 6:47pm UTC](https://discourse.processing.org/t/functions-problem-rows-of-squares/7231/2 "2019-01-05T18:47:39Z")

</div>

I will take a look, but please, format your code with `</>`

---

<div class="post-metadata">

**Author:** ![Sky](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sky/32/3013_2.png) [@Sky](https://discourse.processing.org/u/Sky)\
**Post date:** [January 5, 2019, 6:52pm UTC](https://discourse.processing.org/t/functions-problem-rows-of-squares/7231/3 "2019-01-05T18:52:09Z")

</div>

![row](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b1cd3b536dd68d829bc12cd71450cf85db1b1e6a.png)  
You want to do something like this but with squares and not lines right?  
(just for the top row)

---

<div class="post-metadata">

**Author:** ![Umer1](https://avatars.discourse-cdn.com/v4/letter/u/5fc32e/32.png) [@Umer1](https://discourse.processing.org/u/Umer1)\
**Post date:** [January 5, 2019, 6:53pm UTC](https://discourse.processing.org/t/functions-problem-rows-of-squares/7231/4 "2019-01-05T18:53:53Z")

</div>

Yes, basically I am trying to do a pixel art. I just want to know how to do rows of squares in a function.

---

<div class="post-metadata">

**Author:** ![Sky](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sky/32/3013_2.png) [@Sky](https://discourse.processing.org/u/Sky)\
**Post date:** [January 5, 2019, 7:02pm UTC](https://discourse.processing.org/t/functions-problem-rows-of-squares/7231/5 "2019-01-05T19:02:58Z")

</div>

```auto
int width = 500;
int height = 500;
int square_widht = 25;

void setup(){
  size(500,500);
  //noStroke();
  strokeWeight(0.1);

}

void draw(){
for(int i = 0;i < width;i = i + square_widht ){
rect(i,0,square_widht,square_widht);
}
}

```

I dont understand for what you need rand() and dist equations,  
so I made this simple code that you can adapt to your code

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 6, 2019, 12:52am UTC](https://discourse.processing.org/t/functions-problem-rows-of-squares/7231/6 "2019-01-06T00:52:07Z")

</div>

@Sky give you a good start,  
but again, you use the word “pixel art”  
and want make random fill color for each rectangle  
( what leads to 60 times different color ( flickering ) per second

- unless you do it in setup
- or if do it in draw must switch to  
noLoop();
- or make a array for all rectangles with a memory of the color.

)

add i wanted to stay more close to your code but  
needed to

- move the variable declaration to top
- move constant settings into setup

also instead of one row you can easy do a complete grid with some math trick  
[https://processing.org/reference/modulo.html](https://processing.org/reference/modulo.html)  
[https://processing.org/reference/floor\_.html](https://processing.org/reference/floor_.html)

```auto
// https://discourse.processing.org/t/functions-problem-rows-of-squares/7231
int x = 10;
int y = 10;
int w = 10;
int h = 10;

int many = 144;
int grid = 12;

void setup() {
  size(500, 500);
  stroke(0, 0, 200); // border line blue
  strokeWeight(0.2); // border line width
  noLoop();
}

void draw() {
  background(255);
  for (int i = 0; i < many; i++) {
    fill(random(150, 255), random(150, 255), random(150, 255), 255);
// rect(x+i*w, y, w, h); // for one row only
    rect(x+(i%grid)*w, y+(floor(i/grid))*h, w, h); // for grid
  }
}

```

 ![2019-01-06_07-56-47_snap](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/83cb8595d8559fe4f1b80f295871b7d870ed01e9.png)

if you want to test about the ALPHA  
you could use a background image  
( like from the basic example “load display image” )

 ![2019-01-06_08-17-55_snap](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1ff157d06b27909132a6efd51d14ad7a811b2b42.png)