My first fx(text) article was a beginner's guide to fxhash for existing p5.js users. I will take a step back now for readers who are either collectors or artists and are keen to get started on learning generative art using p5.js. This won't be step-by-step tutorial, but more of a guide with links to best resources, and tips on how you can approach learning depending on your technical/non-technical background.&#x20;

I started on my generative art journey last year and I feel I am still scratching the surface with so much still to learn. It can get overwhelming, hence my intention here is to share some learnings based on my experience that will hopefully help someone starting out.

# Resource #1:'Generative Design' book

My 1st step to start learning was buying the ['Generative Design' book](http://www.generative-gestaltung.de/2/) by Benedikt Gross, Hartmut Bohnacker, Julia Laub & Claudius Lazzeroni. It starts right from the basics and is used full of examples to get you started. While some context of JavaScript will definitely be useful, it's not a must & you can start building understanding of JS, HTML & CSS while you are learning p5.js.

What I like about this book is that it teaches based on practical examples, and the best way to learn p5.js is to start sketching in the [web editor](https://editor.p5js.org/) based on these examples and then changing variable values and modifying steps to start implementing your own ideas.

All examples covered in the book are also available on the [book's website](http://www.generative-gestaltung.de/2/) that you can open and run on the web editor:

![](ipfs://QmUsYFR3Dm585yCbfZH4FBfmZyfEgECFxF5CkFpnDdHZ99)

If you are an artist with no programming experience, I would recommend some basic programming course (like the one below) to familiarize yourself with concepts like variables, loops etc. before starting on the 'Generative Design' book.

::embed-media[]{href="https://www.youtube.com/watch?v=zOjov-2OZ0E"}

# Resource #2: Coding train !

If your preferred way of learning is through videos, highly recommend that you start learning using the [Coding train tutorials](https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA) by Daniel Shiffman. While the videos have a link to the final codes, my recommendation will be to **write the code yourself as you watch the videos**, rather than copy-pasting. That will help you become comfortable with the syntax over time and also encourage you to experiment more with variables and methods being taught in the videos.

The videos cover the basics (drawing shapes, colouring, variables, loops, random() function etc.) as well relatively more advanced techniques (Cellular automata, flow fields etc.)&#x20;

::embed-media[]{href="https://www.youtube.com/watch?v=HerCR8bw_GE&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA"}

# Resource #3: Blogs by generative artists

There are number of generative artists who share tutorials/essays on certain techniques that I really rely on when learning a specific technique. For example, Mathias Isaksen's tutorial on domain warping was the starting point that led to creation of ['Sketch Book'](https://www.fxhash.xyz/generative/20326), my latest fxhash collection.&#x20;

The essays by Tyler Hobbs are really useful as well, as he does not share the actual code, but only shares the thought process and the pseudo code to implement those ideas. I prefer those kind of tutorials as it challenges the learner to implement the code based on the technique explained and encourages creativity in applying those techniques in ways different from how those artists have already used.&#x20;

I am sharing the blogs by artists that I follow. Let me know if I missed any good ones and I can add it in:

-   Tyler Hobbs: <https://tylerxhobbs.com/essays>
-   Ahmad Moussa || Gorilla Sun : <https://gorillasun.de/posts/>
-   Hevey: <https://www.fxhash.xyz/u/Hevey/articles>
-   Matt Perkins: <http://blog.mattperkins.me/category/generative/>
-   Mathias Isaksen: <https://st4yho.me/blog/>

There are also a couple of catalogs of resources that I follow. I will recommend going through these only after you have learnt the basics through the above resources.

-   [That Creative Code Page](https://www.notion.so/That-Creative-Code-Page-c5550ef2f7574126bdc77b09ed76651b), by Taru Muhonen & Raphaël de Courville
-   [Awesome Creative Coding](https://github.com/terkelg/awesome-creative-coding) repository by Terkel

***

# Tip #1: Start small and give yourself time

If you go through the catalog of creative coding techniques I shared above, it can be really overwhelming for a beginner ! While these techniques are an important component of the artwork you create, there is a lot more that goes into creating good art: the concept, the composition, how you use negative space, how shapes interact, color palettes etc.

And if you are an artist from another medium (painting, digital art etc.), you will already have those key skills needed to be a good generative artist. Hence, one way to go about it for non-coders is to:

-   First learn by creating shapes (points, lines, circles, rectangles etc. first and then Bezier curves and other custom shapes)
-   Then learn looping functions (to create lot of them), random() function to incorporate randomness in your compositions, and blendMode() function to blend overlapping shapes
-   Conduct multiple experiments on the above 2 steps before learning more advanced techniques and data handling for complex artworks

To demonstrate how easy p5.js syntax is to draw shapes, for the below sketch, all we are doing is defining the 'fill' colour for 2 triangles we are creating on the canvas, and then drawing the 2 triangles by inputting the 3 vertices of the triangle:

```js
  background(color('#d9532d'));  //setting the background as red
  fill(color("#008795"));  //setting color to fill next shape as green
  triangle(-0.2*width, height, 0.4*width, 0.4*height, 0.75*width , height); //drawing 1st triangle, 6 inputs signify (x,y) location of triangle vertices 
  fill(color("#006171")); //setting color of 2nd triangle as darker shade of green
  triangle( 0.4*width, 0.4*height, 0.75*width , height,1.3*width,height); //drawing the 2nd triangle
```

![](ipfs://QmRMDB7JakpKpTCf3KMGyeiqHJoxwocCzShubWoXczxG7y)

# Tip #2: Understand the fundamentals & experiment

As you learn more techniques (like circle packing, subdivision, noise fields etc.), it might be tempting to just use one component of code from a tutorial and build your ideas over it. While that is totally fine, you might end up with an artwork that is very similar to what other artists have already done.&#x20;

Hence, I feel it's really important to understand the fundamentals of how the logic works and what role each variable and component is playing in the final output. Once you are able to do that, it will naturally lead to a lot of experimentation where you would play around with parameters and logic to create something interesting & unique.

# Tip #3: There is no one way to learn

**Coder vs non-coder:** The learning path would be different if you are a coder vs a non-coder artist. If you are technically sound, you might be able to pick up the techniques quite easily, but your learning curve on generating aesthetically pleasing artwork might be steeper. On the other hand, if you are an artist in another medium, you will have a steeper learning curve technically to implement the ideas that you might already have.

**Theory vs practice:** Some people prefer to follow a very structured learning path, and it might make sense for them to complete the book and the p5.js Coding Train playlist before moving onto creating more complex artworks. However, if you are impatient (like me !), you might just cover off the basics from the book, and then start exploring techniques that you find aesthetically pleasing or ones that fit in well with ideas that you already have.

***

To summarize, there is no 'One size fits all' in learning generative art and the aim of this article is to share resources and certain tips on how to approach it based on your background. Hope it helps.

Happy learning !


This guide provides a learning pathway for coders and non-coders who are interested in creating generative art. 

Beginner's guide to learning p5.js for generative art

Written by

Editions

Share

Details

stay ahead with our newsletter