Click to release bouncing balls

Processing: Event-driven graphics

1. Welcome

Computers have come a long way from the "good old days" when people sat in dark room, typing arcane text commands into a computer.

Well, actually we're still doing that. But the things that we can produce have expanded enormously.

We're going to be working on our computers today, starting together, and occasionally branching off to work on our own projects. This webpage has:

  1. An outline of the curriculum that we'll be working on.
  2. Links to software that you'll need to get started.
  3. Code examples that you can use for each of the projects that we're going to be looking at today.

2. Download Processing and Python Mode

  1. Go to the Processing download page. Download the software for your computer and follow instructions on your computer to install it.
  2. Start the Processing program. Processing ordinarily is based on a Java syntax, but we're going to install a Python mode to make things easier for us. Click on the dropdown menu in the upper right that says "Java" and select "Add Mode..."
  3. From the "Modes" tab select "Python Mode for Processing 3..." and then click the "Install" button.
  4. Once the Python mode has finished installing, select Python mode from the dropdown menu in the upper right corner of the screen. Now we can use Python in Processing.

After all your hard work getting Processing installed, let's take a break by watching the first 5 minutes or so of the introductory video available at hello.processing.org. It's a good introduction to some of the incredible creative power of coding with Processing.

When you're ready to start working on our own projects, come back here!

3. Orientation

Python is a programming language, and Processing is a way of creating visual art "sketchbooks" using a computer language like Python. Today, we'll be using Processing to create two kinds of art:

  1. Algorithmic art, in which the computer creates the drawing according to a specific set of instructions we give it.
  2. User art, in which the computer creates the drawing based on coded instructions AND user input.

4. First Program - "HelloWorld"

  1. Writing a program
    2. print("Hello, world!")
  2. Running a program
    Click on the "Run" triangle above the code window
  3. Information in Console below
  4. We won't be working much with text in our programs, but it can occasionally be helpful to print things out in the Console window, especially if you're trying to do some debugging.
  5. You can save this code if you like--give it a name that will help you remember it, such as HelloWorld (no spaces).

5. Second Program - "Ellipse"

This program isn't anything more than a simple instruction, but it demonstrates the idea that we can create a shape based on parameters.

Create a new program by selecting File > New, enter this one line program, and Run it.

ellipse(20, 40, 50, 50)

Try changing some of the numbers and rerunning the program. Can you identify what each of the values (parameters) represents in the drawing that is produced?

6. Orienting yourself in the window

Each "picture element," or pixel on the screen, can be individually specified by its column and row. Columns are numbered from left to right, from 0 to width - 1 across the screen, and rows are numbered top to bottom, from 0 to height - 1, down the screen.

For a 640 × 480 window, the coordinates would look like this.

7. Color

Color (of light) is different from pigments, which are what most artists work with.

The primary light colors are red, green, and blue, and by combining these colors in varying degrees, all the colors of the rainbow can be produced.

The diagram to the right indicates that red light and green light, when combined, will produce a yellow color. (If you were to combine red and green pigments, on the other hand, you'd have a brown/gray mess.)

To specify different colors for use in your artwork you can indicate how much of each primary color—red, green, and blue—you wish to use, with a value from 0-255.

So, if you want "white" to be the background of your window, you'd use the instruction

background(255, 255, 255) # red, green, and blue values

To specify the color of your ellipse as magenta, just before creating the ellipse you'd use the instruction

fill(255, 0, 255) # all red, no green, all blue = magenta

Take a few moments to try creating different ellipses on different colored backgrounds.

8. Additional Shapes

We'd like to be able to draw more than ellipses. We can draw points, lines, quadrilaterals, and more complex shapes as well.

We can also specify the weight and color of the stroke of a line or enclosing line, as well as the color and transparency of the fill for any 2-dimensional objects.

There are a number of graphical shapes that you can draw and experiment with. Typically, you'll want to use one of the instructions for defining the width of a line or the fill color that will be used:

stroke(0-255); # defines the grayscale color of a line stroke(r, g, b); # describes an RGB line color strokeWeight(3); # describes the width of the stroke noStroke() # removes the stroke fill(0-255) # describes a grayscale fill color fill(r, g, b) # describes an RGB fill color
noFill() # removes the fill

Then you can use one of the many geometric shapes provided by Processing. Here are a few to begin experimenting with:

ellipse(centerX, centerY, width, height) point(X, Y) # highlights a point on the window triangle(x1, y1, x2, y2, x3, y3) # creates a triangle with these vertices quad(...) # creates a quadralateral rect(x, y, width, height) # creates a rectangle line(x1, y1, x2, y2) # creates a line

You can enter these commands into the "sketch" code window in Processing, then hit the Run icon to see what they produce. There isn't any interactivity in these images, of course. These are just "still life" images, but they're a good place to practice identifying x-y locations on the graphic window.

9. Save your work

You can always screenshot the images you produce, but it's easier just to have Processing export the file for you.

If you want to save the sketch that you've made, include a

save("drawing.png")

command at the bottom. A graphic image of your window will be saved in the home directory of your sketch, probably inside the directory ~/Processing on your computer.

10. Transparency: The Alpha channel

In addition to specifying to a very precise degree the amount of red, green, and blue light you wish in a color, you can also indicate the transparency of the color. A color with an "alpha channel" (transparency) of 0 will be completely transparent, while a color with an alpha of 255 will be completely opaque.

The alpha channel is specified as an optional fourth parameter with any given color. So,

fill(0, 255, 255, 64)

would indicate a color "cyan" (aqua), that is 25% (64/256) opaque (ie. more transparent than not). Objects drawn beneath this ellipse will be visible, but obscured to some degree by the cyan color on top.

Try this to see how it works:

# overlapping rectangles background(255) fill(0, 0, 255) rect(20,20,50,50) fill(255,0,0,64) rect(40,40,50,50)