Processing is a great way to start to code, and even to continue coding! It provides a simple sketchbook interface, which is an integrated development environment (IDE), where you enter the code. You can quickly create visual pictures. As we shall see, how cool is it to see the results of your own programming, just from a few lines of code! Also, when you are using Processing, you are actually developing code in Java, so you are also learning Java.
A little history
Learning Processing is a good investment in your time. In fact, we have been using Processing, to teach computing principles, in some of our modules at the University. These include the 2nd year Computer Graphics module, and the Masters level Information Visualisation module. The montage above shows some of our students’ work. In addition, we have used it to develop more advanced computer programs. The picture below was developed using the Processing libraries, as contribution to a Doctor of Philosophy (PhD). The tool, named Vinca1,2, visualises water and sediment transport along estuaries.
Step 1. Download and install
First, you need to download and install Processing. Go to http://processing.org/download/
Run processing, to make sure that it has been properly installed. A window should appear. It will have a play button and a stop button at the top. Processing will create a default file name (which you can later change). You can type code in the Sketch area, and any text output will appear in the Console tab, or errors in the Errors tab.
Now press Play . A small window should appear. This is where your pictures will appear. At the moment, because we don’t have any code, it will just show a grey box in a small window labelled “sketch…”
Step 2. start by drawing a line
To draw a line in Processing we use the command
line. Start off your coding journey by writing the following:
Now play the code. This will create a single line.
Because Processing is clever, it has a whole set of default values. The size of the screen, the colour of the line, and the background colour have already been set for you. We can change them later, but for now: the line colour is black, background is grey, and size is 100 by 100.
The line has been drawn between the x and y coordinates (15,25) and the second x,y coordinates of (70,90). We can think of the
line function receiving four parameters (x1, y1, x2, y2) and drawing the line with the current colour on the page. Remember, we said that it uses a default set of values, and the page has already been set at 100 by 100. We see from our picture that the (0,0) position is at the top left.
It is possible to draw things off the screen, so be careful what values you enter! How about trying out the following lines of code.
line(-15, -10, 100, 100); line(-15, -25, -70, -90);
The code will run, without problems. But the first line is half off the page, while the second is drawn off screen, and so it is not seen in the current screen size and position.
Now let’s draw three lines, to make an arrow symbol. We can even change the width of the line. We control this by changing
strokeWeight(10); line(10, 10, 80, 10); strokeWeight(5); line(10, 10, 80, 80); strokeWeight(10); line(10, 10, 10, 80);
Step 3. Add some colour
If you don’t know about RGB colour, then I suggest you take a look at a previous post on RGB colours.
In processing, RGB colours are defined by values between 0 and 255. To change the line colour, we need to adapt the colour value that is set in
Let’s change the line colour. To change it to red we write
strokeWeight(10); stroke(255,0,0); line(10, 10, 80, 10); strokeWeight(5); line(10, 10, 80, 80); strokeWeight(10); line(10, 10, 10, 80);
Primitives and Attributes
Let’s note a few things with the code so far:
stroke (like many other commands) has a default value. Stroke’s default colour is black.
Second, there are two different types of things. We have a
line command that defines the shape of the object we are placing, and
stroke that describe how it will appear. In computer graphics terms, these are named primitives and attributes, respectively. Primitives are the geometric objects. They are basic shapes. Attributes describe how those shapes appear.
Third, we notice that there is an order to our lines of code. We first change the values of some attributes, such as strokeWeight, and stroke colour (this order of these two does not matter), but then we draw the line. In other words, we need to define how it will appear first (by defining its attributes) before explaining what we will draw.
Fourth, we don’t need to keep changing the
stroke colour, if every line will be the same colour. What we do is to set the attribute value once and then the graphics library remembers the value.
Fifth, when an attribute value is set, it will affect all following primitives that use that attribute. So, for example, if you define the stroke colour, any following objects (whether ellipses, rectangles or whatever) would be affected.
Step 4. Change different attributes
Let us also change a few different attributes.
First we will change the window
size. To change the window size, we use the function
size. The default size is 100 by 100. It is a small square. We’ll make it larger. Let’s have it 200 by 200.
Now let us change the
background colour. The default background colour is a light grey colour. Remember from the RGB colour post, we need to max out the value to get white. So
background(255)will change the background colour to white, and background(45) will make it dark grey, and background(0,0,255) blue, and background(160,255,160) will change the background to a very light green. (You should try different background colours). For now, let’s stick to white.
Step 5. Different coloured lines
In the final task, we look at generating several coloured lines. (We will explore methods to make this code better in the future, but for now, we will copy lines down the page).
In this exercise, we will use
random. This function does what it says: it returns unexpected values! So if we write
random(10) it will give us a new, and unexpected value, somewhere between
1. This is really useful. We can use it to change to the colours to an unexpected one! We can also use it to change the line to random x, y positions.
Let us take what we have learnt so far, and draw three lines, with a
strokeWeight of 2, each with
random positions of each of the coordinates of the line (x1,y1,x2,y2), and each with random colours. All placed in a 200 by 200 sized window, with a white background.
size(200,200); background(255); strokeWeight(2); stroke(random(255),random(255),random(255)); line(random(200), random(200), random(200), random(200)); stroke(random(255),random(255),random(255)); line(random(200), random(200), random(200), random(200)); stroke(random(255),random(255),random(255)); line(random(200), random(200), random(200), random(200));
Every time you press play, it will create a different output. Have a go!
Also, note that we have set some values, of the input to random, to 200, and others to 255. The command
random(255), as shown on line 4, 6 and 8 (above) are used because RGB colour is defined between 0 and 255, while
random(200) is written because we have set the
size of the output window to 200 by 200.
Step 6. Additional exercises
- Try changing the colours to appear in a random grey colour.
- Make the size of the window larger (to say) 300 by 300, and adapt rest of the code appropriately. Notice what you have changed.
- Add another 10 random lines (in this case use copy and paste!) and think how you could make this code better.
- R. L. S. F. George, P. E. Robins, A. G. Davies, P. D. Ritsos, and J. C. Roberts, “Interactive visual analytics of hydrodynamic flux for the coastal zone,” Environmental Earth Sciences, vol. 72, no. 10, pp. 3753–3766, Nov. 2014.
- R. L. S. F. George, P. D. Ritsos, and J. C. Roberts, “Interactive Oceanographic Visualization using spatially-aggregated Parallel Coordinate Plots,” in Posters presented at EuroVis 2014, June 9-13 , Swansea, Wales, UK, 2014.