Generative Art Tutorial.
Hi folks,
Welcome to the world of generative art! If you are interested in a gentle introduction to nonlinear dynamics, then read our first 2 sections. If you are here only for the code needed for our event, check out the last section!
Table of Content
What is generative art?
Today, in preparation for our first virtual event, we’re talking about generative art: an art practice in which the artist sets in motion a process that creates artwork on its own. The process could be anything -- it could use a computer, a machine, a set of rules for natural language -- even a mathematical equation. In short, we’re going to be making art with math!
Generative art is one way we can explore the beauty of our field and share it with others. We’ll be relying on the properties of strange attractors to show how very simple systems can produce incredibly intricate dynamics. In the examples below, everything you see is determined by equations; in this way, generative art directly reflects the beauty of mathematics.
So, what is an attractor, anyway?
Imagine a valley. If you let go of a ball from the top of the valley, one can guess with almost certainty that the ball will roll down the hill and settle at the bottom. We say this is an attractor, as the ball, when slightly out of equilibrium (the top of the hill), is “attracted” to the bottom of the valley.
In the field called Nonlinear Dynamics, we’re often interested in the evolution of a system. Particularly, we look at how repeated applications of a function (i.e. a set of instructions) affect a system, given some starting position called an initial condition.
Some simple examples
Let’s think about a function f which advances a clock by 5 minutes. Suppose the initial time is 12:30. Then, the first application gives f ( 12:30 ) = 12:35, the second is f ( f ( ( 12:30 ) ) = f ( 12:35 ) = 12:40, and so on. An important question mathematicians ask is,
“What are all the possible outcomes when f is repeatedly applied to the initial condition 12:30 ?”
That is, if we keep applying f to 12:30, what are all the times we could possibly get?
Can we get 13:00? What about 13:01? Could we go back to get 11:30?
One can see that we can simply apply the function f 6 times to get 13:00, but we can never get 13:01. Furthermore, we note that our function is eventually periodic, that is we can get to 12:30 again after a fixed number of applications. Since each day has only 24 hours, and each hour has 60 minutes, the time will repeat after 12 x 24 = 288 applications.
Let’s look at another example. This demonstration can be done using any calculator with a cos button. All we will do is repeatedly apply to any number, say x = 24. We call the first number we choose the initial condition and all the possible outputs the trajectory. It will also be useful to introduce the notation
which means f applied n times to x. If we keep hitting the cos button, we get the following:
Notice that as we keep applying cos, we get closer and closer to a number around 0.73. This number is called Dottie’s number and it has the numerical value ~0.739085. If we look at the numbers in the trajectory, it looks like they are being attracted towards Dottie’s number with each application of cos. We say that Dottie’s number is an attractor for the function cos. Interestingly, the namesake of Dottie’s number was a French professor, who first noticed that repeatedly pressing on her calculator kept giving her a number approaching 0.73. She showed her husband, a mathematician, who wrote a paper on the number and gave it her name.
These were two simple examples, but we can play this game for whatever functions and initial conditions we want, which can lead to some interesting dynamics – particularly in the case of a strange attractor. A strange attractor has fractal structure, which means it’s self-repeating: if you keep zooming in more and more, you’ll see the same structure repeating. They often result from systems that exhibit chaos. Things start to get fun when we use points in a plane and functions with 2-dimensional attractors. In 2D, we can represent locations as a pair of numbers ( x , y ) where x is the coordinate along the horizontal axis and y is the coordinate along the vertical axis.
Clifford’s Function
Clifford’s function is defined by:
C ( x , y ) = ( sin( a y ) + c . cos( a x ), sin( b x ) + d . cos( b y ) )
for numbers a, b, c, d, called parameters.
If we apply Clifford’s function to any point in the plane over and over again, we’ll find that we never leave a certain subset of the plane (i.e. an area contained in the whole plane). This subset is said to be an attractor if
( x , y ) is in the subset, then C ( x , y ) will also be in the subset.
By changing the parameters, we can get different attractors. Here are just a few examples of the wide range of behaviours we can see:
At our first virtual event, on Thursday, January 27 at 6:00 pm (EST), we’ll be exploring how to use strange attractors to make generative art. We hope to see you there!
Read on for a quick tutorial and everything you’ll need to know to get set up for the workshop.
Drawing your own attractor
To make the pictures above, we needed to apply the Clifford function tens of thousands of times. Since all points in the attractor stay in the attractor, we can map it out by drawing each point in the trajectory.
You can use any function or system of equations, and any coding language to do this. We’re going to use the Clifford function and the sketchbook software Processing. It’s a graphics library created to introduce artists to programming. It’s free and fast to download, or you can follow along using the in-browser interpreter.
In Processing, the pixel in the top left corner of the screen is the coordinate ( 0 , 0 ) and the y-axis extends downwards.
Our first step is to set up the environment by typing: void setup() {}
Everything inside the curly brackets will be run once the program is started (by pressing the “play” button at the top). Using the size(width, height) command, we can set the dimensions of our window, and we can type background(0)to make the background black. The background()command can take grayscale values from black (0) to white (255). Together, it should look like this:
void setup(){
size(700, 700);
background(0);
}
Next, we define the parameters we will use when calculating Clifford’s function:
void setup(){
size(700, 700);
background(0);
float a=1, b=2, c=3, d=4;
}
To draw the attractor, we’ll calculate the points in the trajectory one by one and draw them before moving on to the next one. First, we’ll use the function random(a,b) to generate a random decimal number between -10 and 10. Let’s generate two random numbers to act as the x and y value of our initial point:
float xOld = random(-10,10);
float yOld = random(-10,10);
Then we’ll use a “for loop” to iterate through the first 100,000 points in the trajectory and draw it using the stroke(grayscale,alpha) and point(x,y) commands.
for (int i=1; i<100000;i++){
//Apply the Clifford function to the previous coordinate
float xNew = sin(a*yOld) + c*cos(a*xOld);
float yNew = sin(b*xOld)+d*cos(b*yOld);
//Make the color white and partially see through
stroke(255,20);
//Draw the point
point(map(xNew, -10, 10, 0, width), map(yNew, -10, 10, 0, height));
//Put the value of the new point in the xOld and yOld variables
xOld = xNew;
yOld = yNew;
//Repeat
}
The map() function stretches the interval [ -10 , 10 ] to [ 0 , width ] so that the point is fitted to our window. width and height are built-in variables that contain the width and height of your window.
Altogether, your code should look like this.
Complete Code
void setup(){
size(700, 700);
background(0);
float a=1, b=2, c=3, d=4;
float xOld = random(-10,10);
float yOld = random(-10,10);
for (int i=1; i<100000;i++){
float xNew = sin(a*yOld) + c*cos(a*xOld);
float yNew = sin(b*xOld)+d*cos(b*yOld);
stroke(255,20);
point(map(xNew, -10, 10, 0, width), map(yNew, -10, 10, 0, height));
xOld = xNew;
yOld = yNew;
}}
You can copy and paste it directly into Processing to make your first image. When you press “play”, you should see a window pop up with the attractor you’ve generated. You can play around with the parameter values and number of iterations you consider to see how the structure changes.
To create your own unique piece of art, you can change the parameters a , b , c , d. You can also try different systems, such as Lorenz and Rossler’s systems. Feel free to download this code to get started. There are lots of ways to make the art your own, including adding colour or specific shapes to your plots, which we will get into more at our event next Thursday. We really hope to see you there!
by Alex Busch, Jacqueline Doan, Lucas MacQuarrie, and Sophie Wu.
all generative art by Lucas MacQuarrie.