I 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/
II 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();
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(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); // Define the fill color fill(0,120,0); // Draw a triangle. You need to define the three points. triangle(200,250,150,150,250,150); // Change the fill color fill(0,0,120); // Draw a couple of ellipses ellipse(150,100,70,70); ellipse(250,100,70,70);
Experiment with the various shapes and drawing possibilities and try to create some sort of a character using only these basics shapes. The reference will be very helpful, especially the 2D Primitives and Color sections.
III Variables?
Before we go any further. Let’s introduce one very important concept about programming. Variables.
As you can see, writing code involves a lot of numbers and very often you will use the same value in many places. Let’s create a new Sketch and draw a bunch of ellipses that are all the same size.
size(400,400); background(0); fill(255); noStroke(); ellipse(100,200,20,20); ellipse(200,200,20,20); ellipse(300,200,20,20);
If we would like to change the size of these ellipses we would need to go and change the parameters on each of them. Not a huge deal when you only have three ellipses, but once you get to some more complicated programs and start dynamically changing some of the parameters, it’s going to be really important to know how to use variables.
Variables can be thought of as boxes that can contain certain amount of certain type of data. You put the data inside the box and you can then access that data in that box at a later stage in your code. So let’s see how we could use them here.
First of all, you need to declare the variable. Declaring means that you give your variable a name (can be almost anything). You often also assign some value to the variable. Basically you create a box, write a name on the side of it and put some stuff inside the box. Here we declare a variable called ellipseSize and assign it a value of 30.
int ellipseSize = 30;
Ok, that makes sense, but what is that ‘int’ doing there? Int means integer (a number without decimals). Variables have specific data types and int is one of them. This variable, or box, can only store certain type of data. Because it has been declared as an int, it can not store other types of data such as text (String). Variables also have a scope, the area of the code where the variable is visible/usable. We will talk about that later.
Let’s use the variable in our code.
size(400,400); background(0); int ellipseSize = 30; fill(255); noStroke(); ellipse(100,200,ellipseSize,ellipseSize); ellipse(200,200,ellipseSize,ellipseSize); ellipse(300,200,ellipseSize,ellipseSize);
Now that the size is a variable, we can easily change the size of all ellipses just by changing the value on one line of code.