PFA:001 – Intro & Processing Basics

Inspiration

Golan Levin brings up a couple of important ideas that are related to the course. I also recommend you to go through some of the other great talks from the Resonate Festival video archive.

Another piece of inspiration for the beginning of the course comes from Bret Victor.

Today’s Artists

Processing Basics

First of all. Download and install Processing. We are going to use Processing version 3.2.1 although most of the things should work on earlier and later versions too.

Why Processing?

  • Works on multiple platforms (Mac, Linux, Win)
  • The Processing language is essentially Java and many other programming languages will look very similar or almost identical
  • The interface and the language will be very similar to Arduino, which we will use later in the course
  • Processing was designed specifically for artists, designers and education
  • Fairly accessible, but still powerful enough to create real-world projects

Before We Start

There are two very essential websites you need:

  • The Processing Reference – Tells you what you can do with the Processing language and how you should do it
  • Google – Programming consists mainly of googling. (Unfortunately, Processing is such a generic term that you need to use some pro-googling skills to find useful  answers)

The Interface

The Processing website has a great overview of the Processing Development Environment (PDE) and explanation of the interface. http://processing.org/reference/environment/

Drawing Simple Shapes

The Processing Reference is going to be your best friend when working with Processing. It will tell you what you can do with the language and how you should do it. So let’s start with the very basics. We want to see and draw something, we will talk about the different concepts of programming when we run into them. Let’s just get something showing up on the screen.

size() will allow you to change the size of your output window. You need to define the width and height inside the parentheses. Try out some different sizes. The semicolon ‘;’ at the end of the line tells the program that it is the end of a specific instruction. Just like the period ‘.’ in written text marks the end of a sentence.

size(400,400);

Now we have a square window. Let’s try changing the background color to something else with the background() function

size(400,400);
background(255);

You can set the color of background() with the parameters inside the parentheses. If you use only one number, it will be the grayscale value (0=black, 255=white). If you use three numbers, they will be the RGB values (red, green, blue). See the reference for other possibilities. Ok, now we have a canvas to work on. We can even decide what the color is. Let’s start drawing something on it.

size(400,400);
background(255);

// Draw a point to the middle of the canvas
point(200,200);
// Draw a line. The numbers define the start and end point of the line
line(150,250,250,250);

If you want to change the color of the point() and line(), you need to define the stroke() color before drawing them. By the way, any line of text in the code that starts with // is a comment and gets ignored by the program. Comments are there for you to remind yourself what you are doing or to explain to others what the code does.

size(400,400);
background(255);

// Change the color of the stroke
stroke(120,0,0);
// Draw a point to the middle of the canvas
point(200,200);
// Draw a line. The numbers define the start and end point of the line
line(150,250,250,250);

You can also draw some simple geometric shapes such as ellipse(), rect(), triangle() and others. You define the fill color of the shapes with the fill() function.

size(400,400);
background(134,82,132);
 
// Change the color of the stroke
stroke(92,31,89);
// Draw a line. The numbers define the start and end points of the line
line(150,300,250,300);
 
// Define the fill color
fill(160,119,158);
// Draw a triangle. You need to define the three points.
triangle(200,250,150,150,250,150);
// Change the fill color
fill(112,53,110);
// Draw a couple of ellipses
ellipse(120,100,70,70);
ellipse(280,100,70,70);

1st Assignment

This is one of the mandatory assignments that you need to complete to pass this class.

Experiment with the various shapes and drawing possibilities and try to create some sort of illustration using only these basics shapes. The reference will be very helpful, especially the 2D Primitives and Color sections. You can draw anything you want (self portrait, some kind of character or animal, something more abstract).

After you are done, do the following:

  • Sign up for OpenProcessing
  • Sign up for our class page
  • Create a new sketch and copy your code there. Save it, give it a name etc.
  • Add your sketch to our class page.
  • If for some reason, you do not want to register to the OpenProcessing site, you can also email me your code, or send it through Slack on the #courses-pfa channel