Generative Art with p5.js: Program Your Own Art

Art by yours truly + the computer.

Scenario: you need some art. Maybe you need a new computer background, maybe you need a classy print for your new apartment, maybe you need a new banner for your LinkedIn page. You need art, and you need it fast.

The solution? Create your own art! You can create the pastel bubbles above with a JavaScript graphics library, p5.js, in less than 10 lines of code!

Let’s make generative art

Generative art is art produced by a computer program. My pastel bubbles on are the result of generative art, and anyone can program their own art as well.

First, let’s set up our coding environment. Head over to the p5.js editor, and set up an account if you want to save your work.

When you first open the editor, you’ll see this starter code:

function setup() {
  createCanvas(400, 400);
}
function draw() {
  background(220);
}

The code we write inside the setup function will run once, and the code we write inside the draw function will run repeatedly, in an infinite loop, after that.

We’ll only be working inside setup, so delete the draw function and everything inside it. You really don’t want the background coded in there, as it will be paint over all the art we’ll put in setup.

You should be left with:

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

This code creates a 400x400 canvas (measured in pixels, which is basically a dot on the screen). I want a bigger canvas, so I’m going to tell the computer to draw art inside the entire window. Specifically, my canvas will be windowWidth x windowHeight.

Update your setup function to make the canvas fill the whole window:

function setup() {
  createCanvas(windowWidth, windowHeight);
}

Now, I’m going to fill the canvas with a bunch of randomly-colored, randomly-placed, randomly-sized circles!

An efficient way to draw 1000 circles

In computer science, if you want some code to run over and over again, you often put it in a loop. We can use a type of loop called a for loop to make some code run a specific number of times.

To draw 1000 circles, let’s write a loop that runs 1000 times. Add this code to your setup function:

for (let i = 0; i < 1000; i++) {
}

Basically, we are going to use a variable i to count from 0 to 1000.

Inside the for loop, we will write code to draw a circle with a random color, random position, and random size.

Randomness: the hallmark of generative art

In p5.js, you can generate a random number between 0 and x with the random function: random(x).

We’ll use this function to generate random colors, positions, and sizes for our circle.

First, let’s generate a random color. Computers use the RGB color model, where colors are produced by combining different amounts of red, green, and blue on a scale from 0–255.

Therefore, we can produce a random color by mixing random amounts of red, green, and blue like so:

random(255), random(255), random(255)

If you add in a fourth random(255), this will add transparency to the color on a scale from 0 (totally transparent) to 255 (totally opaque).

Let’s update our for loop to use p5.js’s fill function to set our random color for each circle.

fill takes in red, green, blue, and transparency values between 0 and 255.

for (let i = 0; i < 1000; i++) {
    fill(random(255), random(255), random(255), random(255));
}

So far, this for loop draws nothing. But we can use p5.js’s ellipse function to actually draw the circle!

ellipse takes in the circle’s x-position, y-position, and size. We’ll generate these randomly. Update your for loop to draw an ellipse after setting the color:

for (let i = 0; i < 1000; i++) {
    fill(random(255), random(255), random(255), random(255));
    ellipse(random(windowWidth), random(windowHeight), random(100));
}

This code should now draw 1000 random circles!

Testing your code

Try running your code by pressing the pink “play” button in the upper left hand corner!

Click on the pink button with the triangle!

Do you get beautiful rainbow bubbles?

If you don’t like the black outline on the bubbles, feel free to hit return after line 2 and write a line that says noStroke(); to remove the outlines.

Final code (just 8 lines!):

function setup() {
  createCanvas(windowWidth, windowHeight);
  noStroke();
  for (let i = 0; i < 1000; i++) {
    fill(random(255), random(255), random(255), random(255));
    ellipse(random(windowWidth), random(windowHeight), random(100)); 
  }
}

If you’re satisfied with your art as is, you can adjust the size of your screen, run your code again, and screenshot the canvas for your social media cover art (or apartment art).

Tinkering with your code

If you want to tweak the art, you can customize it primarily by adjusting the number ranges for randomness. Try adjusting…

• The size of the circles
• The ranges for the red, green, and blue color values. What happens if you leave the “red” and “blue” values at random(255) but turn down the “green” value (the second one) to 0?
• The transparency value
• The number of times the for loop runs

Pro tip: remember that when you generate a random number between 0 (min) and x (max), saying random(x) is really the same as saying random(x) + 0.

So if you want your minimum value to be above 0, you can add it to the random expression. But you’ll have to update x to represent the range of values instead of the maximum value.

For example, if you want to generate a value between 25 and 100, the range of values is 75. So you will generate random(75) but add 25 to get values between 25 and 100. The expression in your code would be random(75) + 25.

Did you create amazing art? Share it below!