An intro to Procedural Art and programming art
The precursor of computer art dates back to 1956–1958
Desmond Paul Henry, Drawing Machine, 1960
Henry invented the Henry Drawing Machine in 1960
Most artists working with computers were engineers and scientists because computers were generally in scientific research labs.
Bell Labs was an early supporter of artists experimenting and working with technology. These include Claude Shannon, Ken Knowlton, Leon Harmon, Lillian Schwartz, Charles Csuri, A. Michael Noll, Edward Zajec, and Billy Klüver, an engineer who also collaborated with Robert Rauschenberg to form Experiments in Art and Technology (EAT) at the Los Angeles County Museum of Art.
Bell Labs supported artists to work with their computers after hours. They supported ‘9 Evenings: Theatre and Engineering’ organised by EAT in 1966. 10 contemporary artists worked with engineers and scientists from Bell Labs to host performances using new technology.
Michael Noll was invited to work at Bell Telephone Laboratories in New Jersey in 1962. He attempted to imitate paints by Piet Mondrian, Bridget Riley and others.
Mondrian
Noll
Noll
Early computers did not necessarily have displays. One common output was a plotter, which used vector coordinates to direct a drawing pen.
Frieder Nake, ‘Hommage à Paul Klee 13/9/65 Nr.2’, 1965. Victoria and Albert Museum.
Lillian Schwartz working at Bell Labs
early work by Lillian Schwartz
Manfred
In 1968, the Institute of Contemporary Arts (ICA) in London hosted one of the most influential early exhibitions of computer art called Cybernetic Serendipity. The exhibition included many of whom often regarded as the first digital artists, Nam June Paik, Frieder Nake, Leslie Mezei, Georg Nees, A. Michael Noll, John Whitney, and Charles Csuri.
In the 1980s computers came into the home. Artists began having access to graphical systems.
Tools
Warhol
Warhol’s computer art
AARON
Reas
Reas
With the rise of the internet in the 90s and hyper-growth in the 2000s and 2010s there has been a rise of internet art or projects that live online.
We’ll cover some of that expansive history later in the semester.
Working with p5.js and javascript lets us engage with the web as a platform/medium to display our work.
We’ll cover early net art as well as recent developments.
Here’s one of my favorite early internet-based artworks, a collaborative project between Auriea Harvey and Michaël Samyn, skinonskinonskin, a kind of digital love letter art project on the web.
You will need
With a partner construct a sound language. You will use this to communicate a drawing that one of you will see and attempt to describe to the other via your sounds. No human words can be used.
Example image
another example image
Okay, you’ve now heard the name p5.js, but what is it?
p5.js is a JavaScript library, that means it makes it easier to code JavaScript, the language of the web. It starts with the original goal of Processing, the programming language created by Ben Fry and Casey Reas to make coding accessible for artists, designers, educators and beginners, and reinterprets this for today’s web.
Using the original metaphor of a software sketchbook, p5.js has a full set of drawing functionality. However, you’re not limited to your drawing canvas, you can think of your whole browser page as your sketch. For this, p5.js has addon libraries that make it easy to interact with text, input, video, webcams, and sound.
The online editor is a basic code editing toolkit that allows you to write code, run code, visualize the output, and save code.
Main components of the editor:
Additional features:
tidy code
How do we tell the computer where to draw on the screen? We use a coordinate system.
In middle and high school, we created graphs with a X and Y axis. The point 0,0 was in the center of the page.
coordinates
In p5.js, 0,0 is at the top left of our window. As we move right, X increases. As we move down, Y increases. The top left point is 0,0.
Setup runs once at the onset of your program. Everything that we want to run once at the beginning of our program goes between the { and } curly brackets of our setup()
function.
We will be drawing to a digital canvas, which has a width and height that we specify. These are defined in pixels.
function setup() {
createCanvas(600,800);
}
This line tells p5js to create a canvas 600 pixels wide by 800 pixels high. The lines of our program generally end with a semicolon.
The draw function starts immediately after the code in setup()
runs, and it happens in a loop. The entire draw()
loop runs approximately 60 times a second, though this can vary as it’s dependent on your web browser speed and performance. The lines of code generally are executed one after the other. At the bottom of the draw loop contained in the { and } brackets it jumps back to the beginning of the draw loop and continues to run again, infinitely, until you click stop or close the web page.
Create a more complex shape using the beginShape()
and endShape()
functions. Reference page.
p5.js uses the concept of a software sketchbook, and makes it easy to write code, test (by hitting play), and adding more. This is known as an iterative process. It is a normal process of coding to start simple and and continually add to and refine your work.
A page’s background color can be specified
background(grayness);
Before a shape, specify color with fill
fill(grayness); //or fill(r, g, b);
Make your face!
How do you know what commands are available in p5.js?
The Reference is the complete list of available p5.js commands. It is broken down by category, and there is also a search feature. Use it to learn how to properly use a particular command.
We will use the reference so much in this class that it is recommended you consider adding it to your bookmarks bar.
It’s considered good practice to leave notes for yourself in your code. This is especially true in tricky code sections, or any time you think it will help you understand what your code is doing, or if you share your code with someone else. The clearer your comments, the easier it will be for you to understand your code when you open it again in the future.
To make a comment, put two //
:where:”string” at the beginning of the line.
//This is a comment
You can also do multiple line comments. Note: I rarely use this.
/* this
is a multiple line
comment
*/
The console tells you when you made a mistake. It points out the line where it thinks the mistake was made.
We also use the print()
command in our code to print things in the console for use in debugging. Stay tuned for more info on this in our next class.
Select a painting by a famous artist and recreate it in code using primitives (shapes such as point, line, rectangles, ellipses, triangles). You may use createshape. Create the work in the P5JS web editor and post a link to your code sketch on Moodle. Remember: assignments are due by 11:59 the day before class.
Example by Joe McKay