---
title: "Blocks · generative art"
description: "Loop inside a Loop. Generative art plate #13 by Theodore Vorillas, drawn live in your browser from its code."
url: "https://vorillaz.com/lab/blocks"
---

![](https://vorillaz.com/_astro/blocks.Bfvb7Swb_SKoU.webp)

fig. #13 · rendered live in your browser from the code below

# #13 blocks

Loop inside a Loop.

- date

  2020.01.13

- tags

  generative-art · javascript

- fork

  [codepen ↗](https://codepen.io/TheodoreVorillas/pen/PowaBJB)

Using blocks on a nested grid we can recreate generative patters as symbols, each block is divided into symmetrical unique subsections with binary coloring. P5 is used for rendering and updates on the canvas. Besides calculating the distance between the elements, the whole project was born using a nested loop. Finally, we can evolve this project recreating a set of generated glyphs.

## The algorithm

```javascript
const draw = () => {
  let xx, yy;
  cells.forEach((cell, i) => {
    cell.forEach((c, j) => {
      xx = getNextX(i,j);
      yy = getNextY(i,j);

      beginShape();
      fill('#191919');

      rect(xx, yy, cellWidth, cellWidth);
      endShape();
    });
  });
};
```

## References

- [Generative Logo Design](https://components.ai/notes/logo)