Week 1: Introduction

Overview

  1. Hello!
  2. Course Overview, Syllabus and Goals
    • Student goals
  3. Human Fax Machine
  4. Artists who code
  5. What is p5.js?
  6. Hello World - Our first programming
  7. Where to Get Help

Introduction

An intro to Procedural Art and programming art

Pre-history and Early history of Computer Art

In the beginning - 1960s

The precursor of computer art dates back to 1956–1958

Avatar

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

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.

Avatar

Mondrian

Avatar

Noll

Avatar

Noll

Early computers did not necessarily have displays. One common output was a plotter, which used vector coordinates to direct a drawing pen.

Avatar

Frieder Nake, ‘Hommage à Paul Klee 13/9/65 Nr.2’, 1965. Victoria and Albert Museum.

Avatar

Lillian Schwartz working at Bell Labs

Avatar

early work by Lillian Schwartz

Manfred Mohr

Avatar

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.

1980s

In the 1980s computers came into the home. Artists began having access to graphical systems.

Avatar

Tools

Avatar

Warhol


Avatar

Warhol’s computer art

Harold Cohen and AARON

Avatar

AARON

videos of AARON

Art on the Web and new tools for visual programming

Casey Reas

Avatar

Reas

Avatar

Reas

Processing

Rise of the internet, net art and web-based projects

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.

Avatar

Human Fax Machine

You will need

  • paper
  • pen

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

Avatar


another example image

Avatar


Hello World!

What is p5.js?

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.

an intro to the p5js editor

The online editor is a basic code editing toolkit that allows you to write code, run code, visualize the output, and save code.

Avatar

Main components of the editor:

  • Play (Compile) and Stop buttons
  • Name of your code sketch
  • Code editor
  • Visual Output
  • Console for error messages and debugging

Additional features:

  • Rename the randomized name
  • File > Save
  • File > Share to get links for the code sketch or just the visual output
  • Edit > Tidy Code (can help with debugging!)
Avatar

tidy code

Coordinate system

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.

Avatar

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

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.

draw

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.

Drawing shapes

  • rectangle
  • ellipse
  • line
  • triangle
  • point

Creating your own shapes

Create a more complex shape using the beginShape() and endShape() functions. Reference page.

Iterative design and code sketching

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.

Color

A page’s background color can be specified

background(grayness);

Before a shape, specify color with fill

fill(grayness); //or fill(r, g, b);

In-class Exercise

Make your face!

The Reference

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.

Commenting

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
*/

Console / Error Messages

Avatar

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.

Ways to Find Help

Homework

Learning

  • Buy Getting Started With p5.js book.
  • Read Chapter 1, 2 and 3 of Getting Started With p5.js.
    • The book is reasonably priced. It will also be available to virtually check out from the library. I will post an updated link when it becomes available, likely next week.
    • Watch The Coding Train 1.1 - 1.6 videos
  • Have a notebook or paper and pen or pencil ready to go for next class for notes and sketches

Research

Writing

  • Read the chapter Program Art or Be Programmed from New Art Science Affinities- Pick an artwork from one of these artists. You can visit their websites to find examples. Write a short post about the work. How was it made? What is the concept? What do you find interesting in the work? etc.

Mini “flash” Presentation

  • Examine the categories of artists from the list on this page
  • Pick 3 different artists and spend time reviewing their work online
  • For each artist, pick one artwork you will present on. Mak a slide for each artwork. Use slideshow software of your choice. Prepare a short 1-minute presentation on each of your 3 selected works.
  • For each project: What is the project? How is it presented (online? exhibition? etc)? What is the concept? Who made it? What do you personally find interesting in it? etc
  • Next week we will have presentations of these artist/artworks

Coding

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.

Avatar

Example by Joe McKay