Categories
Beginner Colours Java Processing Project Rainbow

Set up the coding environment

This post starts you off with Processing. Download, run and draw some coloured lines. The computer programming language Processing, is a great way to start coding. You get a quick visual result from a few lines of code.

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

Processing was started in 2001, by Ben Fry and Casey Reas, who were both previously at the Aesthetics and Computation Group at the MIT Media Lab. And then in 2012, with Dan Shiffman, they started the Processing Foundation. Processing is more than one language; it is more about developing software literacy, with a focus on visual arts and technology. Consequently, there are several different versions to choose, including: p5.js which is a JavaScript library where processing sketches can be developed for a browser. Processing.py allows processing to be coded in Python. Also, Processing for Android, and Processing for Pi enables you to code on the Raspberry Pi. Additionally, Dan Shiffman has written a book using Processing, called the Nature of Code, that focuses on modelling the unpredictable evolutionary and emergent properties of nature.

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

Download Processing. Available for Windows, MacOS, Linux.

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 Processing play button and a stop buttonProcessing 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 Processing play button. 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…” Processing - first sketch output (it is a blank page of grey colour).

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: line(15,25,70,90);

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.

Processing result: thee lines making an arrow shape.

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.

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 stroke.

Let’s change the line colour. To change it to red we write stroke(255,0,0).

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:

First, 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 strokeWeight 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.

size(200,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.

background(255);

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 0 and 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));
Image produced with Processing, describing three randomly positioned lines, with random colours.

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.

REFERENCES.

  1. 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. 
  2. 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. 

By Jonathan

Jonathan is constantly designing things, educating people, and always learning. He is professor of visualisation at the School of Computer Science and Electronic Engineering, Bangor University, U.K. He leads the Visualization, Data, Modelling and Graphics Group (VDMG), leads project rainbow and is an author of the Springer book "Five Design-Sheets" sketching design method.

Leave a Reply to Anonymous Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

en_GBEnglish (UK)
cyCymraeg en_GBEnglish (UK)