Getting Started with Generative Art

First off, what the hell is generative art?

Generative art differs from traditional art in that the decisions in the creative process are made through a set of rules (algorithm) and randomness (either introduced by behavior or some unpredictable input like weather data or random integer generation).

In Javascript we would generate a random number like (and you can read about how to seed and the value of seeding the random value here):

Math.random() // returns a pseudorandom value between 0 and less than 1
Math.floor(Math.random() * (max - min + 1) + min) // returns a value between min and max both inclusive

I recently started taking Creative Coding with Canvas & WebGL taught by Matt DesLauriers on Frontend Masters and I was introduced to the world of generative art. All of the images below were generated by code.

One of the fun exercises the course introduced was making a Sol Lewitt style art based on a prompt. You may have seen Sol Lewitt art at your local modern art museum.

Sol LeWitt’s *Wall Drawing 273* at SF MOMA (I got to see this live, but I forgot to take a picture when I went). Check out Megan Coyle’s website!

The beauty of generative art and particularly Sol LeWitt’s work is that the same set of instructions can result in a myriad of pieces depending on how the instructions are interpreted or the randomness we use. Apparently Sol LeWitt never actually created his art pieces himself, he simply gave instructions to others and depending on how they interpreted said instructions no two art pieces would be the same.

You can explore JavaScript solutions for some of these here: https://solvingsol.com/

In the course we are asked to implement something similar with the following instructions:

*Generative Wall Drawing #2 – Sol Exercise*
*1. Using a 6×6 grid of evenly spaced points*
*2. Connect two random points on the grid forming a trapezoid with two parallel*
*sides extending down*
*3. Fill the trapezoid with a color, then stroke with the background color*
*4. Find another two random points and repeat continuing until all grid points*
*are exhausted*
*5. Layer shapes by the average Y position of their two grid points*

I struggled initially because I was new to the Canvas API but using MDN documentation I was able to make some progress. Also, that is not to say that my stumbling did not yield pleasing results:

I highly recommend anyone who has some experience with basic JavaScript to try it. It’s a lot of fun!

And here is my final results:

If I were to re-run the code, new and unique and pleasing images would be generated. This is the beauty of Generative Art.

Finally, to anyone unsure about trying something like this, just do it! Was it easy? Maybe for some people, but for me the main struggle was not realizing my blind spots. I misinterpreted the ease in which the material was being presented, with me having the foundational knowledge to do it on my own. This is often what happens when we learn a new technical skill, we overestimate our ability based on guided learning when the real learning happens when we struggle on our own. I took a step back and reviewed documentation on Canvas and how drawing worked. This enabled me to move forward and finally get the right shape for the Sol exercise.

If you’re curious to see my progression on this exercise, you can check out my repo: gen_art101

I will continue the course when I have the time and I hope that whoever is reading this feels inspired to try using code for art or try a Sol LeWitt prompt on a wall mural or traditional art piece!

Happy coding, happy living!
Melisa