Member-only story
A gentle introduction to coding by making generative art
I’m going to walk you through creating your first piece of generative art — that’s art that’s made in whole or part by a self-governed system. Anyone can follow along with this tutorial, I won’t be assuming programming knowledge and we’ll be using an online editor to remove the need for any setup.
Since the earliest days of the computer, people have been using code to make art. The image above is one of the more famous examples, written in BASIC in the early 1980s.
This image is made by randomly drawing either a left-to-right line or a right-to-left line. When we do this in a grid you get the randomly generated maze-like patterns you see above. And each time the program is run the pattern is different. At the end of the tutorial, we’ll explore a couple of different variations we can apply once we have the basic pattern down.
We’re going to recreate this pattern in p5.js, a javascript library that makes programming more accessible for artists. Throughout the tutorial, I encourage you to both write out the code and try different things with it. Try changing the numbers around, try out different colours, see what happens when you change the order of things. Playing around with the code like this is a great way to learn!
Writing your first lines of code
Head over to editor.p5js.org, I encourage you to sign up as it will let you save your code and come back to it later, but if you’d rather not and don’t mind losing your work, you will be able to follow along with this tutorial without being logged in.
This is what you’ll see when you first open the editor. If you press the play button you’ll see a grey square shows up on the right-hand side. Try changing the numbers and see what happens. After you change something you’ll have to click the play button again to get the image on the right to update.
