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.
First of all. Download and install Processing. The current latest version (October 2019) is Processing 3.5.3 although most of the things should work on earlier and later versions too.
- 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. Most of the things you learn can be applied to other programming languages.
- Processing was designed specifically for artists, designers and education.
- Fairly beginner-friendly, but still powerful enough to create real-world projects and applications.
- Processing can be easily extended through libraries that allow you to do very advanced things easily. You do not need to re-invent the wheel (or the physics library).
- If you want to learn how to write code for the Arduino microcontrollers, Processing will be an easier way to learn the basics of programming. This is why this course is a prerequisite to Electronics for Artists
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 – Even experienced programmers constantly use Google (or a search engine of your choice) while they write code. Unfortunately, Processing is such a generic term that you often need to use some pro skills to find useful answers.
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.
Creating a Canvas
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 English marks the end of a sentence.
Java, the programming language behind Processing is very strict when it comes to semicolons and the syntax in general, and the code will not compile, if you forget the semicolon.
Press the play icon to run the sketch. Now we have a square window, this will be your canvas. Let’s try changing the background color to something else with the background() function. 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 with. 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);
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. You can create multiline comments with /* and */
/* With multiline comments you can write poems or love letters inside your code: coding can be hard once you figure it out though sky is the limit */ 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 and the outline using the stroke() 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);
Recap – What Did We Learn Today?
- Processing “language” and the processing programming environment are based on and around Java
- We write the code on the text editor of the Processing Development Environment (PDE).
- Processing (Java) is quite unforgiving about the syntax of the language.
- Most of the commands we write are function calls. You can find the available functions from the Processing reference.
- Many of the functions require parameters (values that you write inside the parentheses). For example: background(255);
- In addition to the actual code, you can write other text in the sketch as comments (//) or multi-line comments (/* */)
Questions asked during the class:
- How about high resolution displays? There is a pixelDensity() function.
- How to render text as vectors? Use createFont() and the default renderer (not P2D or P3D). Read more about the different renderers.
1st Assignment – Dead Fish
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).
Limit yourself to the following functions:
- 2D Primitives: arc(), ellipse(), line(), point(), quad(), rect(), triangle()
- Basic color functions: background(), fill(), noFill(), noStroke(), stroke()
- Attributes: strokeWeight(), strokeCap()
After you are done, do the following:
- Sign up for OpenProcessing
- Create a new sketch and copy your code there.
- Change the mode in the sidebar to Processing.js mode. See the image below.
- Save the sketch, give it a name.
- Submit the sketch to our OpenProcessing class page
- If for some reason, you do not want to register to the OpenProcessing site, you can also submit the code on MyCourses