Intro to generative art

Every year I force myself to learn something new and interesting. This next year I will focus on Generative Art, as much as I can. Last time I focused on learning Photography. The year before that, I believe it was when I learned Go-lang, etc. I have no plans for the future, but who knows, maybe next year I’ll start making music or something?

It’s so uncomfortable to start doing something that I don’t know anything about!
I feel so clumsy and slow anytime I try to do anything, it takes ages just to draw a simple shape!
But what I love is to see my progress week by week and it’s immensely satisfying. Because I know that I started from total begginer and I can feel I’m becoming better in time.

Anyway, the generative passion started just before I ordered an AxiDraw MiniKit, a precision pen plotter from The Evil Mad Scientist.

It took some time to arrive, so in preparation for the AxiDraw plotter, I started to learn how to use it and I went deeper and deeper down the rabbit hole.
I followed the tutorials from Generative Artistry and I listened to their 6 podcast episodes. I watched tutorials about Paper.js and the Story of Paper.js: On the Nuts and Bolts of Building a Vector Graphics Library in JavaScript. I checked each and every tutorial and example from P5.js.
I checked a ton of examples from TurtleToy.
And many many others.

This weekend I subscribed to Skillshare and I watched Hadeel Alharthi’s class: Intro to Generative Art.

At the end of the class, the assignment was to build a grid-based generative art piece. You can see my work below.
I have to mention this is not my first generative project ever. I followed other tutorials and hacked other people’s work in the last weeks, but this is actually the first time I’m creating something of my own.

These are the rules I thought would make a nice composition:

  • all the items are drawn in a grid, of course
  • draw circles in the middle, with some random jitter, or, draw diamonds
  • the circles have bright colors and are filled, the diamonds only have strokes
  • there’s a 2% chance for a diamond to be filled, instead of stroked
  • the circles have a small, or a large circle in the middle, either filled, or empty
  • the diamonds have a small diamond inside, either filled, or empty; there’s a small chance for some diamonds to not contain another diamond;

Hit the “Regenerate” button as many times as you want :D


I noticed the drawing is not very mobile friendly. That’s because I hard-coded half of the sizes to align them to pixel precision, just the way I want.
To align every shape to perfection at any screen size, would require a much bigger effort, but I’m not going to make that effort now.

🏷 @notes #generative #procedural #art