Creating a Generative Art Grid with Code

Imagine creating colorful, dynamic artwork without picking up a paintbrush — just using lines of code. In this story, we’ll dive into a simple yet fascinating program that generates unique, vibrant art grids. Whether you’re a coding beginner or just curious about creative coding, this journey will give you a peek into the magic of generative art.

We’ll break down the code step by step, explain how it works, and show how it creates patterns that seem to have their own personality. Let’s get started!

Setting the Scene

Generative art is art made with the help of algorithms. Instead of painting each stroke by hand, you write instructions, and the computer does the work. This program uses a programming language called p5.js, which is great for creating visuals.

Here’s what the program does:

• Divides the canvas into a grid of cells.
• Fills each cell with a colorful, randomly rotated shape.
• Lets you save the art as a JPG file.

Now, let’s look at how each part of the code works.

The Setup

First, we set up the canvas and prepare everything we need for the art.

let grid;
let cols, rows;
let cellSize = 30;
let…