Grid explorations in generative art

Exploring ideas in a 40x40 point grid layout.

I wanted to see what I could create using a basic 40x40 point grid. Exploring a single theme with more depth helps me get closure on the idea.

Rules I set for these explorations,

• Must use a 40x40 point grid.
• Black and White
• No references

TLDR: Here’s a video of a tool I’ve made to explore more such ideas

Here’s a tool you can use to do your own explorations — https://karanmhatre.com/grid-explorer

Setting up the initial layout

I used PAPER.JS for these explorations. I started by dividing the canvas neatly into a 40x40 points grid.

I use this starter pack that I’ve created. It has a basic setup to get started.

My basic 40x40 grid is ready.

I printed the count at each time to confirm that there were 1600 cells

And replace the count with dots, and we’re ready to create.

Explorations in Size

Radius of the circles is (0.05 * xCount)

Radius is (xCount+yCount)*0.05

Radius is Math.sin(xCount)*2

Math.sin(xCount+yCount)*6

Math.sin(xCount*yCount)*10

Math.sin(xCount + ( yCount*2))*10

Explorations in stroke

Using Stroke instead of Fill.

Stroke 2

Stroke 5

Radius 10, stroke 2

Radius 80, stroke 1

Stroke Dashed 10,2 with stroke width 5

Explorations in Shape

What if it wasn’t just circles?

If (xCount+yCount) divisible by 3, then place a diamond, else a circle.

Stars

Size and Shapes

Animations

Radius is (time)

Radius is Math.sin(Time)

Time * (xCount+yCount)

Radius is (Math.sin(time*3 + (xCount*600))*4) — There’s some encoding glitch

Character Codes instead of circles

Math.tan(xCount+time)

You can find more generative art pieces on my website.

Do try these,

Math.sin(time+x/20)*4

Math.sin(time*x*y*0.02)*5

Math.sin(time+(x+y)*2)*20