Generative Art Tutorial

YOU are going to make a piece of generative art right now in 10 minutes. No watching tutorials, no downloading software. Just your browser and 21 lines of code. By the end you’ll have a basic, but fun abstract generative art collection like this. #generativeart

Before I start, I want to note that this approach builds upon a thread by @abwagmi that got me started in the space and I made sure he was ok with me doing a similar thread

Altho i’ve been a fan of generative art for years, I only started making it 3 months ago. The question I hear over and over is “how do I start?” It took me years and dozens of false starts before one thread finally pushed me over the edge. So I want to do the same here for you

Step 1. Open the p5js editor in your browser: editor.p5js.org This allows you to write code, click play, and see it immediately. Don’t worry about making an account or anything like that yet.

Let’s get familiar…

function setup() {
  createCanvas(400, 400);}

This tells the editor to create a frame that is 400 pixels wide and 400 pixels high.

Let’s make our first change, a little bit of hygiene. We’re going to add a line that tells the editor to only run the code once. Otherwise it will re-loop through the code infinitely. It should now look like this:

function setup() {
  createCanvas(400, 400);
  noLoop()
}

Let’s make another change here and tell the editor we want to use Hue-Saturation-Lightness for the color. I like this better than RGB because it feels more intuitive to me.

function setup() {
  createCanvas(400, 400);
  noLoop()
  colorMode(HSL)
}

Now let’s look at that next section of code. Replace 220 with “antiquewhite” and then click the play button. You now have a nice canvas-looking frame to play with.

function draw() {
  background('antiquewhite');
}

Now let’s draw! We’ll start with a line. We provide the x and y value of the first point and then the second. I’m saying “draw a line from 50 pixels to the right and 50 pixels down to 350 pixels, etc.

function draw() {
  background('antiquewhite');
  line(50,50,350,350)
}

Click play and you should be seeing this. You’ve done it. You’re talking to a computer.

Ok now let’s make this generative art, by editing your line to:

line(random(50, 350), random(50, 350), random(50, 350), random(50, 350));

Now we’re telling p5js: “Vary the x and y value of each point of the line by picking a random number between 50 and 350 each time.”

Think about how many variations there are of this alone. You’ve created your first mini collection. Now let’s embellish. Add this to your code, above the line() function:

strokeCap(SQUARE);
strokeWeight(25);
stroke(random(0, 50), random(0, 100), random(0, 100));

The first line makes sure the end of your line is square, not rounded The second line sets thickness to 25 pixels - chonky The third line says you want a random number between 0 and 50 or 0 and 100 for the Hue, Saturation, and Light - the color. Now click play a bunch.

Ok it’s time for the biggest upgrade we’ll make. One line doesn’t feel like enough. Let’s add a “while” loop which says “run this section of code X many times in a row.” To to do that you’ll want to place the 4 lines I mentioned above within the loop brackets, like this:

That says “make this line 5 times. And because we’ve added random(), each line will be different. Be a little careful here and make sure to only set loops = to a whole number or it will break, e.g., the code can’t run 5.2 times.

Ok one more hygiene item. Every time you click play, you lose the prior option…forever. Add this to the very very bottom of your code:

function mousePressed(){
  saveCanvas('outputSave', 'png')
}

Now you can save a pic by clicking the image.

You’re done…kind of. Play with the variables! Here’s a few things you might do: Change strokeWeight from 25 to strokeWeight(50) for even thicker lines. Or change loops to 25 to add more lines. You get the point.

Here's a variation from @CircolorsDAO @TrainTestToad .

Although I'm skeptical many people have come this far in the thread, show me your work in the comments! I’d love to see. I’ll also pick a bunch and give you a WL for my upcoming collection.

I’m going to continue to add to this thread over time - follow for updates - but here are some additional resources for those that want to keep going down the rabbit hole. Join us at @circolors for feedback and tips. See here for helpful code: p5js.org Reference Find easy explanations for every piece of p5.js code.

final code if helpful!

I love that this simple piece of code also represents so many different people who have helped me learn. To name a few... saveCanvas from @pixelwank Cleaner code (lol) from @TrainTestToad strokeCap from a random @shiffman video I believe

I also tagged the wrong account above. it's @CircolorsDAO for our discord

As simple as it is, the outputs really aren't too bad. Kind of elegant.