Introduction to Generative Tools

Objectives and Overview

Lesson Objectives

---

Introduction to Generative Tools

At some point, you may determine that you want to create a system in your code to generate new behaviors while the sketch runs. There are certain techniques and tools that you can use to start creating these systems. These can be basic, such as randomly adding values to x and y coordinates, or these can be complex recreations of natural systems.

One foundational concept in programming is working with algorithms. An algorithm is a process or system of rules that a computer follows. With regard to p5 and creative programming, an algorithm could be a set of rules or mathematic transformations that you include in your code that introduces certain behavior. Often in creative programming, algorithms are used as a generative tool to create new art when a sketch is running. For example, introducing random values is a great way to create a simple rule that generates new aspects in a sketch. This lesson will examine how you can start integrating randomness into sketches to produce interesting results.

Integrating Randomness

Integrating randomness is a useful generative tool that can add some complexity and surprise to your sketch. P5 has a built-in random() function that you can use to generate random values that can then be used in a variety of ways. One quick way to show this is to use random() to create a randomized x-coordinate for an ellipse:

function setup() { 
  createCanvas(400, 400);
} 
 
function draw() { 
  background(255);
  noStroke();
  fill(255, 0, 100);
  let randX = random(50, 350);
  ellipse(randX, height/2, 50, 50);
}
Code language: JavaScript (javascript)

The result is an ellipse with randomly generated x-positions along a constant y-position of height/2 (the center of the canvas). Here is a GIF of this sketch:

The random() function receives parameters that set the minimum and maximum values in a range and then return a number from that range. Since random() returns a number the returned value can be stored in a variable.

In the above example, random(50, 350) selects a number in that range and then stores it in the randX variable. If you were to only enter a single parameter such as random(400), the number would be from 0 to 400. Understanding how to control the range of numbers input into random is a helpful way to structure the random values being produced.

Let’s now modify this even further and use randomness for both the x-position and y-positions of the ellipse:

function setup() { 
  createCanvas(400, 400);
} 
 
function draw() { 
  background(255);
  noStroke();
  fill(255, 0, 100);
  let randX = random(50, 350);
  let randY = random(50, 350);
  ellipse(randX, randY, 50, 50);
 }
Code language: JavaScript (javascript)

The above code produces the following sketch:

This is a basic demonstration of how you can start integrating randomness into your sketches. Once you understand how to use random() you should start testing it out in other parameters that take numerical inputs as parameters. For example, you can use random() to create a random color generator by passing random values into fill().

Activity: Random Dots

This activity is inspired by Daniel Shiffman’s Coding Train series. You’ll be using random to create a dot painting! This lesson will get you started with some basic boilerplate code, but you should use this opportunity to experiment with using randomness to create a sketch. This sketch uses randomness to generate a range of fills, transparency, and x and y coordinates of each dots. Here’s what it looks like as it runs:

The dots will continue to generate as the sketch runs. Here’s what the sketch looks like after several minutes:

The idea behind this is that there is a system created in the code that is responsible for the generation of these dots. In this sense, this is using randomness as a tool to generate an evolving piece of art. Let’s take a look at the code!

Code Example

The above sketch uses random() to generate several sets of values. The x and y position of the dots and the rgb and alpha values of the fill change each time through draw(), resulting in several slightly different dots drawn over time. Here’s the code for this example:

//inspired by a Daniel Shiffman sketch/tutorial

function setup() { 
  createCanvas(400, 400);
  background(100); //background only drawn 1 time, so dots stay
} 
 
function draw() { 
  //generate the random x and y coordinates of each dot
  let xRand = random(20, 380); //offset by size of dot
  let yRand = random(20, 380); //offset by size of dot
 
  //generate the random fill values
  let rRand = random(0, 255);
  let gRand = random(0, 50);
  let bRand = random(100, 255);
  let alphRand = random(75, 100); //alpha value is transparency
  
  //draw the dots
  noStroke();
  fill(rRand, gRand, bRand, alphRand); //last optional value is alpha
  ellipse(xRand, yRand, 20, 20);
}
Code language: JavaScript (javascript)

This sketch makes use of parameters passed into random() to control the results. Notice the restrictions set on the red, green, and blue values generated. This is to control the color of the dots. There is also another value: alpha. This is an optional fourth parameter for fill and it changes the transparency of the ellipse.

Experiment with changing some of these values and see what you come up with!

Bringing It All Together

One of the best ways to discover the strengths of randomness is to experiment. Use the above example as a starting point for your own explorations. Randomness is one of several tools that you can use to generate new art. This is also a very basic example of an algorithm. You’ve provided a very specific set of processes that your program is following as it generates variations of itself. Think of each frame as a unique variation of your sketch. You could even start taking screenshots at certain points to track the difference over time!

Have fun and start exploring!