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. We are going to use Processing version 3.4. 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
- 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 often need to use some pro-googling 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 written text marks the end of a sentence.
Now we have a square window. 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);
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);
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 code as comments (//) or multi-line comments (/* */)
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 link of your sketch to the MyCourses assignments page.
- If for some reason, you do not want to register to the OpenProcessing site, you can also submit the code on MyCourses