Visualisation Lab 1

In these labs, we will be using the Processing development environment. Processing is built on top of the Java programming language, so it will use many of the concepts you are familiar with and uses the same syntax. It is an open source environment for people who want to program images, animation and sound.

The first two labs will introduce some of the basic building blocks. Over the term you will be combining these building blocks in order to represent and understand data and systems.

https://processing.org/ has a number of tutorials and a very useful reference. You can also download the software.

There are also a number of very useful books in the library, for example:

Maintaining a lab diary

The assessment of this module is 100% coursework. It will require you to produce sketches but also write a justification of the choices you have made when coding your sketch. You should get in the practice of maintaining a paper lab diary or digital notebook - this can be a handwritten notebook, word document, PDF file, HTML webpage, or a blog. Write about what you do, and why. Where you can, justify the decisions you make with material from the lectures and your independent study. Include paper versions of what you envision your design will be, screen shots of the visualisation as it progresses, descriptive notes, and where you can, references.

Getting started with Processing

Open Processing by typing Processing in the search bar and clicking "Run Processing".

Pieces of software written in Processing are called sketches. Sketches are written in the text editor. There is also a message area which gives you feedback while saving and exporting and also displays errors. The console displays text output by Processing programs.

Each Processing sketch has it's own folder. The main program file for each sketch has the same name as the folder and is found inside. For example if the sketch is called my_sketch, the folder will be called my_sketch and the main file will be called my_sketch.pde.

A sketch folder sometimes contains other folders. Files containing images, sounds or other data can be added to a sketch by selecting "Sketch > Add File" from the menu or by dragging the file into the text editor. When a file is added to a sketch, a data folder is created.

We are going to be creating visuals on the screen. Essentially we are treating the screen like a piece of graph paper. Each pixel is at a coordinate (x (horizontal), y (vertical)).

Simple sketches

Processing is designed so that you can start creating sketches with minimal coding. For example:

size(600, 600); //sets the size of the display window
line(100,200,350,500); //draws a line from x1(100), y1(200), to x2(350), y2(500)

This code will draw a line starting at coordinate (100, 200) and ending at coordinate (350, 500). The coordinate system for pixels in a computer window is reversed along the y axis. (0,0) is in the top left.

This is Processing in static mode - but we might want our sketches to change over time (dynamic mode) so lets introduce a template with the following functions - template.pde:

setup() - we do this when the program first starts
draw() – we do this continuously. One image frame is drawn to the display window at the end of each loop through draw(). The draw() function is displayed at a preset frequency of sixty images per second but this can be reset using frameRate();
size() -specifies the size of the display window you want to create. size() takes two arguments - width and height. The size() function should always be the first line of code in setup()

void setup(){
   size(500, 500);
}

void draw(){

}

Graphical Elements in Processing

The simple.pde code file contains examples for drawing points, lines, triangles, rectangles, and ellipses. The comments inside the file explain the format of the individual commands; however, here is a short summary of some of the instructions:

point(x, y) - draws a point at coordinate x, y
line(x1, y1, x2, y2) - draws a line from x1, y1 to x2, y2
rect(x, y, w, h) - draws a rectangle at x, y (coordinate for the top left corner of the rectangle) with width w and height h
ellipse(x, y, w, h) - draws an ellipse at x, y (coordinate for the center of the ellipse) with width w and height h
triangle(x1, y1, x2, y2, x3, y3)

EX1: Try modifying a few of the arguments in simple.pde and see what effect that has

Stroke and Colour in Processing

In Processing every shape has a stroke() or a fill() or both. The stroke() is the colour of the shape's outline and fill() is the colour of the interior. If you forget to specify a colour Processing will use black (0) for the stroke() and white (255) for the fill(). By adding stroke() and fill() functions before the shape is drawn you can set the colour. stroke() or fill() can be eliminated with noStroke() or noFill()

There is also a background() function which sets the background colour for the display window.

Digital colours are constucted by mixing R (red), G (green), and B (blue). The amount of each colour is expressed as a range 0 (none of that colour) - 255 (as much as possible). Processing has a colour selector to aid in choosing colours. Access this via "Tools > Color Selector" (from the menu bar).

In addition to the red, green, and blue components of each colour, there is an optional fourth component, referred to as the colour's "alpha" (a) - alpha refers to the colour's opacity and is useful when you want things to appear partially see-through. Opacity is also expressed in the range 0 (completely transparent) - 255 (completely opaque).

background(r, g, b)
stroke(r, g, b, a)
fill(r, g, b, a)
strokeWeight(weight)
noStroke()
noFill()

When you draw a shape, Processing will use the most recently specified stroke() and fill(), reading the code from top to bottom.

You can also specify colours in colorMode(HSB)which takes three arguments (hue, saturation, brightness).

Hue—The colour type, ranges from 0 to 255 by default.
Saturation—The vibrancy of the colour, 0 to 255 by default.
Brightness—The, well, brightness of the colour, 0 to 255 by default

The colour selector also gives you the H, S, B values for a chosen colour

EX2: Modify your code in simple.pde to add colour using both colorMode(RGB) and colorMode(HSB)

Things to note

Processing commands are case sensitive
You can write comments in your code (and you are expected to). Single line comments are created with two forward slashes //. Multiline comments start with /* and end with */
Some errors are noted in the code by a red squiggly line where Processing believes the mistake to be. An error message will also appear in the grey bar at the bottom of the input window.

Variables and Loops

Variables in Processing work much like variables in most other common programming languages. There are different types of variables, for example strings, integers and floating point numbers. Once we have stored some data in a variable, we can use the value of that variable later on in the program. Variable names should be concise and descriptive.

Processing has a number of built-in variables which might be useful, these include:

width - width (in pixels) of sketch window
height - width (in pixels) of sketch window

Processing provides several data types for various kinds of information. The most important are:

boolean - Boolean values
int - integers
float - floating point value
char - single character
String - character string
color - colour

The variables.pde code illustrates how variables are declared and initialised in Processing. The syntax for loops is also the same as in Java. It should look pretty familiar.

EX3: Modify the code in variables.pde to create a pattern of transparent circles on a black background duplicating the circles to fill the sketch in both dimensions. Hint: nest one loop inside another.

Answer: EX3.pde

Arrays

When working with a large number of values, it is inconvenient to have to create a variable for each value. An array allows a list of values to be managed. Much like in other programming languages, you have the choice of creating the array and assigning it a size later, or you can declare and initialize it all on the same line.

The array.pde code file creates an array of grayscale values for each column of pixels in a sketch in the setup() function, then draws those pixel columns in the draw() function. Note that the array storing the grayscale values needs to be global in order to be accessible by each function.

Also note that the function uses the random() function to generate each of the grayscale values. This function, as you would expect, selects a random floating-point value between the upper and lower bounds provided to the function.

EX4: Modify the code in array.pde to fill the sketch with horizontal lines of a randomly generated colour

Answer: EX4.pde

If-statements, conditionals and logical operators

The conditional execution of code is one of the most fundamental concepts in computer programming of all types. The syntax of the if-else statement is as follows.

if (expression) {
   statements
} else {
   statements
}

if (expression) {
   statements
} else if (expression) {
   statements
} else {
   statements
}

The ifelse.pde code file contains the code to move a circle horizontally accross the centre of the screen.

EX5: Modify the code in if.pde so that the circle moves in both the x and y directions. Use if statements to make sure that when the circle reaches the edge of the sketch it bounces back. The usual mathematical and logical operators are available (+ - * / = % ! || &&) in Processing.

Answer: EX5.pde

Next steps

In the next lab we'll look at classes and objects. If you have finished early take some time to look at the Processing reference and have a go at some of the Tutorials. You can also look at the examples of code available at https://www.openprocessing.org/browse/#