Drawing Primitives

Chapters 1 and 2 of Learning Processing by Daniel Shiffman. Macquarie University students have access to an electronic copy via the library.

Coordinate System tutorial at processing.org.

More Details

A processing program is made up of expressions and statements. Statements come later, this topic shows us how to build up expressions to get a program.

Processing has a whole pile of built in expressions you can use, most of which cause things to occur on the screen. The full-set of expressions available are documented at the processing reference page but we will list here all the ones you need in this text. In processing, you also have a full suite of mathematical expressions available, plus (+), minus (-), multiply (*), and divide (/).

Warning!: Division might now work the way you expect. We will explain why in a later topic.

Values and Types

So far, we have seen many values:

• 1 is a value, the number one
• -34 is a value, the number -34
• 3.4 is a value, the number 3.4

This might all seem terribly obvious, but it is about to become very important.

Values are grouped into types. A type is a set of values that all work the same. All the whole numbers work the same, so there is a type for these (int). All the precise numbers work the same, so there is a type for these (float). Here is a list of all the types you need to worry about:

• int : whole numbers. Examples are 1,2,-7,0,1023977389.
• float: numbers that might have decimal parts. Examples are 1.2,2.45644,-13.0,0.0.
• char: single characters that might appear in text. Examples include c, g, ^, $, @, z.

You must be careful to know what type any particular value has because it affects how the program runs. For example, each of the basic operations we know about have particular effects based on the types it is working on.

You will notice that mostly things work out as you expect, but you need to be aware of integer division and not doing arithmetic on characters. Don’t ever try and do arithmetic on characters and as for integer division…

But a float can be an int…

If you see the value 0, how do you know if Processing thinks it is an int or a float? Well, if you see 0, it will think it is an int and if you see 0.0, processing will think it is a float. However, the back-and-forth between these two options gets complex once we get into more complicated code but for now, you need to be aware that it matters what Processing thinks a value is and you can make a pretty good guess at what it thinks.

Processing will also convert between some types if you ask it to. In particular, it will very happily convert an int into a float. You should be able to see why this is always OK. It won’t do the opposite though because not all floats have equivalent integers.

Characters

While we are thinking about it, how does Processing know when I mean the character 0 instead of the number 0? All characters are within inverted commas, so the character 0 will look like '0'. The same holds for all other characters, they look like 'c', 'g', '^', '$', '@', 'z' in Processing code

1
2
3
noStroke();
fill(92, 136, 218); // These RGB values give the right shade of blue
circle(width/2, height/2, 20);

1
circle(width/2, height/2, 40);

Applying your Understanding

New content coming soon