Hello Processing - Vula

An Introduction To Programming With Processing 

This publication is released under a Creative Commons Attribution- 

NonCommercial-NoDerivs 3.0 License. CC BY-NC-ND 2011 

You are free to share, and redistribute this publication in whole, but not in part 

under the following conditions. 

The person identified as the author in the following terms is also known as 

Lyndon Daniels and is the owner of the domain name 

http://www.lyndondaniels.com 

“Classified works of the author” and “a classified work of the author” will include 

all content and redistributions of the content, that the author has created and is 

licensed to the author by de facto or de jure. 

“This publication” refers to the document you are currently reading in it's entirety 

and is also a classified work of the author. 

1. This publication and all redistributions of this publication must remain as 

is, and not in any way be modified. 

2. All redistributions of the source code and related material, including but 

not limited to the images associated with this publication, that are not 

licensed under other terms or are not classified works of the author, also 

fall under the same license of this publication. 

3. Attribution must be given to the author for all redistributions of the 

classified works of the author. 

4. Acceptable attribution for redistributions of this publication must associate 

the publication/s duplicated as being a classified work of the author. 

5. This publication is only to be redistributed digitally and not to be 

redistributed in any other format including, but not limited, to print. 

6. No capital or commercial profit, monetary or other, is to be gained from 

this publication or redistributions of this publication without the author's 

consent. This includes, but is not limited to selling and/or trading this 

publication or any redistributions. 

7. All redistributions of this publication are to be released under the same 

license that this publication is released under. 

8. The author solely reserves the right to change this agreement at any time. 

For additional information regrading this license please see 

http://creativecommons.org/licenses/by-nc-sa/3.0/legalcode 

2


Table Of Contents 

About This Guide 7 

Hardware and Software Theory 7 

What is Programming? 7 

How does Programming relate to Hardware and Software? 8 

Abstraction 10 

Speed 11 

Efficiency 12 

Disambiguation 14 

The Unique Qualities of a Programming Language 17 

Lower Level Languages and Higher Level Languages 20 

An Analysis of a Computer Program 22 

Commands 23 

Expressions 23 

A Scalable Software Development Model 25 

Plan 25 

Research 26 

Mockup Designs 27 

Data Acquisition: Sourcing The Data Needed For Your Project 28 

Filter 29 

Clustering and Data Mining 29 

Parsing 32 

Determining Flow of Control Through Stepwise Refinement 32 

Implement, Test and Document. Repeat 34 

Deliver 35 

Why Learn Programming using Processing? 36 

Code For Artists 36 

Java Based 36 

Open Source 37 

PDE 38 

Source Code Editor 40 

Build Automation Tools 40 

Compiler and/or Interpreter 41 

Debugger 42 

Active Online Community 43 

Table Of Contents 3


Hello Processing 44 

Install Processing 44 

Sketches 44 

Hello World Program 1.0 45 

The println() Function 47 

Syntax And Syntax Errors 48 

Logical Errors 50 

Display Window 50 

Standardized Coding Practices 52 

Comments 52 

Whitespace 53 

Program Notes 54 

Cartesian Graph and the Processing Coordinate System 54 

Hello Display Window: Hello World 1.1 56 

text() 56 


Formatting Text 58 

Color 59 

Drawing 62 

2D Primitives 62 

The Origin of an Ellipse 63 

Aliasing 66 

Smile 66 

Angles in Processing 66 

Editing the Smile 69 

Adding Eyes 72 

Drawing Irregular Shapes 73 

Order, Order! 78 

Finishing the Sketch 78 

Programming Paradigms 80 

Datatyping Categories 81 

Primitive Data Types 81 

Processing API Data Types 82 

User Defined Complex Data Types 83 

PImage 83 

The Design and Layout Program 86 

Program Notes for Interface01.pde 86 

Table Of Contents 4


The PDE Tools Menu 86 

Beyond Static Sketches and on to Active Mode 90 

Methods, Functions and their contexts 91 

The setup() function 92 

The draw() function 94 

Experimentation 96 

Datatyping 101 

Variables 102 

Variable Scope 104 

Interacting with Images 106 

Friction Simulation 109 

Variable Naming Conventions 111 

Planning and Pre-debugging 112 

Implementing a Programmatic Solution 114 

Constraining Values 116 

Branching 118 

The if() structure 120 

Relational Operators 121 

Comparison 121 

Extending the if() structure with else 124 

Extending the if() construct with if else if else 126 

Logical Operators 127 

Interface Controls Setting up a Slider 128 

User Defined Functions 130 

Creating a User Defined Function 134 

Datatyping a Function 134 

Determining a Range 134 

Returning Data from a Function 138 

Dragging the Slider Button 140 

Setting up Regional Constraints 142 

Finishing the Slider 144 

Mapping Values 144 

The Mystery Shape Maker 148 

Arrays 149 


Dynamic Assignment for Elements in and Array 155 

Iterations 158 

Table Of Contents 5


Transforms 162 

An Introduction to 3D in Processing 176 

3D Primitives 177 

Guess My Number Game 179 

Object Oriented Programming 181 

The Concept of a Class 182 

The Blueprint Analogy 183 

Why Use Object Oriented Programming 185 

Creating a Class 185 

A Button Class 188 

Object Instantiation 

Working with External Data 193 

Attribution 197 

Images 197 

Table Of Contents 6


About this Guide 

Introduction to Programming with Processing is a guide to creating interactive 

software with the programming language, Processing. The main focus of the 

documentation is to give the reader an understanding of the programming 

language, Processing and also to give the reader the knowledge to apply an 

understanding gained from reading this documentation to learning other similar 

high level programming languages. 

Hardware and Software Theory 

What is programming? 

A software program is a set of instructions issued to a computer via source code. 

Source code is data that usually resembles a text document which is typed in a 

specific programming language that is somewhere between a language that 

computers can process efficiently and humans can understand. The task of 

creating source code is known as programming. 

Human readable source code on the left and machine code on the right. 

Although source code does not make sense at first glance to someone new to 

programming, when compared to it's equivalent in machine code it definitely looks more 

appealing. 

Hardware and Software Theory 7


How does programming relate to hardware and 

software? 

Before we get into the process of creating software programs, lets first examine 

the relationship between a software program and a computer. 

One of the fundamental functions of a computer is it's ability to control electrical 

energy and ultimately transform that energy into another form of energy such as 

light, sound or motion. We use software to communicate with a computer, which 

will determine the various paths that the electrical energy will take, in order to 

achieve the goal we have stipulated through programming. 

Computers are designed to react to electrical energy, this energy can be of a high 

or low voltage and forms the basic premise of all the complex interactions that 

exists between humans and computers. These high and low voltages of electrical 

energy are relayed within the circuitry of a computer in very short intervals that 

allow us to distinguish one from the other and will eventually be sequenced 

together to form a protocol for communicating with computers. 

This protocol of communication we represent with two numerical digits a 1 and a 

0, which to a computer equates to a high and a low voltage. We refer to this form 

of representation as Binary Code. Of course, this representation means nothing to 

a computer as it is only reacting to the electrical energy that is being relayed 

within it's circuitry. But to us using a 1 and 0 as a form of representation creates a 

means for every simple to complex interaction we have with computers through 

software. 

By combining various sequences of 1's and 0's (and ultimately sequences of high 

and low voltages) followed by more sequences of 1's and 0's arranged in similar 

or different patterns the effect of a continuous flow of energy is created that 

results in light or sound or one of the many other capabilities of a computer. The 

fact that this flow of electrical energy is broken up into smaller chunks means that 

each chunk can be made up of a different sequence of 1's and 0's which could be 

used to create the impression of a change or variation which could finally be 

perceived as an image moving in an animation or the diaphragm of a speaker 

vibrating at different amplitudes which, for example, we ultimately perceive as 

the sound of our favorite track. 



Although useful, representing data in this way can become quite cumbersome and 

error prone. If developing software meant having to learn endless sequences of 

binary code, becoming a programmer would be a very daunting task. This is, 

however, not the case as we can use a 1 and a 0 to represent a high and a low 

voltage we can use a sequence of 1's and 0's to represent more complex ideas 

such as a larger number like 155 which can be translated into binary as 10011011. 

This form of representation can furthermore be extended to include typographic 

characters, which in themselves can be strung together in sequences to create 

words, which can in themselves be strung together to issue commands to a 

computer through programming. We refer to this process as abstraction. 

Programming in it's simplest form is the process of creating and modifying a 

series of 1's and 0's that influences the path of the electrical current, by means of 

abstraction. 

At some point everything that a computer processes (including our own 

interactions with it) has to exist in binary code representations. However, it's 

important to remember that binary code is simply just a human representation, for 

determining a sequence of high and low voltages, that we use to make the 

complexities that occur within a computer more understandable to us. 

As I mentioned earlier, a computer does not really care about what form of 

representation we use, however this process of representing data certainly does 

make it a lot easier to communicate with computers. 

We interface with computers via software which allows us to work in an individual 

capacity, whenever applicable, in fields that would previously have required teams of 

people working together. 



Abstraction 

Representing the abstract concept of something like data in the form of high and 

low voltages with a series of 1's and 0's can be quite useful, but still very difficult 

to read and understand. Imagine having to memorize all of those sequences in 

order to be an efficient programmer. It would take exorbitant amounts of time to 

create the simplest of software programs. Fortunately the process of representing 

human-relevant concepts to a computer does not stop at binary code. Since we 

know that a certain sequence of 1's and 0's on a certain type of machine such as 

the sequence “00110101” can be used to represent the number “53” why not make 

the sequence “01001000” and “01101001” represent the characters “h” and “i” 

put together to make the word “hi”. This is exactly what software developers do, 

the process of taking a complex set of data and representing it in a more humanreadable 

format is known as abstraction. As you can image this makes it a lot 

simpler to communicate with a computer, so instead of typing “01001000 

01101001” we can simply type “hi” and thanks to the process of abstraction our 

computer knows what to display even though it's reading a sequence of high and 

low voltages at the simplest level. 

Abstraction is great because it makes the process of communicating with 

computers easier, so you might be thinking to yourself why then is programming 

and source code so cryptic and far removed from a common natural spoken 

human language such as English? Surely, if we can abstract complex data why 

not keep on abstracting concepts to computers until it can understand a human 

specific language like plain and simple English? 

For example if we wanted to draw a circle on a computer screen why can't we just 

say to a computer: 

“Computer, could you please draw a circle that has a diameter of 

55 pixels and who's center is somewhere close to the top left of 

my screen, thanks?” 

Instead we communicate with our computers like this: 

ellipse(56, 46, 55, 55); 

Abstraction 10


There are three main issues to consider here speed, efficiency and disambiguation. 

Speed 

One of the main reasons we cannot continue to abstract our communications with 

computers to the point where everyday English is used, is due to the speed at 

which data can be processed. 

As we abstract data in order to make it more human-readable that same data 

becomes less machine-readable, and in order for a machine to be able to make 

anything useful out of that data it must first convert that data into a machinereadable 

format. 

All of this abstracting and un-abstracting requires valuable system resources and 

energy, system resources and energy that could be used more effectively 

elsewhere. Subsequently as we move further away from machine code we require 

faster more powerful computers to process the data we create. 

It's estimated that under certain circumstances a consumer grade Intel Core i7 3.3 

GHz processor can preform 147,600 Million instructions per second, and if 

you've ever used one of these processors you'll probably also note that even with 

all of that processing power there are certain situations where your computer can 

still lag! 

This does not necessarily have anything to do with the processor specifically but 

simply due to the massive amounts of data that an average modern day computer 

is expected to cope with. To put this into perspective consider that 40 years ago in 

order to send a man to the moon computers with a clock speed of 0.043MHz and 

64Kbyte of RAM were required to run software ranging about 6MB in size, by 

today's standards a single modern day home computer could be about 77 million 

times more powerful than the computers used to launch a space shuttle, navigate 

it to the moon and safely return it to earth such as the Apollo Guidance Computer. 

In retrospect the modern day needs we place on our computers can be somewhat 

demanding. 

Abstraction 11


The Apollo Guidance Computer used on Apollo 11 on the left and the NASA Manned 

Spacecraft Center on the right. Technology from the 1960's. 

Efficiency 

Like any natural language, computer languages are built around their 

environments. Human cultures have developed languages as a means of 

communicating their perceptions of internal, conceptual and external 

environments. However what exists in one environment might not be a part of 

another. Subsequently, a string of words might be used to describe something that 

is uncommon to one environment, whereas in another culture where that thing is 

common a single word might be used to describe it. 

For example a visitor traveling to Japan in the late 1800's might describe a 

specific mode of transport as: 

“A human-powered two wheeled cart, that seats one or two people 

reserved for the social elite.” 

However a person familiar with this mode of transport might have a specific name 

for it, such as: 

Abstraction 12


“Rickshaw” 

Rickshaws are not a common sight in modern times but where a regular mode of 

transport in Japan, in the 1800's 

Obviously if you are living in an environment where such things are common 

using a single word that can effectively describe a whole sentence can be a more 

efficient means of communication. 

Computer languages are similar in this way, each language is developed to run 

efficiently under certain conditions and circumstances yet the same language may 

perform less efficiently under a different set of circumstances. 

What qualifies as an optimal environment for a computer's programming 

language is something that the developer of that language will have to define. An 

environment in this sense could be an operating system, the world wide web, a 

network, or a combination of these environments. This could also be a large 

contributing factor, possibly explaining why there are so many different computer 

languages currently in existence each with it's efficiency optimizations for 

specific “environments”. 

Currently Wikipedia lists approximately 661 popular computer languages and this 

number is constantly growing compared to it's listing of 540 currently spoken 

languages (not including their derivatives). Of course there have been many more 

Abstraction 13


spoken languages throughout human history, The Cambridge Encyclopaedia of 

Language estimates this number to be between 3000 to 10000, but then again 

what actually qualifies as a language is a whole other topic for discussion in itself. 

Computer languages share in this ambiguity. Throughout the comparatively short 

history of computer languages, which can arguably be traced as far back as the 

first programmable computer, the Z1 invented by Germany's Konrad Zuse in 

1938, programmers have seen languages raise to popularity and become virtually 

obsolete, one such language is LISP. LISP was in many ways synonymous with 

Artificial Intelligence (AI) from the mid 1950's till the early 1970's but gradually 

gave way to a dwindling numbers of devotees, who where lured by new 

programming paradigms such as object oriented programming and other higher 

level programming language concepts, which we will explore in greater detail 

later. Although this language never really died, some would say it became 

somewhat antiquated. Nonetheless, LISP started to regain popularity in the mid 

1990's in a new implementation currently known as Common LISP. Determining 

whether a programming language closely based on a previous programming 

language should be considered a new language that is able to stand on it's own, 

can be a difficult distinction to make and can add considerably to the ambiguity 

around what defines and distinguishes one computer language from another. 

Processing too, has been subject to this topic of debate as it's roots in the 

programming language Java have seen it referred to as a library for Java while 

others identify it as stand-alone programming language. 

Regardless of whether a programming language derived from another can stand 

on it's own or not one of the key factors that determine it's popularity, and 

ultimately contributes to a following of devotees that develop and maintain the 

language, is the language's ability to achieve a balance of being fast enough for a 

computer to process but easy enough for a human to read. It is this balance that 

currently determines the efficiency of a computer's programming language. 

Disambiguation 

Computers tend to be very literal. They accept specific instructions more readily 

than vague descriptions of what you are hoping to achieve with their help. Such 

that a statement like the above mentioned, and repeated below: 

“... draw a circle that has a diameter of 55 pixels and who's 

Abstraction 14


center is somewhere close to the top left of my screen...” 

would not be as effective as the statement: 

ellipse(56, 46, 55, 55); 

The first statement although a perfectly acceptable command issued in English, 

would fail dismally when translated directly into computer-speak for several 

reasons relating to the ambiguity associated with it. 

Firstly the longer a command tends to be the more prone it is to incorporating an 

erroneous syntax. Computers are very specific about the type of syntax you use to 

communicate with them. Syntax in terms of the English definition is the particular 

arrangements of words making up a sentence. In computer terms, syntax has a 

very similar meaning but is even more relevant and specific in it's 

implementation. Words must follow a particular sequence within the context of a 

command issued to a computer determined by the language you are currently 

programming in, and may not be rearranged into various discourses simply 

because you find them to be more meaningful. 

Computers have truly amazing mathematical capabilities and predictably 

congruent mediocre social skills. Subsequently concepts such as circles and 

squares which are simply mathematical concepts abstracted for human 

convenience have little or no relevance to a computer. For example if you were to 

consider that a circle, as per another description, could be an ellipse with 

equidistant radii to each point encompassing it's edge; or technically speaking a 

square is actually a rectangle with it's height equal to it's width. Descriptive 

abstractions such as these for human convenience are in fact very inconvenient 

for a computer, and as a result in Processing we refer to a “circle” and an “ellipse” 

using Processing specific syntax that removes the ambiguity and abstraction for 

the convenience of a spoken language and groups them into the same context. 

Subsequently if we want to describe a circle we refer to it as an ellipse with equal 

dimensions in height and width or more specifically: 

ellipse(56,46,55,55); 

Finally I'm sure that if computers had a sense of humour, they would find our 

former description of the location of our circle “ somewhere close to the top 

Abstraction 15


left of my screen” to be somewhat uninformed and laughable, not to mention 

words such as “somewhere” and “my” which might condition a response 

equivalent to that of an existential dilemma for a computer. If you supply a 

computer program with specific screen positions in terms of x, y and z and 

dimensions in terms of width, height and depth either communicated explicitly or 

implicitly through an expression (which is something we will discuss in more 

detail later) you will find your programs to have more predictable and efficient 

results and would help to remove ambiguities that could lead to errors. Screen 

space and dimensions are concepts we will be dealing with in more detail in later 

chapters. Of course there are times when randomness and unpredictability are 

desirable qualities in a program, in which case no other resources available to 

man can produce a series of unpredictable results more efficiently than 

computers. This is a testament to why people devotedly invest in computers to 

provide the sequence of random digits that could potentially make casinos loose 

millions upon millions to gambling patrons. 

Computers, and subsequently software are used in various fields of medical technologies 

where predictability is of the utmost importance. Gambling machines also use software 

but in contrast to medical software predictability in the application of the software, is an 

undesirable effect for the machine owners. 

Abstraction 16


The Unique Qualities of a Programming 

Language 

At the simplest level a programming language should be Turing complete. Turing 

complete refers to a set of data manipulation rules that, can simulate a Turing 

machine. This begs the question to be asked, who is Turing and what is his 

machine? 

Alan Turing was a British mathematician that is heralded as the father of 

computer science. He lived from 1912 to 1954 when he died at the age of 41. 

Turing is responsible for creating the Turing machine which is a theoretical 

device that operates with a strip of tape imprinted with an infinite array of 

symbols, the machine is able to read a symbol and alter the symbol and the 

symbol in turn affects the behaviour of the machine. The tape that the symbols are 

printed on represent memory and it can move back and fourth so that any symbol 

can be read by the machine and altered by it, additionally at any given time a 

symbol is affecting the state of that machine. 

Turing referred to this machine as an "a(utomatic)-machine" and it forms the 

fundamental logic of all computer algorithms. This principle is still used in 

modern computers. A programming language that is Turing complete complies 

with this logic, and will subsequently be able to run on all computers based on the 

Turing machine. What this simply means is that programming languages will 

need to be able to run on a basic computer system that at the very least has a 

Central Processing Unit (CPU) that is based on the Turing machine, which 

includes all known operational computer models. 

Quantum computing models are commonly based on the quantum Turing 

machine also known as the Universal Quantum Computer, and even these models 

can be related back to the classical Turing machine. Quantum computing models 

are theoretical models of how a quantum computer could work once the 

technology can be implemented, in much the same way that the Turing machine 

was a theoretical model of today's modern computer before it's current 

implementation. 

The Unique Qualities of a Programming Language 17


Alan Turing (1912 - 1954) is heralded as the father of computer science 

What about speed, efficiency and dis-ambiguity, are these not also amongst the 

unique qualities of a programming language? 

Simply put, no they are merely guidelines that programmers may or may not 

adapt into the computer languages they develop. However, most useful 

programming languages will in some form or another adapt these standards into 

their design. There is another form of computer language development that does 

not comply with these standards, but the languages that develop from this field do 

still comply with Turing completeness, as without this design implementation it 

would not be possible to run the language on a computer modern or old. 

This field of computer science is referred to as esoteric programming languages. 

Esoteric programming languages usually are not designed to be useful for realworld 

programming situations but are usually more popular among hackers that 

develop these language to test the boundaries of computer programming language 

design. 

A relatively well known example of an esoteric programming language is the 

language known as brainfuck . Brainfuck is known as a Turing-tarpit language as 

it still qualifies as a Turing complete language even though the entire language 

consists of only 8 commands and no operands. We'll be discussing what exactly a 

command is shortly and what an operand is a bit later, but needless to say this is a 

language that is still functional with a bare minimum of interfacing protocols. An 

example of a “hello world program” (yet another concept we will get to a bit 

later), which is a program that simply prints the words “hello world” to the screen 

in brainfuck code follows: 



++++++++++[>+++++++>++++++++++>+++>+. 

LOLCODE is another example of an esoteric programing language that is based 

on the text within lolcats images. Lolcats are images of cats that circulate the 

Internet, often in cute and whimsical representations. These images are 

accompanied with text that is generally idiosyncratic and grammatically incorrect 

with the intent to contribute humour to the image. 

An example of a typical lolcat image 

An example of a Hello World program in LOLCODE follows: 

HAI 

CAN HAS STDIO? 

VISIBLE "HAI WORLD!" 

KTHXBYE 

As you can see the language uses what is typically termed as “lol-speak” as an 

integral part of it's syntax and keywording. 



Lower Level Languages and Higher Level 

Languages 

Generally speaking higher level programming languages are closer to human 

spoken languages and lower level programming languages are closer to machine 

code, or binary. However this classification might not always be so clear. C++ is 

one language that some might argue challenge this programming language stereo 

type. C++ is a programming language that has all the features that one would 

expect from a higher level language such as an easy to read syntax, object 

oriented programming and extensive collections of libraries to add to the 

language's capabilities but also has other features that are not commonly found in 

higher level languages such as memory management, user defined operator 

overloading, six different integer datatypes and a plethora of compilers to choose 

from. As a result many refer to C++ as a mid-level programming language. 

For Processing this distinction is currently not so difficult to make. Processing is a 

high level language, meaning it has an easy to read syntax, supports modern day 

programming concepts such as Object Oriented Programming, has it's own IDE 

(Integrated Development Environment something we will become more familiar 

with throughout this guide) and fundamentally it abstracts a lot of machine 

specific interactions for us making the code more readable for humans. 

However, it's worth considering that the terms “higher” and “lower” level 

programming languages are relative to the time period in which they are used. For 

example when the programming language C (that C++ is based on) was first 

introduced in the early 1970's it was considered to be a high level language as it 

supported such features as expression evaluation and datatyping, both of which 

are programming concepts common to most modern day programming languages. 

As technology progresses, new concepts become common place and rapidly 

replace older more cumbersome programming designs, till we get to the point 

where there are far less people that would refer to an older language such as C as 

being a high level language and a lot more people that would refer to it as a low 

level language, lacking modern abstractions and less direct hardware interactions. 

Processing might one day, also be subjected to such a topic of discussion. 

Lower Level Languages and Higher Level Languages 20


Following is the C version of a “Hello World” Program: 

#include 

int main(void) 

{ 

printf("hello, world\n"); 

return 0; 

} 

The level of abstraction that is needed in order for a language to qualify as a 

higher level programming language does not come without it's penalties. Lower 

level languages, because they are conceptually closer to machine code are 

considered to produce more efficient machine readable code, of course this is 

largely dependent on the programmer creating the code. As mentioned before the 

greater the level of abstraction of the code, the more stress that is placed on the 

machine interpreting the code, and subsequently more system resources are 

required. As a result of this cycle higher level programming languages generally 

cannot run on systems where resources are limited. Initially, this might not seem 

like such a big issue to you, but have you ever considered the amount of 

technology running on limited resources like a television, fridge, GPS, mobile 

phone, remote-controlled air-conditioner, electronic toys, media players and the 

list goes on...? In fact if you were to think about it there are not many devices like 

computer workstations, laptops or computer servers that are designed to have 

their resources, available to the software that runs on these machines, extended. 

Yet, even these machines have their limitations. 

Ultimately software, whether it is designed with a high level or low level 

programming language, should always take into consideration the possible 

limitations of available system resources. 

Lower Level Languages and Higher Level Languages 21


An Analysis of a Computer Program 

As we are already aware Binary is a conceptual model that people have invented 

to represent the workings of a machine. Binary resultantly forms the basis of all 

software because as mentioned earlier no matter what programming language you 

use that code must be translated into a machine readable format before it can be 

interpreted by a machine, the product of this translation is usually represented as 

binary code. 

Computer Software is conceptual and intangible as opposed to hardware which is 

tangible such as a motherboard, a CPU, an optical drive or a monitor. As a result 

the word software is intentionally used to contrast the term hardware. 

Programming is a means of creating software and a computer program is a type of 

software. Specifically, a program is a set of instructions issued to a computer in a 

programming language, such as Processing. These instructions are usually made 

up of one or many statements. Depending on what language you are programming 

in statements can consist of several different parts, such as 

• expressions 

• commands 

• assignments 

• comparisons. 

Statements can also be made up of many other parts not mentioned here, but for 

now we are most interested in two of these components making up a statement, 

commands and expressions, the rest we will get to later. 

An Analysis of a Computer Program 22


Commands 

If you were to compare a statement in computer programming to a sentence in a 

natural language, a computer programming statement could be considered to be 

somewhat imperative. For example the following sentence in a natural language: 

“Run, as fast as you can!” 

This would be an imperative statement in English issued to the implied subject. In 

extending this comparison, a verb in an imperatively spoken sentence would have 

the same purpose as a command in a programming language. A command in a 

programming language usually implies a directive issued to a computer, in other 

words it's a means of telling a computer to do something. In Processing we often 

use functions to tell a computer what to do, a function in this sense is a type of 

command. Functions are the building blocks of Processing programs, as you will 

come to see. Additionally many functions in Processing accept parameters, which 

modify how the function is interpreted the program. 

If we were to extend on our previous example and apply this programmatically, 

the word “Run” in the sentence would be a function and “as fast as you can!” 

would be representative of a parameter. 

Expressions 

Expressions in computer programming languages can consist of single or multiple 

different types of data such as numbers, typographic characters and many other 

types of data that can be interpreted in various ways according to rules established 

by the language you are programming in. The process of how this expressional 

data is interpreted is known as evaluation and is similar to the term as it is used in 

mathematics. For example 3 + 2 is an expression that evaluates to 5. 

Mathematical operators such as +, -, *, etc. work in Processing, as you would 

probably expect them to. As the term implies the programmatic mathematical 

operator is often interchangeable with the standard classical mathematical 

operator in Processing. For example the statement in Processing: 



println(5+3); 

Consists of two parts, first the function println() which accepts a parameter. In 

this case the second part of the statement, the parameter, is an expression and the 

expression is 5+3 which evaluates to 8. 

One of the basic features of Processing is it's ability to act as a calculator when 

computing values separated by mathematical operators such as + (plus), - (minus), 

* (multiply), / (divide) and % (modulus). But this inherent ability of Processing 

extends a lot further than simply evaluating numerical expressions, as expressions 

amongst other types of data can also consist of other typographic characters that 

can be evaluated. For example the statement: 

println(“h” + “i”); 

This statement evaluates to “hi”. Using a mathematical operator in this way is 

known as operator overloading and is an inherent quality of Processing that 

comes from it being a C based programming language. Operator overloading is a 

common feature in higher level languages and simply refers to the level of 

abstraction built into a higher or mid level programming language that allows us 

to use the same operator in more ways than one. For example the plus sign can be 

used to add numbers or other typographic characters, but not numbers and 

characters at the same time without the use of a process known as typecasting 

(which we will cover in more detail later). 

What makes operator overloading so useful is that we often don't need to be 

aware of it, because the way that the operator is used will be determined by the 

context in which the programmer has used it and this is something that the 

program converting our human readable code into a version that is more machine 

readable will handle for us. 

An example of operator overloading and typecasting in Processing's PDE 



A Scalable Software Development Model 

Programming is only one of the steps required in the process of developing 

software. Establishing a scalable model for software development will help you 

determine what the requirements of the project are before programming begins. 

As you start developing larger programs this development model can be scaled to 

help you allocate your time appropriately to the various needs of your project, and 

ultimately contribute to more realistic deliverables within a predictable timeframe. 

The idea behind a scalable software development model is that it can be 

adapted to suit any project large or small. Although certain areas might require 

more focus than others dependent on the project you are working on, having an 

established software development model can contribute to a progressive workflow 

that does not stagnate when difficulties within a project are encountered. 

1. Plan 

• What are the goals for the project? 

• How would you ideally like to implement these goals? 

• Have there been similar projects undertaken by yourself or others, if so is 

it possible to obtain those implementations? 

Asking yourself similar questions following this line of thought can help you 

visualize the steps, leading to your goals, that need to be taken well before 

programming begins. 

This process of visualization contributes to creating a conceptual sketch of the 

project as a whole and in it's completed form. This idea can then serve as a means 

of deconstructing the main concept into smaller workable objectives. 

Planning your project through conceptual visualization should be supplemented 

with a few rough ideas jotted down on a piece of paper. It's not uncommon to 

spend days and sometimes longer periods of time conceptualizing a project before 

considering trying to implement any of these ideas. 

Depending on the complexity of your project, you may have to further refine the 

process of breaking down the smaller tasks into even smaller tasks until you reach 

a task or set of tasks that are achievable in the short term. Often these short-term 

objectives will not necessarily relate directly to programming but rather to a set of 

A Scalable Software Development Model 25


questions that need to be answered before the implementation of the project can 

begin. These questions that you derive from planning your project will form the 

basis for the research that follows planning. 

Examples of an abstraction, followed by a deconstruction and finally a technical 

overview of a project plan. 

2. Research 

Addressing the details of how you see your project being implemented should 

bring certain technical questions to your attention. Questions such as, 

• What is the target system you would like your software to run on? 

• Will my software require additional resources such as plug-ins? 

• Can the software also be distributed for both online and offline usage? 

These are amongst many questions that you might not be able to answer in your 

own capacity. The Internet is a seemingly endless resource of information and 

probably your best bet when it comes to answering these and many other 

technical questions you can think of. 

Research might also reveal that the code you are interested in creating might 

already exist. If the code is distributed under a license that permits you to reuse it, 

then by all means you are encouraged to do so. It is often said that up to 80 

percent of a programmers time is spent maintaining already developed code. 

What this means is that generally developers will spend a comparatively small 

amount of their time developing their own code from scratch and far more time 



adapting and modifying already existing code to suit the needs of their projects. 

Finally researching your project can also reveal useful sources for data 

acquisition, which will be particularly helpful in the fourth phase of your 

development model. 

The various sites on the Internet have vast resources of reusable code 

3. Mockup Designs 

Once you have answered the questions you had about implementing your project 

consider returning to the notes you created during the first phase of Project 

Planning. With the new information you have derived through your research, 

refine your ideas into graphical representations of your program. 

By now you should have a clearer idea of what your end product should look like. 

Avoid prematurely designing your project only to realize your goals where not 

realistic given a particular time-frame or some other design flaw, following this 

development model in the predetermined order will help avoid such a situation. 

Use the mockup design phase of software development to start drawing out 

conceptual sketches of your program, in the form of schematic diagrams that 

outline the program's flow of control (which we will discuss in more detail in Step 

8) and map out the user experience you hope to achieve. 

If your software is visually oriented you may wish to create more detailed and 

specific designs of your application, for example by designing an interface for a 

data visualization program or designing a theme for an online game. Consider 

how your designs can contribute to making the user's experience more immersive. 

The design phase of software development can also help to identify and even 



solve how programmatic implementations of visualizing data might be addressed 

through various programming methodologies. 

Mockup Designs should include some rudimentary visualizations of the final project and 

schematic diagrams detailing the program's flow of control. 

4. Data Acquisition: Sourcing the data needed 

for your project. 

Obtain all the data you need to create your software, this data could include 

statistical information from books, tabulated data from a website, printed lists of 

sales from business owners or even screen-scraped data. 

Screen-scraping data is a technique that has been in use for many years and is 

used to acquire data from new and old computers alike. In modern times one of 

it's most common implementations involves the process of acquiring data that is 

in no particular standardized format and commonly sourced from from an html 

page of a website. The idea of screen-scraping is that data exists remotely from 

the program you are creating, in a format that your program cannot process. As a 

result you may need to write another program that serves as an in between 

application converting the remote data from an undesirable format to the desired 

format of the main software program you are developing. 

Screen-scraping is a technique of data acquisition that is differentiated from 

parsing, as the data that is being acquired is not intended for another software 

program but often intended to be read by a human. Parsing data is something that 

happens much later in the software development process and relies on proper data 

acquisition. Parsing data is something we will discuss in more detail during the 



seventh phase of the software development model. 

Acquired data might be in the form of a spreadsheet, a text document, images and many 

other different formats that might not, even at this stage, be digital. 

5. Filter 

Filtering data is simply the process of removing all components of your data that 

are not necessary for the proper functioning of the main program. If your data is 

in a Processing friendly format such as tabulated data, a multi-line text file, a 

comma separated value text file or other similar format the process of filtering 

data could be as simple as selecting those components (including spaces and new 

line characters in a text file) and deleting them. However, if your data is not in a 

Processing friendly format you might have to spend quite a bit of time filtering 

out data that is not relevant to your program. 

6. Clustering and Data Mining 

Data mining is the process of identifying patterns within the data you have 

acquired. The purpose of doing this is to place the relationships that exist between 

the various aspects of your data in a more mathematical context that can 

ultimately be used programmatically (in the program you are developing). 

Data mining can be done manually or it could be automated. When dealing with a 



small data set with a high ratio of inconsistent data types, manual data mining 

could be more effective and save you some time. 

For example, lets take a hypothetical situation where the owner of a small café 

has asked you to determine what items a customer is likely to purchase together. 

The data set you have acquired consists of all the items customers have purchased 

in the store over the past year. From that data you could determine that goods can 

be divided up into food, drinks, magazines, stationary etc, and then into even 

smaller groups like fruit, vegetables, soft-drinks etc. Identifying these groups 

would be the first step of data mining and is a process also known as clustering. If 

the café has a large variety of items to choose from the clusters making up the 

data could resultantly be numerous, yet the data set as a whole is actually quite 

small, only consisting of a single year of purchased items. 

In contrast a more established café that has been operating for several years 

proposes the same question to you. In the case of the smaller café groupings of 

purchased items would yield a lower probability of repeating in a shorter period 

of time. In contrast the more established café has a better chance of the same 

groups of items being purchased together over a longer period of time. 

In the former case manually mining this data set could be more effective because 

of the lower probability of the same items being purchased together in a relatively 

short space of time. In this scenario the majority of your time would be spent on 

clustering and populating the resultant groups after eliminating the majority of 

items purchased in that year because they will not fall into any cluster. 

However in the case of the established café although there may be just as many 

clusters the values that these clusters are populated with have a higher probability 

of being repeated, it might therefore be more efficient to have a computer 

program count, cluster and mine the data. 

Regardless of whether you choose to manually mine your data or have a software 

program do the work for you, you should have a set of data at the end of the 

process that can be manipulated programmatically. 



Raw Data 

Manual Clustering 

Digital Results 

The process of getting external data into a program, via clustering and data mining. 



7. Parsing 

The process of transferring data from one computer program to another program 

that requires the data in a specific format that is different to the original format, is 

referred to as parsing data. The program that converts the original data to an 

acceptable format for the main software program to process is referred to as a 

parser. Parsing in Processing should return a set of data that your main program 

can read directly in a text file, a spreadsheet or other such data format that does 

not require any further levels of un-abstraction. 

Sometimes, the decision to write a parser might not be an easy choice to make. 

Weigh up the amount of time you think it will take to manually convert the data 

(as illustrated in the above diagram) compared to the amount of time it will take 

you to develop a parser, along with it's overall usefulness (as a parser can 

sometimes end up being specific to one application) and try to make an informed 

decision based on these factors before jumping head first into the task at hand. 

8. Determining Flow of Control through 

Stepwise Refinement 

A program's flow of control refers to the order in which statements are run within 

in a program. The results of these statements can ultimately determine how a user 

interacts with the program by means of various branches of code structures within 

your program that the program determines whether to execute or not based on the 

choices the user has made through interactions with the program. 

Branching is an important part of a programs flow of control as it allows your 

program to determine, through a logical decision, what path to take within your 

program's code based on various circumstances you have defined for the user. 

Planning the program's flow of control allows us to address what we would 

ultimately want our users experience of the program to be, and the best place to 

start with this process would be to write out a list. This list should contain a set of 

instructions that determine how you would like the program to work and 

ultimately describe a user's experience of interacting with the program. Once you 

have this information remove unnecessary clutter from the list and identify the 

key points, keep it concise and short. Once you have this list keep refining it until 

you have something resembling a step by step process of the tasks the program 

will eventually perform. 



An example of such a list for a guess my number game follows: 

1. Start the game and generate a random number. 

2. Render the space scene interface including a slider, 

spaceship and a panel to show user's guesses which are 

either too high or too low. 

3. Click and drag the slider and a number is displayed 

indicating the users current guess. 

4. When the slider is released the user's guess is made 

5. If the guess is the same as the random generated number, 

show the “win screen”. 

6. If the guess is too high, tell the user the guess is too 

high and increment the number of user's guesses. 

7. If the guess is too low, tell the user the guess is too low 

and increment the number of user's guesses. 

8. If the user has not guessed the number within five tries, 

show the “lose screen”. 

Your list at this stage should start to read more like a program rather than a 

paragraph written in a natural language. This resemblance is no coincidence and 

forms the basis for the process programmers use for developing what is known as 

pseudo code. Pseudo Code is somewhere between a programming language and a 

natural language and forms the basis for stepwise refinement. During stepwise 

refinement rewrite your list so that it resembles something closer to the code of 

your program each time the pseudo code is refined. 

A Pseudo code example for a guess my number game might look something like 

this: 

choose a random number between 1 and 100 

set the number of user guesses to 1 

get the user's guess 

while the user's guess is not equal to the random number and less 

than 5 guesses 

if the guess is too high 

tell user “guess too high” 

increment user guesses 

else if the guess is too low 

tell the user “guess too low” 

increment user guesses 

if the number of guesses is 5 or greater user has lost 

else if the guess is equal to the random number 

user has won 



9. Implement, Test and Document. Repeat. 

Implementation is the phase of software development where the actual source 

code is created, by means of programming. 

As the code is created it should be constantly tested. This helps to identify bugs in 

the program during current implementation or that could occur in the future 

development of the software. 

While implementing and testing a program it is important to document the steps 

taken to achieve the goals of the project. This could either be done in a 

comprehensive form of external documentation but should always include 

documentation within the code itself in the form of comments and multi-line 

comments. 

This phase is repeatable and should be constantly updated by the recursive nature 

of it's design which should eventually lead to a erroneous free implementation of 

the software. 

Comments in Processing start with the // characters and multi-line comments in 

Processing start with the /* characters and end with the characters */ 



10. Deliver 

Once the software has been thoroughly tested it should be delivered. Delivery 

could involve something as simple as uploading the software to a website, or as 

complex a task as marketing and selling the software. However you deliver your 

software, you should always accommodate for the delivery phase of the project 

uncovering unforeseen bugs and errors in the software as users test it on systems 

that differentiate substantially from that of the systems it was tested and 

developed on. As a result maintenance is a crucial part of delivery and an 

appropriate time-frame should always be allocated for it within software 

development. In some dire situations an entire redesign of the software might be 

deemed necessary during the delivery phase, in this case allocating a specific 

time-frame for software maintenance might not be adequate to accommodate the 

requirements of the development of the software. 

There are various options for publishing your software, once it is complete. 



Why Learn Programming using Processing? 

Processing covers a lot of ground as it is a great way to learn programming for the 

novice and for the experienced programmer provides a fast and efficient approach 

to developing advanced applications. 

Code for Artists 

Processing is built with the intent to be a tool for creating visual and interactive 

representations of code. This means that it is not as generic in it's application such 

as a programming language like C++ which can be used for engineering, 

mathematics, scientific applications and even games development but which also 

has it's limitations as it is generally not used to create online applications that 

might appear on a website. Processing is built for specific fields of interest and as 

a result less coding is needed in Processing than might be required in more 

generic programming languages when developing programs that are suited for the 

Processing environment, such as data visualization, interactive online 

applications, animation and many other similar fields. This is not to say that 

Processing is limited to one particular genre of application, but merely to say that 

Processing provides a set of tools that make the process of creating certain types 

of applications easier. 

Processing has developed since 2001 initially as an extension to a programming 

language, then to a prototyping tool and to it's current implementation of being a 

fully developed programming language that continues to develop in fields such as 

microprocessor programming and physical computing where it has gained much 

recognition. 

Java Based 

Processing was originally developed as an extension to the Programming 

language, Java and it's roots in Java are still evident today even though Processing 

is a language on it's own. Processing's relationship with Java has many benefits, 

the two languages share a similar syntax except that Processing can make visual 

representations of your code easier to create than Java can (which is more generic 

in it's scope of application). Java shares a lot of similarities with the programming 

Why Learn Programming using Processing? 36


language C (from which it was originally developed) and Java is also one of the 

most popular languages currently in use. If you are familiar with Java or C++ 

(which is closely based on C) learning Processing should come quite naturally to 

you. 

The Java programming language is a popular language for software development 

and is almost entirely open source. 

C++ is a widely implemented language, as it is available on many popular platforms 

Open Source 

The Processing PDE (which is used to develop Processing code and is something 

we will discuss in more detail later) is Open Source Software and it is released 

under the GNU General Public License. 

You've probably heard the term “open source” before and are aware that it relates 

to something “free”, but are you aware that the term “free” as it is used in the 

context of open source does not necessarily have anything to do with money or 

the absence thereof? 

The term “free” within the context of open source refers more to a philosophy or 

methodology rather than a monetary reference and as such is akin to the term 

“freedom”. However as the idea of open source has expanded in modern day 

society it is often come to be synonymous with something that is also free of 

monetarily related costs. Processing is no exception to this, it does not require a 

costly software license such as proprietary software vendors require for the usage 



of their products. Anybody can use Processing and the PDE, modify it, 

redistribute it and the GNU General Public License ensures that the Processing 

PDE will always remain free. 

So because Processing is free what about the content you create with Processing 

does that also have to be “free” and open source? 

The answer to this question is and will remain to be, no. The content you create 

with Processing belongs to you, the creator, and you are free to do with it 

whatever you please. If you wish to sell the software or code that you produce 

with Processing it is your right to do so. If, however, you do not wish to sell your 

work and subsequently do not choose to copyright your work there are various 

options available to you to protect you and your work. Amongst these licences is 

the GNU General Public Licence which protects the rights of developers of 

computer programs that wish to ensure that the software they develop remains 

free, including all derivatives that are made from the original software program. 

Another such licence is the Creative Commons Licence, this licence allows 

creators of media to reserve some rights of their work (if they choose to) and still 

legally allows the copying, redistribution and modification of such media if the 

author chooses to exercise these rights. Wikipedia is an example of a large scale 

organization that licenses it's contents under a Creative Commons Licence and 

Linux is an example of popular software that is licensed under the GNU General 

Public Licence. 

The GNU GPL 3 logo as started by the Free Software Foundation on the left and a 

Creative Commons logo on the right both of these trademarks have become synonymous 

with the term “copyleft”. 

PDE 

An IDE is an acronym for Integrated Development Environment, it refers to a 

software application that is used to develop code for a computer programming 



language. Processing has it's own IDE called the PDE or Processing Development 

Environment. 

The PDE is a popular tool for developing Processing Sketches but the popular IDE 

Ellipse is also quite readily used too. 

Of course all code is simply text, so why can't we call any text editor an IDE? An 

IDE such as the PDE generally has several special characteristics that separate it 

from other software applications. 

1. Source Code Editor 

2. Build Automation Tools 

3. Compiler and/or Interpreter 

4. Debugger 



Source Code Editor 

A source code editor is a textual editor within an IDE. The Source Code editor in 

an IDE is designed specifically for programming purposes and not for wordprocessing, 

so generally text formatting capabilities such as bold, italicising 

characters or directly editing characters colors is not permitted within source code 

editors. 

The source code editor within the PDE allows you to type code, and access Processing's 

API. 

Modern day source code editors use color codes to distinguish different types of 

data, this is referred to as syntax highlighting and it helps to make code more 

human-readable. 

Build Automation Tools 

Programming can involve many repetitive tasks, build automation tools help 

programmers perform these repetitive tasks by use of tools built into the IDE. 

They might include the IDE's ability to convert source code to machine readable 

code with the click of a single button (the button being the build automation tool) 

or the ability to export your source code to multiple platforms with a menu 



selection. In the PDE several build automation tools for creating Processing 

applications can be found under the Tools and Sketch menus more generic build 

automation tools can also be found in the other menu's in the PDE. 

Some of Processing's build automation tools. Processing's build automation toolset can 

also be extended by downloading tools from processing.org/reference/tools/ 

Compiler and /or Interpreter 

Most modern day IDE's have a compiler and/or interpreter, as this is the feature 

within IDE's that enable the conversion of source code to machine readable code. 

It is in this feature that our code is given a “meaning” for a computer to 

implement and for us to observe, interact with and experience in what ever it's 

intended form of implementation. 

You might be wondering at this point what exactly is the difference between a 

compiler and an interpreter? 

The truth is that there is actually not much of a difference between what a 

compiler does and what an interpreter does. The terms stem from a “Compiled 

Language” and an “Interpreted Language”. As mentioned before in order for a 

computer to make any sense of our code it needs to convert this code into a 

machine readable format, this process of conversion is referred to as compiling. 

The process is specific because the code must be fed into a compiler in a specific 

language and then be compiled into another “language” which is no longer 

human-readable but machine readable and specific to a particular platform. A 

compiler is said to perform this task on the entirety of the source code once so 

that when the program is compiled there is no more conversion or compilation 

that needs to be performed there after. 

An interpreter differs in the sense that the source code is not compiled into a 

specific machine readable format. So how does the code run on a machine? The 

code is passed to an interpreter (which is another software application) that runs 

the code. The interpreter then determines how the code should be run 

continuously translating the code from a higher level to a machine readable level 



each time the code needs to be executed. 

Of course at some point in order for the code to be run on a computer it has to 

exist in a machine readable format regardless of whether it's compiled or 

interpreted, so theoretically the difference between the two methods is not 

inherently specific to the language you are creating the code with but rather more 

to do with how a language is implemented. What this means is that any language 

could be interpreted or compiled, it's how the code that you create is implemented 

that determines whether that code will be compiled or interpreted. 

Processing compiles to Java bytecode, and can subsequently run on any Java 

enabled machine it is estimated that there are currently over 4.5 billion Javaenabled 

machines. Java is said to be an interpreted language. 

Processing compiles your Sketches to Java Bytecode and uses the Display Window 

(foreground) for testing and development. 

Debugger 

A debugger in the context of an IDE is software that examines code either as a 

part of the compilation process or before compilation or interpretation in order to 

reduce the number of bugs within a program. The term bug in relation to 

computer programming is used to describe an error, fault or some means of a 

computer program acting in an unexpected or unintended way. The process of 



debugging a program is intended to identify these bugs and in some cases assist 

the programmer in rectifying them. In the PDE the debugger console can be found 

below the text editor and is used generally for debugging one's own program or 

allowing the PDE to determine bugs within a program. 

The Debugger console (also known as Message and Text area) can be used to identify 

bugs and track program variables which can be useful in identifying logical errors. 

Active Online Community 

Processing is not a stagnant language it is very much alive and growing. The 

Language's development is rapid but not so rapid that it becomes difficult to keep 

up with. A lot of this development can be attributed to the active community that 

support the project. 

If you are in need of any help with programming in processing, want to keep up to 

date with it's development or just simply want to play around with programs made 

with Processing online then I recommend you visit http://www.processing.org 

The forums are really easy to use and you are encouraged to ask questions, as 

there seems to be many people out there that are keen on helping you develop 

your software. 

The latest version of Processing can be downloaded at http://processing.org/ 

download 

The Processing logo is a trademark of processing.org 



Hello Processing 

Now that we have an idea of what programming is and how we will be using the 

PDE to create our own code in Processing lets start coding! 

Install Processing 

Once you have downloaded Processing, depending on your platform you might 

need to install it or just simply uncompress/unzip the package to a location on 

your hard disk drive and run it from there. Open the processing root folder inside 

which you will find an executable file called processing, double click this file to 

start the PDE and you are ready to start programming with Processing. 

If however you are unable to run the PDE check that you have permission to 

execute/run the processing file and that Java or more specifically the JRE (Java 

Runtime Environment) is properly installed. 

It is recommended that you use the Java version that is available from Sun 

Microsystems (a subsidiary of Oracle), alternative open source versions of the 

JRE and Java Development Kit (JDK) such as OpenJDK do exist but are currently 

not recommended with Processing, however this might change at some point in 

the future, see the Processing website for updates. 

You can get the latest version of Java from http://www.java.com/getjava 

Sketches 

A program created in Processing is known as a Sketch. Processing Sketches are 

stored in a folder called the sketchbook folder. Being able to identify the location 

of this folder will be useful particularly when adding external data to a sketch. To 

identify the location of the sketchbook folder within the PDE click: 

File → Preferences → “Sketchbook location” 

In the Preferences dialogue box the sketchbook folder can be identified under the 

heading “Sketchbook location” or changed by clicking the “Browse” button and 

navigating to and choosing a new location under the same heading. 

All Sketches you create should be stored within your sketchbook folder. 

Hello Processing 44


Hello World Program 1.0 

Programming can be simple or very complex depending on what you are hoping 

to achieve. Since this is our introduction to programming we'll be following 

programming tradition and starting with a simple Hello World program. A Hello 

World program is a program that simply prints the words “hello world” to a 

display, that display in our case in the “Hello World 1.0” program is going to be 

the debugging console in the PDE. The purpose of the Hello World program is 

not as much to impress but rather to get a firm grasp on the key points that make a 

successful program and then to later expand on this understanding. 

If you have not already done so open the PDE and start a new sketch. You can do 

this by clicking 

File → New 

Save the sketch in your sketchbook folder 

File → Save As... 

Give the sketch a unique name that you will remember. 

In the text editor of the PDE create the Hello World 1.0 program by typing 

println("Hello World"); 

Press the “Run” button in the PDE which looks like a play button, or ctrl-r on 

your keyboard. The PDE checks, compiles and executes your your program. If all 

has gone well you should get a result similar the following image. 

Hello World Program 1.0 45


The typical “Hello World” program is many a programmers first attempt at coding. 

If your console window has the phrase “Hello World” printed in it, 

congratulations you've successfully completed the Hello World 1.0 program! 

Like I said earlier, don't expect to be impressed right away, building a more useful 

program is going to take a little more practice. Nonetheless let's have a look at 

what is going on here. 

Firstly you'll notice that the text editor has formatted the text we input in different 

colors. 

The colors denote specific meanings in Processing, for example in our Hello 

World 1.0 program: 

Orange 

Orange is used to identify a command. 

Black 

Black identifies syntax formatting characters such as parenthesis and a statement 

terminator. 

Blue 

Blue identifies a string of data. 



IDE's such as the PDE that use syntax highlighting make reading code easier to 

decipher and once you get familiar with what the colors represent you'll find 

yourself separating the code you are reading into smaller manageable chunks by 

identifying the colors that serve specific functions. 

We refer to the sentence typed in the text editor as a statement. Statements are 

easy to identify because they always end with a semi-colon and not with a period 

(like in English). Our entire Hello World 1.0 program consists of only one 

statement which in itself consists of only one command. 

Processing is a case sensitive language so it is very important that when you type 

a command you do not mix it's casing because println() and printLn() will not 

yield the same results, in fact the latter will cause an error. 

The println() function 

println() is a special type of command called a function. 

Sometimes a function is also referred to as a subroutine so how the term is used 

from one language to another may vary but regardless of what you call it the 

purpose of a function is generally the same in any programming language, a 

portion of code (usually a single word followed immediately with parenthesis) 

that exists within a larger body of code (in our case this could be the sketch we 

are creating) and performs a specific task within the context of the program but is 

also independent of the program. 

As you are aware, we have not defined the function println() we are just simply 

using it as it has been defined by the people that developed Processing, in other 

words we have not told the computer what to do when it comes across println() in 

our Hello World 1.0 program. This means that the main body defining how 

println() acts in our program is not defined within our program but exists 

independently of our program, probably somewhere else on your hard disk drive 

where you installed Processing. If we were to take another look at the Hello 

World 1.0 program, we can see the function println() is telling the machine, that 

the sketch is running on, to print whatever is inside the parenthesis. We call data 

we input to a function through parenthesis, parameters and some other higher 

level languages might refer to parameters as arguments. The parameters our 

println() function accepts in this case is the string of characters that spell out the 

words “Hello World”. 



There are two points worth noting here, firstly we have input data into the 

println() function and secondly it has returned data back to us, that being what it 

has printed to the debugger console. When a function is used in this way we are 

said to be calling a function. Functions are the building blocks of Processing and 

we will be using them regularly and even creating our own. 

The process of calling a function visualized. 

Syntax and syntax errors 

The arrangement of components within a statement is exceptionally important in 

programming. Unlike in natural languages, where sentences can be structured in 

several different configurations and still have the same meaning. In programming 

a specific syntax exists for all languages and must be adhered to or your compiler/ 

interpreter might throw an exception or a syntax error. Syntax errors are generally 

quite common when you first start programming, it is easy to forget to place a 

semi-colon at the end of a statement or close parenthesis that have been left 

hanging open. Errors like these are often easy to debug, particularly when using 

the PDE. For example if we were to make a mistake in our Hello World 1.0 

program and forget to close the open parenthesis, when trying to run the sketch 

we could get an error looking something like this... 



Syntax errors are common when one first starts programming, but with the help of the 

debugging console they can be relatively easy to identify. 

As you can see debugging the program in this case is really quite simple, in fact 

the PDE tells us exactly where the error is. In larger programs however it might 

not be so obvious where the problem lies, although the PDE will try to help you in 

tracking down a bug where ever it can. 

Some pointers to remember when constructing statements in Processing 

• Always end statements with a semi-colon 

• All parenthesis (), brackets [] and braces {} that are opened with their 

corresponding left characters must be closed with the right version of the 

same character. None of these sets are interchangeable, but some of these 

sets are nestable. 

• A String of literal characters (such as “hello world”) must exist between 

double quotes. Single quotes are reserved for the char data type (discussed 

later). 

• If you have any uncertainties about your program, such as how to use a 

function or it's syntax, look it up in the Processing reference which can be 

accessed online at http://processing.org/reference/ or from the PDE ,for 

offline viewing, click : 

Help → Reference 

Of course there are many other points worth noting on syntax and program 

structure but we will get to these in due time, for now there's no need to get ahead 

of ourselves. 



Logical Errors 

Logical errors are errors that do not cause the program to halt, crash or throw an 

error but will cause the program to act in an unexpected manner or produce 

unintended results. Logical errors can therefore be difficult to track down and 

rectify because the PDE does not indicate the specific location of an error. 

Keeping track of your data through documentation and organizing it into small 

manageable chunks can be one method of avoiding logical errors. If your program 

seems to have a logical error you might have to use the println() function to track 

the values you were hoping to have your program return to you. 

Display Window 

In our Hello World 1.0 program after pressing the Run button you will notice that 

a new smaller window was created. This is the Display Window and because 

Processing is a visually oriented language it automatically creates this window 

which you will usually use to draw to. 

The default Display window has dimensions 100 pixels in width by 100 pixels in height. 



Lets take a look at how we can control the Display window with the size() 

function. 

The size() function allows you to specify the dimensions of the Display window 

in pixels. You use the size() function by supplying two parameters to it, an x 

value which defines the horizontal dimension of the Display window and a y 

value which defines the vertical dimension of the Display window. Just like the 

println() function, parameters for the size() function are entered between the 

function's parenthesis. For example if we wanted the dimension of the Display 

window to be 640 pixels across by 480 pixels down we would type: 

size(640,480); 

Note that because we have just entered a statement telling Processing how big we 

want the Display window to be we must terminate this statement with a semicolon. 

You will also note that the two values 640 and 480 are separated with a comma. 

Do not try to separate values with a semi-colon because the statement is 

incomplete at that point and you are therefore attempting to terminate it 

prematurely. This will most commonly result in a syntax error or even worse in a 

logical error in some cases. 

Parenthesis following a function's name is usually reserved for parameters 

relating to the function and these parameters are most commonly separated by 

commas. This is pretty easy to remember because in English you generally list 

items by separating them with a comma in Processing and many other higher 

level languages you separate parameter values for a function with a comma. 

The two values 640 and 480 have been “listed” in this particular order because 

when Processing accepts parameters of dimensional type like x and y (in 2 

dimensions) or x, y and z (in 3 dimensions) it will generally accept values in the 

order x first, y second and z third. This is with the exception of a trigonometric 

function called atan2() in which y is read first followed by x due to the special 

circumstances of how this function works. 

Add the second statement to your Hello World 1.0 program 

Below the first statement type the second statement so that your code reads: 


size(640,480); 



Standardized Coding Practices 

Comments and white space form a part of standardized coding practices. 

Standardized coding practices establish a consistency between different software 

languages. If you do not use them your software may or may not throw an 

exception or an error, but you can be certain that there are many people that might 

read your code who will find it non-user-friendly when you do not use 

standardized coding practices and try to invent your own. 

Comments 

Comments are lines of information inserted between code that informs a person 

reading the code of it's purpose and intent. Comments are completely ignored by 

the software executing the code such as the PDE and they should be written in 

plain and simple English or, what ever your chosen language. Consider that the 

comments you write might not always be for your personal understanding but for 

another person reading your code and therefore should reflect a clear and 

impartial explanation of your code. 

Commenting your code becomes particularly useful for code that you have not 

revisited over a long period of time. Regardless of whether you wrote the code or 

not, trying to understand what revisited code is supposed to do after long periods 

of time becomes a cumbersome process when it is not commented properly. 

Comments in Processing and many other higher level languages are indicated 

with two forward slashes: 

// for a single line comment, that is a comment that is 

// only one line long, 

// but can also have one comment following another. 

Comments that are more than one line long are called multi-line comments in 

some programming languages and documentation comments in Processing. They 

are indicated by starting the comment with: 

/** typing the multi-line comment 

... 

... 

and ending it with */ 



White space 

White space is also sometimes referred to as negative space and is the space 

between the characters of text that make up the lines of your source code text file. 

For example a space, tab or enter/break are all referred to as white space. 

Processing unlike other programming languages (such as Python) completely 

ignores white space, just like it ignores comments. However just because 

Processing ignores white space doesn't mean you should. Using a consistent 

spacing and formatting of your code will make it easier to read. For example: 

println("Hello World");size(640,480); 

is valid code but less readable than the same program with white space: 


size(640,480); 

You can probably imagine how unreadable code could quickly become when 

creating more complex programs with hundreds of statements. 

Let's revisit our Hello World 1.0 program and retype it taking standardized coding 

practices into consideration. 

/** 

* Hello World 1.0 Program 

* by Lyndon Daniels. 

* 11/01/2011 

* This example program demonstrates how to 

* create a Hello World Program in Processing. 

*/ 

//Determine the size of the Display window 

size(640,480); 

//Print characters to the console 




Program Notes 

Firstly you'll notice that every line in the documentation comment except the first 

and last lines of this comment is started with an asterisk “*”. This is not necessary 

but, it does make the code look somewhat nicer and many programmers adopt this 

fashion of multi-line commenting so I've included it in this program. As 

mentioned earlier to Processing it makes absolutely no difference, but to us it 

makes the code easier to read. 

It is standardized coding practice to include the following information in the 

documentation comment. 

• Name of the program, 

• The programmers name, 

• The date on which the program was released, 

• A brief description of what the program does. 

Secondly you'll also note that I've changed the order in which the statements are 

executed (or run). Code written in this way resembles a procedural programming 

style meaning that the code is executed one line after the next starting at the top of 

the document and working down. Subsequently it makes more sense to define the 

size of the Display window before any other code is run. At a later stage you will 

see that when using the setup() function starting with the size() function, before 

any other functions following setup(), is mandatory. 

Cartesian Graph and the Processing 

Coordinate System 

As mentioned earlier the Display Window's dimensions are determined within the 

size() function via the parameters that it accepts. Those dimensions are measured 

in pixels. When we start drawing to the Display Window we need to tell 

Processing where exactly we are attempting to draw to within the Display 

Window, this information we supply to Processing in the form of x and y 

coordinates when dealing with a 2D sketch and x, y and z coordinates when 

dealing with a 3D sketch. As a result you can think of the Display window as 

being a piece of graph paper with invisible lines. 

Cartesian Graph and the Processing Coordinate System 54


The Display Window can be divided up into a grid. 

The origin of the Display window is in the top left hand corner, being the origin 

it's coordinates will be (0,0) meaning 0 x and 0 y respectively. This type of layout 

might look familiar to you, that's because it's based on the Cartesian graph 

system. This is the name for the type of graph layout we use in Processing and 

many other programming languages that allow us to create and place components 

of a sketch within an area such as the Display Window. The main difference 

between the programmatic version of the Cartesian graph and the mathematical 

version of the Cartesian graph is that in the programmatic version the positive y 

axis runs downwards not upwards as is usually the case in the mathematical 

representation of this graph. This actually does not change anything about how 

the graph system is used, if you find this to be a bit odd you can think of it as if 

we were looking at a piece of graph paper rotated 180 degrees around the x axis 

so we're looking at the back of the graph paper and everything drawn on the paper 

now appears upside down. As you can imagine nothing drawn on the graph paper 

has changed just the way we are looking at it is different. Understanding how the 

Cartesian graph system is applied in programming is a lot easier when we have an 

example to work with, so lets add to our Hello World 1.0 program. 

Cartesian Graph and the Processing Coordinate System 55


Hello Display Window: Hello World 1.1 

In the revised version of our Hello World Program we will start using the Display 

Window, firstly to display the original character set “Hello World” then to display 

a few shapes too. 

text() 

The text() function is the first function we will use to make Processing draw 

something to the Display Window for us. The text() function accepts parameters 

in various formats of which the simplest format is: 

text(data, x, y); 

The data parameter in this case will be the string of characters that spell the 

phrase “Hello World” and as you've probably already guessed the x and y 

parameters tells Processing where in the Display Window we would like to draw 

the text in terms of x and y coordinates. 

So let's give it a try, add the following line to the bottom your Hello World 1.0 

sketch: 

text(“Hello World”, width/2, height/2); 

Using the Display Window gives you immediate feedback for testing your code. 

Hello Display Window: Hello World 1.1 56


Program Notes 

You'll notice that your sketch is now making use of the Display Window, which 

is the first step towards creating visual representations of your code. We used the 

string of text “Hello World” in the data parameter, but the x and y parameters are 

looking a little different particularly if you were expecting them to be numbers. In 

fact they are numbers, instead of inputting a specific number for the x and y 

parameters we used an expression and in this case the expression evaluates to a 

number. It is this number that Processing reads and accepts as the parameter. But 

what exactly do the expressions mean? 

Amongst the many things that Processing is, it is also a very sophisticated 

calculator. It has the ability to calculate very complex mathematical formulae and 

also is able to do very simple math too. The expression: 

width/2 

is asking Processing to get the width of the Display Window and divide (/) it by 2. 

The keyword width is a type of data known as a system variable. Basically the 

width system variable stores information set by the first parameter in the size() 

function, and as you are aware the first parameter in the size() function 

determines the width of the Display window. In our program we set the size() 

function to read: 

size(640,480); 

How this relates to the width system variable is that every time Processing sees 

the keyword width it replaces it with whatever we set the width value to be in the 

size() function. In this case since we set the width to 640 the text statement as 

Processing reads it looks something like this: 

text(“Hello World”, 640/2, 480/2); 

The height system variable has the same effect but relates to the second parameter 

of the size() function. 

So the question is why did we not just simply type the values 640 and 480 instead 

of using the keywords width and height respectively? Even further still why didn't 

we just type the values 320 for the x parameter and 240 for the y parameter of the 

text() function, so that it looks like this: 



text(“Hello World”, 320, 240); 

Although this is a perfectly valid methodology, it is not very versatile. Currently 

there is not too much maintenance involved in updating the code if we were to 

decide that the Display Window needs to be smaller, however when it comes to 

creating the rest of the sketch which is going to involve drawing shapes to the 

Display Window of which each shape will need to have it's own set of 

coordinates, if we had typed in a specific value for each x and y position, updating 

the code to reflect the change of dimensions of our Display Window would mean 

changing each statement where we input specific x and y values. That could mean 

a lot of extra and unnecessary work. By using an expression with the keywords 

width and height we can place whatever we are drawing relative to a position 

determined by the size() function. So all we need to do now is update the size() 

function and every place that we have used the keywords (width and height) 

relating to the size() function updates without us having to change anything more 

than a single statement. This is a programming methodology that is used often 

and referred to as implicit programming, and although it might not seem entirely 

obvious to you at this point why it is a recommended methodology it should 

become more clear as you delve deeper into the Hello World 1.2 program. 

Formatting Text 

You might have noticed that the text is supposed to be in the center of the Display 

Window but looks more like it's leaning to the right hand side of the window. 

Processing allows us to align text relative to the coordinates we specified for the 

text() function's x and y parameters. The relative positions are LEFT, RIGHT or 

CENTER. I have typed them in upper case because that is the format that 

Processing accepts them as, when entered as a parameter for the textAlign() 

function. 

Lets fix the text alignment so that it is in the center of the Display Window, add 

the following line of code directly above the text statement: 

textAlign(CENTER); 

If you were to re-run the sketch your updated version should have the text directly 

in the center of the Display Window. As we are using a procedural programming 



style to create this sketch, Processing needs statements input in a particular order. 

We'll discuss procedural programming and other programming paradigms in more 

detail a bit later, but for now it's very important to note the order that statements 

are placed in. Placing the textAlign() function before the text() function ensures 

that the textAlign() function is run before the text() function thereby ensuring that 

by the time Processing gets to drawing the text in the Display Window it already 

knows that the coordinates within the text() function refer to the CENTER of the 

text. 

Next we'll have a look at the size of the text. Currently the sketch looks like it's 

drowning the text in a sea of greyness, so lets make the text a little bigger. The 

textSize() function allows us to set the size of text in pixels. The size number is 

input as a parameter of the textSize() function. Add the following statement 

before the text statement: 

textSize(24); 

Now we're starting to get somewhere, although white text on a grey background 

does not exactly jump out at you. So in keeping with the old Processing.org color 

scheme we're going to use a black background with light blue text. 

Color 

Color in Processing can be input in several different formats such as RGB (Red, 

Green, Blue), HSB (Hue, Saturation, Brightness) or Hexadecimal code. RGB is 

the default color mode but this can be changed with the colorMode() function. 

Lets have a look at how to change the background color. Add the following 

statement to your sketch directly after the size() function: 

background(0,0,0); 

The background() function accepts up to three parameters, in our case the first 

parameter is the Red value followed by the Green value and finally by the Blue 

value. As we want a black background all of these values are set to 0 the 

minimum value for the current color mode of RGB, the maximum value for these 

parameters is 255, this gives you a total of 256 different color values for each 



color (remember 0 is also a value). If we wanted a white background we would 

have to enter 255 for each of the three parameters of the background() function. 

Back to the color of the text. The textAlign() and textSize() functions set 

parameters not just for the text currently displayed but for all text that is created 

thereafter. Until these functions are used again to change these parameters they 

will remain in Processing's memory and effect all text that is drawn to the Display 

Window following their execution. 

The fill() function acts in a similar fashion, it accepts color values and will effect 

everything that is drawn to the Display window that has a fill after the function is 

evoked. We will have a look at how to modify this behaviour a bit later, for now 

lets focus on getting the text to display in a light blue. 

In the PDE click: 

Tools → Color Selector 

The Color Selector is a build automation tool accessible within the PDE 

The Color Selector dialogue box is useful for finding the specific HSB, RGB or 

Hexidecimal color values of a color. In our case the RGB values for the light blue 

I'm looking for are R 191, G 233 and B 255. I can now use these values in my 

sketch. 

Before the text() function type the following statement: 



fill(191, 233, 255); 

This statement sets the color of the text to light blue color. 

Before we continue drawing shapes, lets make a few adjustments to the horizontal 

position of the text so that we can have some space to draw a smiley face in the 

center of the Display Window. Once again we're not going to input a specific 

number into the y parameter of the text() function, we're instead going to use an 

expression so that we can have Processing do the work for us just in case we feel 

like changing the dimensions of the sketch once it's complete. 

Basically we want to keep the text as is but just place it closer towards the bottom 

of the sketch about three quarters of the way down. Since we know that the height 

system variable contains the y dimension of our sketch and that dividing it by 2 

will return a value that is half the size of the y dimension of our sketch. Dividing 

the height value by 4 will give us a value that is a quarter of the height of our 

sketch. If we then multiply this value by 3 we will have a value that is three 

quarters the length of the y dimension of our sketch. So our expression would 

look like this: 

(height/4)*3 

What this reads as is “height divided by four then multiplied by three”. Just like in 

mathematics anything within parenthesis is evaluated before that which is outside 

of parenthesis. So the expression height/4 is first evaluated, the answer of this 

expression is then multiplied by 3. 

Modify your text statement to look like this: 

text("Hello World", width/2, (height/4)*3); 

Now we can ensure that whatever the y dimension of our Sketch may be, 

Processing will always place our text three quarters of the length down the y axis 

of the Display Window. 



Drawing 

The new Hello World Program in Processing. 

Processing is a language that was made to create visual representations of your 

code really easily, and as a result the developers of Processing have provided us 

with pre-configured functions for drawing primitive shapes much like you would 

expect in a drawing program. Shapes such as rectangles, ellipses and triangles 

amongst others are known as 2D primitives and can easily be drawn to the 

Display Window with a simple keyword. We'll start by drawing an ellipse. 

2D Primitives 

Drawing an ellipse in Processing is easy you just use the ellipse() function that 

accepts parameters in the following order: 

ellipse(x, y, width, height); 

As you might have already guessed the x and y parameters indicate where the 

ellipse is to be drawn on the coordinate system, and the width and height 

parameters indicate the width and height of the ellipse. Please note that the terms 

width and height in this context have nothing to do with the system variables 



width and height which store the information relating to the x and y dimensions of 

the Display Window. To draw an ellipse in the Display Window add the 

following statement to the end of your program: 

ellipse(width/2, height/2, 100, 100); 

Once again to find the center of the Display Window I have used the expressions 

width/2 and height/2 this gives me the x and y coordinates respectively that will 

be the center of the ellipse. Technically a circle is an ellipse with an equal width 

and height, which is why I have input 100 for both the width and height 

parameters of the ellipse() function. I've also chosen to enter explicit values for 

the ellipse's width and height parameters, as I don't want the dimensions of the 

ellipse to change even if I do decide to change the dimensions of the Sketch itself. 

Using this hybrid style of mixing implicit programming and explicit programming 

can sometimes lead to logical errors, so you should always be certain of what you 

are doing when using this approach to programming. 

The Origin of an ellipse 

Processing provides several different ways to draw an ellipse which modify what 

the x and y parameters of the ellipse() function refer to. These parameters of 

ellipse() define what is known as the origin of the ellipse, the function 

ellipseMode() is used to change where the origin of the ellipse is with regards to 

the x and y parameters of the ellipse() function. This relationship will determine 

where the ellipse is drawn within the Sketch. 

We use the function ellipseMode() which accepts the parameters CENTER, 

RADIUS, CORNER, or CORNERS to determine how the circle is to be created. 

Using the CENTER parameter tells Processing to use the x and y parameters of 

the ellipse() function to determine the center of the ellipse as it's origin. The 

CENTER parameter for ellipseMode() is the default mode, and is subsequently 

why we did not add the statement to our sketch. If you did want to use the 

CENTER creation mode for drawing ellipses after having overridden this setting 

with one of the other modes, to reactivate the CENTER mode parameter you 

would add the following statement to your sketch before using the ellipse() 

function: 



ellipseMode(CENTER); 

Remember Processing is case sensitive so don't forget to type this parameter in 

upper-case. 

Drawing an ellipse with the CENTER parameter of ellipseMode() 

The CORNER parameter for ellipseMode() function allows you to create an 

ellipse by specifying the x and y coordinates as the corner of an imaginary 

bounding box that surrounds the ellipse. The x and y parameters are used to 

determine the top left-hand corner of the bounding box from where the width and 

height parameters are used to extend to the maximum width and height values of 

the ellipse. 

Drawing and ellipse with the CORNER parameter of ellipseMode() 

To use this creation method for ellipses type the following code: 

ellipseMode(CORNER); 



It's time to save your sketch if you haven't already done so. In the PDE click 

File → Save As... 

Change the name of your sketch and save it. Processing will create a new folder 

in your sketchbook folder with the new name of your sketch, it's also worth 

noting that if you have added any additional files to your sketch such as images or 

other files processing will also copy the data folder that it created automatically 

when you added external content to a sketch to the new sketch location. This is 

something to be aware of as you can inadvertently duplicate the amount of data 

on your hard disk drive if you are unaware of this feature in Processing. Adding 

external content to a sketch is something we will get into a bit later when we start 

adding images to our sketch. 

Your sketch should read something like this: 

/** 

*Hello World 1.2 Program 

*by Lyndon Daniels. 

* 

*This example program demonstrates how to 

*create a Hello World Program in Processing. 

*/ 

//Determine the size of the display window 

size(640,480); 

background(0,0,0); 

//Print characters to the console 


//Render and format text 

textAlign(CENTER); 

textSize(24); 

fill(191,233,255); 

text("Hello World", width/2, (height/4)*3); 

//Drawing the face 




Aliasing 

You might have noticed that the ellipse is looking a bit pixelated and not very 

smooth this effect is known as aliasing and is often counteracted with the effect 

of anti-aliasing which creates the impression of the data (such as an ellipse) 

drawn to the display of a computer screen as appearing to look smoother. 

Fortunately in Processing we have a function that is made exactly for the purpose 

of making the contents of a sketch look smoother. Add the following statement to 

the first part of the sketch just after the size() function: 

smooth(); 

The smooth() function does not accept any parameters but still requires 

parenthesis, it's also worth noting that although using the smooth() function will 

make your geometry appear smoother it might come at the expense of slowing 

down the rate at which your sketch runs. By default a Processing sketch will try to 

update itself 60 times in one second (if a program loop such as draw() is used), 

this allows for smooth looking motion in a Processing sketch and almost 

instantaneous interactivity. We are creating what is known as a static sketch 

which does not involve any interactivity or animation, so using the smooth() 

function in this situation should not greatly influence the sketches performance. 

Smile 

The ellipse needs a smile in order to make it into a smiley face. We will use an arc 

to draw the smile, the main reason we are using an arc is firstly to introduce the 

arc() function but more importantly it's an opportunity to explore working with 

angles in Processing. 

Angles in Processing 

In mathematics angles are usually measured in either degrees or radians, 

Processing and many other programming languages generally accept and/or prefer 

the latter. One of the main reasons most programming languages accept a unit of 



measuring angles in radians is because it allows us to work with the value known 

as PI (pronounced py rhymes with “try”) and represented mathematically as π. PI 

is a number that has the approximate value 3.1415927 (calculated to seven 

decimal places). The actual number that PI represents, in programming, is not 

quite as important as it's mathematical equivalent subsequently we will generally 

never need to remember what this number is in programming but rather what the 

language we are choosing to use it in, represents it as. In Processing the value of π 

is represented by the mathematical constant PI. To Processing and many other 

programming languages a constant is a value that does not change, as a result it 

makes sense for the Processing representation of pi to be a constant. Pi has always 

been the same value long before Archimedes approximated it's value in the 200's 

BC as it's implication in the construction of many architectural wonders of human 

ingenuity from as far back as the Egyptian pyramids and even further back in 

human history suggests, and it's highly unlikely that pi could be used to represent 

any other value. So what does it mean? 

Pi is the ratio of the circumference of a circle to it's diameter, and pi radians is 

also equal to approximately 180 degrees. Pi can be expressed mathematically as: 

π = C/d 

Where C is the circumference of a circle and d is the diameter of a circle. 

So how do we use this information about pi to work with radians and degrees? 

Well we already know that pi radians is equal to 180 degrees so that means twice 

pi radians (or you might be more familiar with the mathematical notation 2πr) is 

equal to a full revolution or 360 degrees, or as the value is referred to in 

Processing TWO_PI. Processing also has other mathematical constants to 

represent pi in other useful quantities such as HALF_PI which is the 

approximately equivalent to 90 degrees and finally QUARTER_PI. But what 

about all the other infinite angles how do we reference these values in Processing? 

You could either type them out explicitly as radians or if you know their 

approximate equivalent in degrees you can use a formula to convert the value 

from degrees to radians: 

radians = (π/180)*angle in degrees 

For example if we had the angle 270 degrees and we needed this in radians so that 

we could use it in our Processing sketch we could either use the mathematical 

constants Processing provides us with and type the following expression: 



PI + HALF_PI 

This expression would return the equivalent of 270 degrees in radians. Or we 

could use the above mentioned formula and type the following expression in 

Processing, which would also return the equivalent of 270 degrees in radians: 

(PI/180)270 

Remember that because there is no mathematical operator between 270 and 

parenthesis the value of what is in parenthesis must be multiplied by 270, this will 

return the equivalent of 270 degrees in radians. 

One of the simplest methods of converting degrees to radians in Processing is to 

use the radians() function. If you know the value of the angle in degrees you can 

simply use the value in degrees as a parameter of the radians() functions. For 

example: 

radians(270); 

This will convert 270 degrees to it's equivalent in radians. It is important that 

angles in Processing are converted to radians because all trigonometric functions 

that require angles accept this value in radians. 

Getting the hang of working with radians at first might be a little tricky if you are used to 

degrees, but if you think of them in terms of pi they can be a lot easier to work with. 



The arc() function in processing accepts six parameters in the format x, y, width, 

height, start, stop. You are already familiar with the first four parameters x and y 

determine the point of origin of the arc and this can be further controlled with the 

ellipseMode() function. width and height represent the dimensions of the arc in 

much the same way that these parameters, determine the dimensions of an ellipse. 

The last two parameters you might not be familiar with start and stop determine 

the starting and ending values of the angle of the arc, so for example we are going 

to draw a half circle which you know has an angular value of 180 degrees, 

secondly because we want our smile to be straight we will start it at 0 and end it at 

PI (which is approximately 180 degrees). Add the following statement to your 

sketch following the ellipse statement: 

arc(width/2, height/2, 50, 50, 0, PI); 

A Smile on the “Hello World” Program. 

Editing the smile 

Our smile drawn with the arc() function looks fine but needs a bit of work. Firstly 

although you cannot see it the arc actually has a fill. In order to see the fill we will 

first have to remove or hide the ellipse, but we're happy with the way the ellipse 

looks so instead of deleting the statement or cutting it to the clipboard we'll 

comment it out. Commenting out a statement or a group of statements is the 

process of adding comment tokens to the statements that cause the statements to 

be ignored by the compiler. Comment tokens in Processing are two forward 

slashes “//” as mentioned previously. The easiest way to comment out the ellipse 



statement is simply to place the comment tokens at the start of the statement so it 

looks like this: 

//ellipse(width/2, height/2, 100, 100); 

you will notice that when you comment out a statement, syntax highlighting 

causes the statement to turn grey. This means we can now run the program and 

Processing will no longer draw our ellipse, until we uncomment the statement by 

deleting the comment tokens. Another way of commenting out a whole block of 

code is to select the lines of code you wish to comment out in the PDE click: 

Edit → Comment/Uncomment 

This will toggle your selection between a commented state and a standard block 

of non-commented code. Commenting and uncommenting is just simply a 

convenient and easy way of testing a program by including and excluding 

statements easily without having to retype out a statement that has been deleted or 

using our operating system's clipboard. 

Commenting out the ellipse statement reveals that the arc is drawn with a fill. 

To remove the fill we will use the noFill() function. So between the ellipse 

commented statement and before the arc statement add the following code: 

noFill(); 

The order in which commands are issued to Processing is very important. 

Functions such as rectMode() and noFill() not only effect the command that 

directly follows them (such as the arc statement being effected by the noFill() 

function) but they also effect all statements that follow there after that rely on 

these special functions. So what that means is that if we were to place the noFill() 



function before an uncommented ellipse statement followed by the arc statement 

both the ellipse and the arc would have no fill. This is obviously not what we 

want, we only want the arc to be without a fill and subsequently run the ellipse() 

function before noFill(). 

If you were to run the sketch at this point it might look as though the noFill() 

command has removed the arc completely from the Display Window, but this is 

not the case. In Processing 2D primitives such as triangles, arcs, quads, ellipses 

and rectangles are actually made up of both a fill and a stroke. We've already seen 

that the fill can be controlled with the noFill() function, the fill() function and that 

the default in Processing is that all 2D primitives have a fill. 

The stroke is the outline that surrounds all 2D primitives and looks like a line. 

The stroke can also be turned off by a function similar to the noFill() function, as 

you might have guessed it's noStroke(). 

To turn the stroke or fill back on or to simply edit an existing stroke or fill we use 

the stroke() or fill() functions. Both of these functions accept parameters in the 

form of a grayscale color, an RGB value or a RGBA value by default. You can 

also control how Processing accepts parameters for these two functions with the 

colorMode() function. We'll be changing our black stroke (which is why it seems 

to have disappeared, because it's camouflaged into the black background) to a red 

smile. Add the following statement after the noFill statement: 

stroke(255,0,0); 

The stroke() function can be used in a similar way fill() is used but for editing the color 

of lines. 

Now we have a smile floating above our text, so we're going to uncomment the 

ellipse statement and when we run the sketch our smile is restored to it's elliptical 

face. 



The smile is looking a little too high up on the face so we're going to move it 

down, this is easy enough as we already have the style of the smile we are looking 

for we just need to offset it's y position. To do this we are going to edit the arc() 

function once more to the following state: 

arc(width/2, height/2 + 10, 50, 50, 0, PI); 

Notice that because we are using an inverted Cartesian graph adding 10 to the 

arc's current y value actually moves the arc down, inversely if we subtracted 10 

we would move the smile up. At first getting used to this system might be a little 

tricky. 

Adding Eyes 

What's a smiley face without eyes. Add the following code to your sketch after 

the previous arc statement: 

stroke(0,0,0); 

fill(0,255,0); 

ellipse(width/2-15, height/2-15, 20, 30); 

ellipse(width/2+15, height/2-15, 20, 30); 

As we changed the stroke to red in our previous statement to draw the smile, we 

need to change it back to black so we add the second stroke statement to our 

program to change the stroke color back to black. Having also turned the fill off 

for the arc statement we need to turn it back on and set it to green, we can 

conveniently achieve both of these tasks with one function in the form of our fill 

statement. The x and y parameters of the ellipse functions that actually draw the 

eyes have had their expressions added to. For the eye on the left's x parameter I've 

subtracted 15 and for the eye on the right' x parameter I've added 15. When 

working with expressions like this it's important to remember that certain 

mathematical operators have precedence over others. For example * and / have 

precedence over + and -, this means that the expression width/2-15 is actually 

being evaluated like so (width/2)-15. This effect is known as operator 

precedence. Finally I offset the y position of the ellipses by subtracting 15 and 

drew them as more oval shaped by making their height's greater than their widths. 



Drawing Irregular Shapes 

Fortunately we are not limited to drawing only 2D primitives in Processing, but 

we can in fact draw any shape that we can imagine. We use two main functions in 

conjunction with several calls to another function in order to achieve this, and the 

main functions are beginShape() and endShape() issued in that particular order. 

We're going to start off by experimenting with this feature by drawing a speech 

bubble surrounding the “Hello World” text in our sketch. 

The beginShape() function tells Processing to start recording the following set of 

points that are given to it and the endShape() function tells Processing to stop 

recording, between these two functions we are going to supply Processing with a 

set of special coordinates in the form of the vertex() function. Since we are using 

the vertex() function to determine where the points of our irregularly shaped 

object will be drawn we cannot use any other function other than vertex() between 

beginShape() and endShape(). The vertex() function accepts parameters in the 

form of x and y, which determine where in terms of x and y the point (or vertex) 

is in the Display window. By adding the following statements in this particular 

order we will be able to draw our speech bubble: 

beginShape(); 

//Start the shape in the middle of 

//the Display Window's x axis 

vertex(width/2, (height/4)*3-35); 

vertex(width/2-70, (height/4)*3-35); 

vertex(width/2-80, (height/4)*3-25); 

vertex(width/2-80, (height/4)*3+5); 

vertex(width/2-70, (height/4)*3+15); 

//The following statement marks the point 

//where the shape starts to mirror itself 

vertex(width/2, (height/4)*3+15); 

//The Previous statement marks the point 

//where the shape starts to mirror itself 

vertex(width/2+70, (height/4)*3+15); 

vertex(width/2+80, (height/4)*3+5); 

vertex(width/2+80, (height/4)*3-25); 

vertex(width/2+70, (height/4)*3-35); 



//this is the arrowhead that points out of the 

//speech bubble towards the smiley face 

vertex(width/2 + 50, (height/4)*3-35); 



//the end of the shape is the same as 

//the beginning 

vertex(width/2, 

(height/4)*3-35); 

endShape(); 

Although at first this might appear to be a lot of typing, upon further inspection 

you will notice that it is in fact very repetitious and more of copy, pasted and 

modified code. So lets have a look at what's going on here. 

Each vertex position can be mapped to a vertex() in the code. 

In the above illustration we can see that beginShape() has started recording the 

various points that make up the irregular shape of the speech bubble, which we 

subsequently define for the beginShape() and endShape() functions one vertex at 

a time. The first vertex is located along the center of the Display Window's x axis 

followed by the y parameter for this vertex which is 35 pixels above the center of 

the text that says “Hello World”. Of course we could just have easily typed in the 

values explicitly such as: 



vertex(320, 325); 

But using this method of explicit programming does not leave much room for 

changes and could subsequently lead to the extremely time consuming task of 

changing each explicitly determined point in your program manually, if it is 

deemed that such a change is necessary at a later stage. 

From the next vertex on we can use the Display Windows width and height 

system variables and the text's x and y position as a starting point from which we 

can place every vertex that follows relative to the position of the previous one and 

in relation to the other elements making up our program. 

Using this method of implicit programming also makes it easier for us to “mirror” 

the coordinates of the irregularly shaped speech bubble across the center of it's 

own Y axis. As you will notice once we get to the vertex marked as “the point 

where the shape starts to mirror itself” it's just a simple question of copying and 

pasting the previous code excluding the first vertex statement, changing the 

negative values associated with the vertices' x parameters to positive values, and 

reversing the order of the statements in a mirrored fashion. 

Using an implicit style of programming can also make patterns in your code easier to 

identify. 



This can save us quite a bit of work as we don't have to work out the specific 

coordinate of each vertex individually all we need to work out is half of the 

coordinates that make up the shape and since we are mirroring the shape on the x 

axis we simply change the negative values associated with x to positive. Once we 

have all the vertices mirrored on the right hand side (excluding the last vertex) we 

can then start to plot the points of the arrow head of the speech bubble that points 

to the smiley face implying that it's saying “Hello World”. 

This part of the shape is pretty straight forward because we already know that we 

will need three points to make the triangular shape of the arrowhead and two of 

these points we already know the y positions of because they will be at the same 

height of the first and last vertices. So it's just a case of simple trail and error to 

determine what looks best in adding the remaining parameters to the next three 

vertex() functions. Once that's complete we can close the shape by placing the last 

vertex at the same location of the first vertex. 

Finally to end the shape you must use the endShape() function. 

You might have noticed that the image of my sketch has a speech bubble with a 

thick blue outline around it. This is the strokeWeight() function, and it controls 

how thick or thin the stroke is rendered and accepts a number as a parameter, I 

don't recommend setting this number too high as you might find it causing 

undesirable effects on your sketch. The higher the number input the thicker the 

line. Add the following statement before the statements that draw the speech 

bubble: 

strokeWeight(8); 

You might remember that in order to have a black outline around the face's eyes 

we set the stroke to an RGB value of 0,0,0 (or black), so although the 

strokeWeight() function has done it's job the effects of it might not be so obvious. 

Changing the stroke and fill colors are functions that you might need to run 

several times within a single sketch to achieve the desired result. Add the 

following statement before the previous statement: 

stroke(50,127,255); 

This changes the stroke color for the speech bubble to a little bit of red, about 50 

percent green and full blue. The fill color of my speech bubble is white and if you 

want to change the fill color of your speech bubble you must add the fill() 

function before the drawing of the speech bubble. Your statement would look 



something like this: 

fill(255,255,255); 

or 

fill(255); 

Either option is perfectly acceptable, the latter is used for determining a gray scale 

value from 0 which is black to 255 which is white. 

The Stroke Caps are over lapping on the first and last vertex of the speech bubble in the 

current version of the Sketch. 

The section of the speech bubble where the first and last points of the shape 

overlap has an unsightly blemish caused by stroke caps. Stroke Caps determine 

how the end of a stroke is drawn and fortunately we have a function in Processing 

for controlling this feature, as you might have guessed the function is called 

strokeCaps() and it accepts the parameters ROUND, SQUARE or PROJECT. 

Different types of stroke caps in Processing, which are very similar in effect to that of a 

vector illustration package. 

Remember that Processing is case sensitive so you must type the parameters name 

with the correct casing. ROUND is the default parameter that causes strokes in 



Processing to have a beveled end, SQUARE will end the stroke with a flat end 

and PROJECT will tend to render the end of the stroke slightly past it's destined 

coordinates. We are going to use SQUARE to fix the speech bubble blemish. Add 

the following statement after the strokeWeight() function call: 

strokeCap(SQUARE); 

Order, order! 

That's great we now have a speech bubble, but where's our text gone to? If you 

added the statement to draw the irregular shape to the end of your sketch, 

Processing would have drawn the speech bubble over your text. Your text is still 

there just underneath the speech bubble, obviously this is not the desired effect. 

So we are going to reorder things in our sketch, with some simple cut and paste 

commands. Cut the three statements that relate to rendering text to the Display 

window textAlign(), textSize() and text() to the end of the sketch so that they are 

run after the speech bubble is drawn. If you were to run the sketch now your text 

will still appear to be missing, but in fact is still there it's just that because it's 

been drawn after the speech bubble it's also been effected by the fill() function 

issued to change the speech bubble's fill to white. White text on a white 

background isn't very legible so we'll change the text to another color, I'm going 

to make my text the same color as the speech bubble outline by adding the 

following statement before the text is drawn to the display and after the speech 

bubble is rendered: 

fill(50,127,255); 

Finishing the sketch 

To add the final touches to the Hello World 1.2 Program we're going to get 

Processing to display an image for the sketches background instead of the black 

background. This exercise will also be our first introduction to the programming 

paradigm Object Oriented Programming and the concept of data typing. 

The first thing we need to do is set our sketch up to accept external data in the 

form of an image. With the PDE open, open a file browser via your operating 

system and locate the file named “smileBkg.png”. From your file browser click 



and drag the file into the sketch you would like to use the image in. 

Adding an Image to a Sketch in Processing is easy, you just click and drag it into the 

PDE. 

When you have dropped the file to the sketch Processing, will confirm this in the 

debugging area by printing the phrase “One file added to the sketch”. If you get 

this message you are ready to start using the image in your sketch. In order for 

you to use external data such as an image in your Processing sketch the data has 

to exist in a folder called “data”, which must be a subdirectory of the location 

where your sketch is saved. For example, we set up Processing at the start to store 

all sketches in a single folder which I've called “Sketchbook”, within this folder 

will be located the sketches we create with the PDE. I've called my Hello World 

1.2 Program “smile” so within the Sketchbook folder is another folder called 

“smile” and within the smile folder is the file smile.pde (which is my Hello World 

sketch) and another folder called “data”. When we dropped the image into the 

PDE Processing automatically created the data folder, and placed a copy of the 

smileBkg.png file in it. If you would like to view the contents of this folder you 

can access it quite easily from the PDE by clicking 

Sketch → Show Sketch Folder 



When transporting your Processing sketches from one computer to another you 

must always retain this directory structure of having your data folder as a 

subdirectory of the location where you saved your processing sketch which 

should always have the extension .pde. 

Programming Paradigms 

A programming paradigm is a fundamental style of programming, the term is 

often confused with programming methodology which is a style of addressing a 

problem within a program. But perhaps a better way to understand what a 

programming paradigm is would be to look at some examples of it. 

Many modern day software languages offer at least two fundamental 

programming paradigms, most commonly amongst these two choices are the 

Objected Oriented Programming Model and Procedural Programming Model. 

Procedural programming is also sometimes referred to as imperative 

programming. Like the name implies imperative programming is a programing 

paradigm that is used to determine a set of commands and/or steps a computer 

program must take in order to reach a desired state. It's worth knowing that the 

Object oriented programming model is often contrasted to the procedural 

programming model because of the fundamental differences that separate these 

programming paradigms. 

Procedural Programming can be summarized as a style of programming where the 

program is tailored to suite the data as opposed to Object oriented programming 

which is more akin to a style of programming where the data is tailored to suite 

the program. 

So what exactly does that mean? 

As mentioned earlier, programs are made up of statements and one of the things 

statements are made up of is commands. As you might recall a command in 

programming, much like in a natural language, is used to communicate a 

directive. In this way procedural programming is a list of statements telling a 

computer what to do. At this point you could be thinking “Isn't that the purpose of 

all programming i.e. telling a computer what to do, so how then does procedural 

programming differ from any other programming paradigm?” 

In one way or another we use programming to represent data, whatever that data 

may be for example the amount of tea compared to the amount of coffee 

consumed over the past ten years world wide, or it could be determining the 



choices a character has in a game then choosing to act on those choices or it could 

even be something as simple as representing a set of alpha numeric characters on 

the screen that spell your name. Whatever way you look at it creating a program 

requires data. In procedural programming we use the tools provided to us by the 

language we are programming in to break down that data into smaller data types 

that the language predetermines for us and then use those representations to create 

a program that ultimately represents the larger original data set programmatically. 

This can be contrasted to object oriented programming where we use the tools 

provided to us by the language we are programming in to create our own data 

types for which we determine their meanings and use these new data types to 

create a program that ultimately represents our original data set. 

Datatyping Categories 

Organizing the data that we represent in a program can be a difficult task unless 

you have some sort of system that can be applied at a higher level to abstract the 

complex interactions that a machine must facilitate in order to make the data we 

interact with more accessible to us. Datatypes make the process of organizing the 

various forms of data that exist in our programs more accessible and categorically 

meaningful to us. What qualifies as a data type varies from one programming 

language to another and also forms the basis of what differentiates the two main 

programming paradigms we are dealing with Procedural Programming and Object 

Oriented Programming. 

In Processing there are three main categories of data types that we will be dealing 

with Primitive data types, Processing's API data types and User Defined Complex 

data types. 

Primitive Data Types 

Primitive Data Types form the building blocks of all the other mentioned forms of 

data types, and as a result are immutable, meaning that what defines them cannot 

be modified by use of Processing. 

Numbers can be represented as Primitive data types and most commonly fall into 

the primitive data type definition of int or float. An int data type is an 



abbreviation of the word integer and is used to create categories of numbers 

within a program that represent whole values such as 0, 1, -58, 6000000 and so 

on. In Processing these values can range anywhere between 2,147,483,647 to 

-2,147,483,648. A float (or floating point number) is a data type used to 

categorize numbers that have a decimal point. Numbers such as 1.5, 3.0, -56.91 

and even numbers such as 3.40282347E+38 in SI (the International System of 

Units) notation qualify to be a float primitive data type. Typographic characters 

such as 'A', 'b', '5', '@' etc can also be stored as primitive data types by use of the 

char data type which is an abbreviation for the term character. However, storing a 

sequence of typographic characters as a single unit requires a different data type 

that is more complex than a primitive. 

Processing's API Data Types 

In order to make languages fit more specifically to an environment certain 

repetitive tasks are often automated by the developers of the language's API. The 

acronym API stands for Application Programming Interface and it refers to the 

means by which you communicate with a program. Although you are creating 

programs (known as sketches) with Processing, Processing in itself is also a 

software program. We have been communicating with Processing through the 

PDE, and within the PDE we have been typing statements instructing Processing 

what we would like it to do with the data we have supplied it with. Those 

instructions such as functions, tokens, arithmetic operators etc that we are using to 

communicate with Processing are all defined within Processing's API. 

Processing's API Data Types are special data types defined within the Processing 

API that may or may not be found in other languages, but will make fulfilling the 

requirements of creating sketches (including data visualizations, end-user 

interactions and many other features commonly found in sketches) easier and less 

repetitive for the programmer by abstracting base-level computational 

interactions. The PImage data type is an example of a Processing specific API 

Data Type that makes the task of dealing with images much simpler for the 

programmer. The String data type is a Processing non-specific API Data Type, 

meaning that although this data type is common to many different programming 

languages it is not a primitive data type as it uses characteristics of both int and 

char primitive data types in it's implementation. Processing's API Data Types are 

usually quite easy to identify as the keyword used to invoke them usually starts 



with an upper-case character, this is a common standardized programming 

practice that is used to identify Classes which are the fundamental building blocks 

of Object Oriented Programming and are an inherent quality of Processing's API 

Data Types. 

User Defined Complex Data Types 

In procedural based programming languages the programmer is supplied with a 

predetermined set of keywords that can be issued during the course of the 

program to communicate with the languages API, as a result no matter what the 

data that you are representing with your program is, that data must be tailored to 

fit those keywords. This means that your data will need to be fragmented, 

categorized and associated with the predetermined data types of the procedurally 

based language. This differs substantially from an object oriented approach to 

programming, in that you tailor the program you are creating to suit the data you 

are representing. In Object Oriented Programming you define your own data 

types by combining various Primitive data types and predetermined complex data 

types of the programming language's API into your own User Defined Complex 

Data Types that are referred to as Classes. These data types can then be 

instantiated throughout your program as often as necessary and used in a manner 

that is akin to how any other data type is used. The invocation or instantiation of a 

Class data type is known as a Software Object, and this is how the Object 

Oriented Programming (or OOP for short) paradigm evolved. Objects that are 

instantiated from the classes that make up an OOP program fall into the category 

of being user defined complex data types. 

PImage 

We are going to create a new software object from the PImage class, and we will 

give this new object a name. It is important that the name that we assign to the 

new object is unique so that when ever we want to use that object we can refer to 

it by it's name and Processing will know exactly which object we are referring to. 

The PImage Class contains useful information about the image we are loading 

into our sketch and allows us access to this information without having to 

understand how it has extracted this information from the image, such as it's 

width, height or how many pixels make up the image and what color each pixel is. 



This is one of the benefits of object oriented programming, being able to abstract 

complex code by referencing it with a single keyword, the name of the object. 

Amongst the prerequisites of using an image file as a background in Processing is 

that the image must be in either gif, jpg, png or tga format and must have the 

same dimensions as the sketch in which it will be displayed. If you have had a 

look at the smileBkg.png file you might have noticed that the dimensions do not 

match that of our current sketch. However, we are in luck because we have been 

using an implicit style of programming to specify the x and y parameters within 

our sketch so changing the dimensions of our sketch at this late point in the 

programming process is actually not going to cause a problem. If on the other 

hand we had used an explicit style of programming we would have a problem as 

all of our had work to keep the graphical components of our sketch in the center 

of the display window would now be lost and fixing it would mean having to go 

through every statement where x and y coordinates where used and changing 

them to accommodate for the new sketch size. 

Since we are loading our image as a background we are going to add the 

following statements before the background statement near the top of the sketch. 

To create a new object from the PImage class add the following statement before 

the background statement: 

PImage img; 

This statement tells Processing that we want to create a new software object 

which has all the properties of the PImage data type and we would like to call this 

new object “img”. Our new software object has inherited the properties of the 

PImage data type which allow us to access information about the image we would 

like to store within the object without us having to know how exactly it goes 

about accessing this information. However, what our new object does not know 

yet is what image exactly we would like to use in our sketch and refer to as img. 

Add the following statement after the previous PImage statement: 

img = loadImage("smileBkg.png"); 

This statement tells Processing the name and location of the image file we would 

like to use and refer to as img throughout the rest of our sketch. Because the 

image file has already been dropped into our sketch Processing has already placed 

a copy of the file in our data folder. Processing will expect to find whatever image 

files we are using in our sketch in this folder. The loadImage() function can also 



accept a URL as a parameter if you wanted to load an image that is not located 

locally on the same station that your sketch is running from. 

So now that we have the image loaded into our sketch we need to tell Processing 

what we would like to do with and, where we want to place it and finally to draw 

the image to the Display Window. 

To display the image in our sketch we're going to modify the background 

statement and Processing will now draw the image to the Display Window when 

we run the sketch. Modify the background statement to read: 

background(img); 

This statement simply tells Processing that we would like to use the object which 

has the properties of an image, which we have called img, as a background. Later 

we will have a look at compositing images on top of each other in addition to 

using them as backgrounds. 

To briefly recap on the steps we took to load an image into our sketch 

1. Drop the image into the PDE 

2. Create a new software object from the PImage Class 

3. Load the image file into the new software object 

4. Instruct Processing to display the image through it's identifier 

The completed “Hello World 1.2” Program 



The Design and Layout Program 

Using what we've learned thus far from this guide, I've constructed a program that 

“sketches” a prototype for an interface to an online portfolio. 

The Completed Design and Layout Program 

Program Notes for Interface01.pde 

The PDE Tools menu 

Under the Tools menu in the PDE are additional build automation tools that 

members of the community have contributed to Processing. More tools can be 

downloaded to add to the functionality of Processing by downloading and 

installing the necessary files from http://www.processing.org/reference/tools/ 

A useful tool that comes with the PDE is the Create Font tool. This tool allows 

you to package any font you'd like to use in your sketch so that users accessing 

your sketch do not have to have that font installed on their computers in order for 

the sketch to display properly. To use the Create Font tool in the PDE click: 

Tools → Create Font.. 

The Design and Layout Program 86


The Create Font build automation tool can be used to ensure that users do not have to 

have the fonts you have installed on your computer in order for your sketch to display 

properly on their computers. 

The Create font dialogue box appears in which you can scroll down to and select 

the font you would like to package with your sketch, choose a size you would like 

to have the font displayed at by specifying a value in the size field (values are in 

pixels). The size value determines size of the characters of the font that will be 

exported as bitmaps, and although you can change what size you would like to 

display a font as in your sketch even after it's been exported it is recommended 

that you use the font in your sketch at the same size that you exported it as for 

best results. Up-scaling a font is definitely not recommended and as a result if you 

do plan on using the font in different sizes it is best to use the Create Font tool to 

export the font at the largest size and use Processing font() function to down-scale 

the font only. 

When you are happy with your selection click “ok” and Processing will create a 

file with the extension .vlw in your sketch's data folder, it is important that you 

know the exact name of this font as you will need to load it just like you loaded 

an image into Processing. 

To use the font in your sketch, you will need to follow a procedure very similar to 



that of loading and displaying images. Start by creating a new object that will 

serve as the container for your font, by adding the following statement: 

PFont myFont; 

PFont is a special data type in Processing used for storing fonts, in a similar way 

that PImage works with images. myfont is the name we have chosen to create an 

object that inherits the unique qualities of PFont. Next you will need to load the 

font into your sketch, to do so add the following statement: 

myFont = loadFont("FancyFont-Bold-42.vlw"); 

The loadFont() function accepts one parameter that is the name of the font, 

including it's extension, enclosed within double quotes. We will then need to 

specify what font we would like to use to display text in our sketch, because you 

are permitted to use more than one type of font in a sketch the next statement tells 

Processing which font it is you would like to render the text that follows with: 

textFont(myFont,42); 

The textFont() function accepts two parameters, the name of the PFont object you 

have created (which is myFont in this case) and the size at which you would like 

the text that follows to be rendered at. All the calls to the text() function that 

follow this statement will use the parameters set in textFont() until textFont() is 

called again with a different set of parameters. Finally you can draw the text to 

the Display Window with the text() function: 

text("Welcome to my\nProcessing Portfolio", width/2, height/2); 

You might notice something strange about the literal string parameter for the 

text() function. Between the characters “my” and “Processing” are the characters \ 

n. This is known as an escape character and is not rendered with the literal string. 

Escape characters are used to format text before they are drawn to the screen. In 

my Interface01 sketch there is a break between “Welcome to my” and 

“Processing Portfolio”, this is because the \n is known as a new line escape 

character and has the function of inserting a break between characters. This saves 

me having to use the text() function twice, first to render the text “Welcome to 



my” and adjust the y parameter in the next call to text() to render the rest of the 

sentence. Using a short-cut like this can save your program some overhead, but 

also comes with the expense of making your code look a little less readable, 

particularly if you have never seen an escape character before. 

Another place where I've used a short-cut in my Interface01 Program is in the 

statement where I create the objects for storing the images that I will use in the 

rest of the sketch. The following statement demonstrates this: 

PImage mGoat, banner, bkg, button; 

The long version of this code would look like this: 

PImage mGoat; 

PImage banner; 

PImage bkg; 

PImage button; 

As you can see using a shortcut in this way can save you quite a bit of typing and 

can actually make your code even easier to read. 



Beyond Static Sketches and on to Active 

mode 

Static sketches are mainly used for testing basic programs that do not incorporate 

interactivity or are used to output and image file such as a .png or .pdf. The 

majority of programs produced with Processing are made using active mode. 

Active mode requires two fundamental additions to a sketch, the setup() and 

draw() functions. 

setup() and draw() provide a new structure to sketches and allow for the 

initialization of a code block within setup() and the repetition of the code block 

within the draw() structure. Code blocks within the setup() and draw() functions 

are always cradled between braces, so they are easy to identify. The structure of 

an active mode sketch generally follows the pattern identified in the example 

below: 

void setup(){ 

code...// This code block will run only once, 

… // at the start of the sketch. 

... 

} 

void draw(){ 

code..// This code block with run repeatedly, 

… // throughout the duration of the sketch. 

… 

} 

A typical active mode sketch structure with the setup() and draw() code blocks 

highlighted 

90


Up until now our sketches have not been interactive or included any animation. 

The use of the active mode structure, including the addition of the setup() and 

draw() functions, allows us to truly access the powerful features that 

programming offers to developers and extend our sketches with interactivity, 

animation, logic and a host of other features that we shall explore. 

We'll start by having a look at how setup() and draw() change our sketches and 

make them more dynamic. 

Methods, functions and their contexts 

The setup() and draw functions() are also sometimes, less accurately, referred to 

as methods. A method is simply another way of saying function, but more 

specifically it refers to the function of a class. As you might remember, classes 

form the building blocks of object oriented programming and can be packaged 

into groups consisting of many classes which we refer to as Libraries. From 

Libraries we can access classes, from which we can instantiate objects that we use 

in our programs. But before using a particular library we would first need to tell 

Processing to import that library for usage within our sketch, by using the import 

keyword. This differs from using a class built into Processing's API where we do 

not need to use the import keyword, for example we could instantiate an object 

from the PImage class and call it img like in our Hello World program, without 

using the import keyword within the PDE, like in the following code fragment: 

PImage img; 

One of the methods (that works, in a sense, just like a typical function would of 

our main program) of img could be to resize the width and height of the image 

that we have associated with it for example: 

img.resize(50,100); 

This statement would resize the width and height of the image associated with the 

img object to 50 and 100 respectively. In this sense the resize() keyword used in 

relation to the img object would be a method of the img object. Just like a 

function, a method's definition can also exist independently of the main program. 

91


So as you can see the term method is very similar to that of function in terms of 

the purpose they both serve. However, it is important that the terms are not used 

interchangeably as they can lead to ambiguity and confusion. 

As I have mentioned before Processing is a language on it's own and not just a 

library consisting of classes for Java. If it was, referring to setup() and draw() as 

methods would be perfectly acceptable because they would be methods of a class 

defined within the Processing library for Java. Although Processing can be used 

in this context we are not using Processing as a library for Java we are using 

Processing as a language that is independent of Java until implementation, this is 

relevant because although Processing relies on Java currently for it's 

implementation theoretically there is nothing stopping Processing from being 

implemented within other environments. Within this context Processing is a 

language and not exclusively a library for Java. What that means is that, setup() 

and draw() within this definition should not be recognized as methods of a class 

that has been instantiated but rather as functions of a programing language. This 

concept can be extended even further because setup() and draw() are such 

fundamentally important functions within Processing, that they could be placed in 

a category of their own and described as structural defining functions, because 

they alter the structure of a program so dramatically. 

The setup() function 

Let's have a look at how the setup() function works and how it alters the structure 

of a program. Code that is cradled between the braces{} of the setup() function 

forms the code block of the setup() function and determines it's structure. This 

code will run only once, throughout the duration of the sketches life-cycle. 

Meaning that from the time the sketch is started to the point when you close the 

Display Window, exit the web page the sketch was running on, close the 

application the sketch was running through or do whatever is needed to end the 

sketch, the code block within the setup() function is never repeated until that 

sketch is run again. So how does that make the sketch more dynamic? Well in 

fact, when compared to the draw() function the setup() function does not 

contribute to significantly making the sketch more dynamic, but it does contribute 

to allowing the sketch to become dynamic. 

In programming the term dynamic is often used to describe the changing effects 

of a program. If we where to contrast this definition with our previous example of 

The setup() function 92


the interface01 program, we would see that this program is not dynamic as from 

the time that the sketch starts to the point when the sketch is terminated, the 

program does not change. However if we where to add animation to the images, 

or make the “buttons” of the interface clickable, then the program would be 

dynamic. 

So how does the setup() function contribute to this? 

One of setup()'s main forms of contribution to active mode sketches is in 

something we call assignment. Assignment is actually not a new concept to us as 

we have already used it several times in our previous sketches and is often 

invoked in most programming languages with an equals sign “=” which, in 

programming, is called an assignment operator. For example we have previously 

used assignment in the following context, when loading an image into a sketch in 

preparation for it to be rendered: 

img = loadImage(“myBitmap.png”); 

The purpose of assignment is to make whatever the value on the left side of the 

operator, equal the value that is on the right side of the assignment operator. In 

this way assignment can be a relatively straight forward or complex procedure. 

For example if we have a simple value such as a number or typographic character 

on the right of the assignment operator, the assignment of that value to whatever 

exists on the left is relatively straightforward because we're just simply telling 

Processing to make whatever is on the left of the assignment operator be the same 

as that which is on the right and then store those values in the computer's 

memory. However if we have an expression, a command or both on the right of 

the assignment operator the task of assignment can become more complex not 

only for Processing but also for us to keep track of. 

In the previous example we are assigning the value of the bitmap image that 

exists in our data folder called myBitmap.png to img, by using the loadImage() 

function. 

But, what exactly is going on in this assignment statement, as the computer that is 

running the sketch sees it? 

Firstly the computer running the sketch must process the call to the function 

loadImage() this requires processing power, and secondly the computer having 

realized what the loadImage() function requires after processing it now accepts 

the parameter “myBitmap.png”. 

The setup() function 93


In order for it to accept this parameter it has to allocate a certain amount of it's 

memory to load the image. Computers have a limited amount of memory and the 

larger the bitmap image's size (in terms of kilobytes, megabytes, etc.) the more 

memory they require to be loaded into a sketch. As a result the computer must try 

to allocate memory that has not already been assigned to another value and does 

not request more memory than is necessary. All of this work performed by the 

computer is performed without us having to know anything about the steps it must 

take to display the image in our sketch. 

As you can see, although this assignment statement was relatively easy for us to 

create, the steps that our computers must take in order to make what we are 

requesting possible is actually not so straightforward. 

The setup() function can be very useful in a situation such as this, because the 

previous statement is so resource insensitive it is not the kind of statement we 

would like to have repeated throughout the duration of our running program. 

Doing this will simply cause a bottleneck effect on the resources of the computer 

running the sketch and ultimately cause the sketch's performance to drop, as the 

computer struggles to keep up with our requests. 

The setup() function as a result will run only once throughout the duration of a 

program, and is designed to keep system performance at optimal speeds so that 

our sketches can run more efficiently with the code that does need to be repeated 

such as that of the draw() function. 

The draw() function 

The draw() function differs substantially from the setup() function in that it is 

designed to repeat the code block associated with it and cradled between it's 

braces. The ability to repeat code and have it update itself in the process is a key 

feature in creating dynamic content. For example when creating interactive 

programs it is quite useful to know the position of the users mouse, so that you 

can use this information to determine whether the user is hovering over a button, a 

scroll bar, an image or other interactive interface feature. As the user is likely to 

move the mouse around several times while the program is running, the mouse's 

position will change regularly. Knowing the mouses current x and y position and 

being able to compare it with a previous x and y position can tell us something 

like which direction the user is moving their mouse in, this information can be 

used to enhance the interactive quality of the application. 

The draw() function 94


Using the setup() and draw() functions in Processing is actually quite easy, and in 

the following example we'll use them for the purpose of getting the user's mouse 

position in terms of x and y coordinates and then use the println() function to print 

these values to the debugging console. 

Enter the following code and run it. Don't be alarmed when Processing starts to 

print line after line of information to the console, this is actually the desired 

effect. Move your mouse around in the Display Window to see the values update 

in the console view then close the Display Window when you are done: 

void setup(){ 

size(510,300); 

} 

void draw(){ 

println("The Mouse's X position is " + mouseX + 

" The Mouse's Y position is " + mouseY ); 

} 

The Mouse's X and Y position is updated every 60th of a second and printed to the 

console 

95


Experimentation 

The setup() function must always precede the draw() function, and is used to 

define the initial properties of the sketch such as the size of the sketch. The size() 

function when used within an active mode sketch must always follow the setup() 

function before any other statements. If we had images to display in our sketch 

assigning them to variables would generally be done within the setup() structure, 

we'll have a look at this technique a little later. 

The draw() function repeats once every 60 th of a second by default, but this 

behaviour can be changed with the frameRate() function which would be called 

within the setup() structure too. 

Within the println() function you might have noticed something a little different, 

two new commands, mouseX and mouseY are system variables in Processing that 

store the X and Y position of the mouse when it is over the window the sketch is 

running in. When used within a sketch they simply return a number that is either 

the respective X or Y coordinate of the user's mouse. It is also worth noting that it 

is necessary for the println() function to be repeated within the draw() structure 

because whenever the user moves the mouse within the Display Window a new 

value for the mouse's x and y position replaces the old value for the previous 

position of the user's mouse. If this command was within the setup() function 

Processing would only print the mouse's x and y values once and not again. 

Although this is perfectly valid code it, is not very useful to us because if the user 

has moved the mouse since the start of the program (when setup() ran for the first 

and only time) the current position of the user's mouse would not have been 

updated thereafter. The statement to update the mouse's x and y position would 

not have been repeated so according to Processing the x and y position of the 

mouse would be the same as when the program first started, this is obviously not 

the case if the user has moved the mouse. 

The repetitious nature of an active mode sketch 

Experimentation 96


The mouseX and mouseY system variables are important keywords in 

determining the interactive nature of many sketches so lets attempt to use them in 

another way that is more directly related to the visualization of sketches. 

Add the following statement before the println() statement: 

line(0,0, mouseX, mouseY); 

The mouseX and mouseY system variables can be used to add interactivity to a sketch 

After running the sketch you should be able to recreate an image within the 

Display Window like the preceding image. The line() function is used to draw a 

straight line in Processing and accepts four parameters in the form of the starting 

point of the line's x and y coordinates and the end point of the line in terms of x 

and y coordinates. In our sketch we made the starting point of the line the origin 

of the sketch, that is (0, 0) or zero x and zero y and we made the end point of our 

line equal whatever the mouse's current x and y values are. There are infinite 

ways of using the mouseX and mouseY system variables to create interesting and 

interactive qualities within a sketch, and they don't always have to relate to 

positional data as in our previous statement. For example, if we wanted to use the 

mouse's x value to determine the greyness of the line we could add the following 

statement to effect the strokes color, which we will add before the line() 

statement: 

Experimentation 97


stroke(mouseX/2); 

Remember that the stroke() function used in this way with only one parameter 

accepts values between 0 to 255 which relates to the greyness of the following 

strokes that are drawn? So because the size of our sketch is 510 pixels across our 

mouse's x position will, in the context of this sketch, return a value between 0 

and 510 for the mouseX system variable, as any value greater than this would 

mean that the mouse is no longer positioned over the sketch. Bearing this 

information in mind we can use what we know about the width of the sketch and 

divide this value by 2 so that we never receive a value greater than 510/2 or 255 

which is white, when input as a parameter of the stroke() function. This is a very 

simple example of mapping one value to another but Processing conveniently 

provides us with a more sophisticated method of mapping values by use of the 

map() function which we will look at in more detail later. 

By linking one value to another we can start to create some interesting effects, within our 

sketch 

Try experimenting with the mouseX and mouseY system variables until you are 

comfortable with them as we will be using them quite regularly in our following 

sketches. For example try combining the previous sketch with an ellipse that 

attaches itself to your mouse and has an interactive transparency feature. 

Experimentation 98


Here's a hint: 

More interactivity can be added to this sketch example quite easily 

fill(50, 60, 127, ??/2); 

ellipse(??, ??, 50,50); 

As you might remember, the order in which commands are issued in many 

programming languages is really quite important. So when Processing reads your 

code it is important that commands are issued to Processing in the correct order, 

for example we would not want to have a command that updates the color of an 

ellipse's fill after the ellipse has been drawn to the Display Window. We are 

already aware of this from our static mode sketches, however in active mode even 

if you do have a fill() command after an ellipse() command to update that ellipse's 

fill your results sometimes might be more forgiving. 

As active mode requires that the code within the draw() structure is repeated there 

remains a history from one execution of this code to the next. What that means is, 

even though the fill() command is issued after the ellipse() command when the 

program repeats the next time around Processing will remember what the value of 

the fill was set to in the previous execution and update your ellipse in the current 

cycle to match that command of the previous execution. Currently this might not 

seem like a big issue to you because you are ultimately getting the results that you 

want, but this is at the expense of creating ambiguity within your program. This 

could also lead to possible errors later in the programs development cycle, and is 

therefore not a recommended methodology for several reasons. 

Firstly, it is not clear within the order of such a program why the fill() command 

is being called. Whereas if the fill() is issued before ellipse() it is clear that it is 

meant to effect the color of the fill of the next ellipse that is drawn to the Display 

Experimentation 99


Window. Secondly, if there are other values depending on your ellipse's fill being 

a particular color at that point in time, and these values precede the fill() 

command these values will always be calculating their results based on the color 

of the ellipse's previous fill color and not the current color for that particular 

cycle. This color only becomes evident the next time the program repeats, and by 

then the visual representation of the fill will no longer match the values that are 

used in calculations preceding it. This could lead to inaccurate calculations such 

as division by zero which could cause your program to halt or even worse to 

crash. Needles to say that although you can get the results you are hoping to 

achieve by structuring your program in a manner that contradicts appropriate 

ordering, you might in effect be causing yourself more problems in the long run 

than necessary. Always consider how the ordering of your commands and 

structure of your program can be improved. 

Ordering statements appropriately can contribute significantly to the readability of your 

code. 

Experimentation 100


Datatyping 

You might have noticed something else that's new about the active mode structure 

of a sketch, that being the usage of the void keyword preceding both the setup() 

and draw() functions. The keyword void is used for defining functions that do not 

return a value, all other user defined functions must return a value of a certain 

type of data. The setup() and draw() functions differ significantly from their roots 

in the C/C++ main() function in that they are not intended to return a value of any 

type of data to the main program, the mandatory usage of the void keyword 

ensures this. We'll have a look at user defined functions in more detail later. 

The process of assigning a type to data is known as datatyping. There are many 

different types of data within Processing we have already had a look at some of 

the categories that the different types of data within Processing can be broken 

down into, but what exactly are these different types of data and how do they 

assist us in programming? 

One of the datatypes we're already familiar with is the PImage datatype. We know 

that if we want to use a bitmap image in our sketch we must first assign it to the 

object we created from PImage. That new object that we have then created has 

inherited all of the properties of the PImage data type amongst which is the ability 

to resize the image, get information about the pixels that make up the image and 

what the alpha and color values of each pixel making up the image is. We did not 

have to tell Processing what a pixel is or how we would like to use it, these 

definitions exist already predetermined within the PImage class, which will be a 

body of code that exists somewhere on your computer (probably in the location 

you installed the PDE). Now that we have a new object instantiated from the 

PImage class it has inherited all of the properties that define that particular type of 

data, in other words the new object we have created has been datatyped as 

PImage. 

But in order to understand what is really going on here we need to look a little 

deeper... 

Datatyping 101


Variables 

Variables are common to most programming languages as they provide us with a 

means of storing data within the memory of a computer without having to know 

the process the computer has taken to store that data and where exactly within the 

computers memory that data has been stored. This provides us with a convenient 

method for accessing data, without having to understand the complexities of 

manual memory management as might be the case in lower level languages. Lets 

have a look at how variables play a part in helping us store data. 

Using variables is pretty straight forward and can be thought of as a two step 

process, 1.) Declaration and 2.) Assignment. 

The second step we are already familiar with, which could imply that you might 

have already used variables in your previous sketches, and this is in fact correct. 

You have used both steps of variable creation in your previous programs as 

variable assignment relies on declaration. 

Declaration is the process of giving the data you are representing in your program 

a name, and is a process that involves datatyping (preformed by the programmer) 

and memory allocation (performed automatically in Processing). So lets have a 

look at a declaration in the following statement: 

PImage img; 

This is known as a form of variable declaration, you might at this point be 

thinking “I thought this is supposed to be object instantiation (as it has previously 

been referred to)?” You'd be right on both counts in this particular case because 

there are in fact two different things going on here. Firstly the PImage class 

defines all objects that are instantiated from it by whatever code that makes up it's 

class body, and because PImage is specific to Processing's API and not something 

that exists readily within other programming languages referring to the preceding 

statement as object instantiation reveals the underlying structure of what is going 

on in Processing when compared with other programing languages. However, 

since PImage is a class defined within Processing's API and can be used for 

datatyping the preceding statement can also be viewed as declarative, as such img 

can be referred to as an object variable. In contrast lets have a look at a simpler 

declaration that does not involve a Processing specific datatype, which can make 

the process of defining variables easier to grasp: 

Datatyping 102


int myVar; 

The keyword int in this statement is used to datatype a variable with the 

properties of type integer. 

Integers are primitive datatypes that must be whole numbers, such as 0, 5, -1, 

2430 and so on. They cannot have a decimal value. All we are doing at this stage 

is giving the variable a name, that being myVar, we have not given the variable a 

value yet the value would effectively be an integer, and associating the variable 

with a value is specifically what assignment is for. 

In the above statement we have declared a variable called myVar and datatyped it 

as an int. So when we want to use the variable and the data associated with it in 

our program we can simply refer to it by it's name for example: 

println(myVar); 

However this is getting ahead of ourselves a little, as you might remember one of 

the main reasons we use variables is so that we can associate data with them 

through the process of assignment. In the previous example we have declared a 

variable but not given it a value, so lets restructure the example to be more 

meaningful: 

int myVar; //Declaration 

myVar = 5; //Assignment 

println(myVar); //Prints 5 

In the second line we have used assignment to associate the numerical integer 

value of 5 with our variable, and in the third line we have put the variable to work 

by getting println() to read it's value back to us. You might also notice that 

variables are never placed between double quotes, like the literal strings we have 

been using with the println() function up till now. 

What makes variables so special is that we can get them to store any value that is 

valid to it's datatype, change this value then re-use it in another statement with the 

new value, without the help of variables a task like this would be very 

impractical. This is particularly useful as we never have to know what address the 

variable we are using has in memory, our computers take care of that for us. 

Here's an example of the changing (or variable) nature of a variable: 

Datatyping 103


int x; 

//declaration 

x = 5; //assignment x is now 5 

x = x + x; //assignment expression x is now 10 

println(x); //Prints 10 

The value you assign to a variable can be changed when ever you instruct your 

program to do so, usually through use of the assignment operator. As a result in 

the previous example although we started off with the variable we called x having 

a value of 5 assigned to it in the second statement, in the next line we added it's 

current value of 5 to itself then reassigned that new value of 5 + 5 (on the right of 

the assignment operator) back to itself (on the left of the assignment operator), 

making x = 10. Using this simple method we have represented two different 

values of 5 and 10 with only one variable, x. That does not mean that x could be 

either 5 or 10 it simply means that at the start of the program x was 5 and by the 

end of the program x ended up being 10. By having one variable that can be used 

to represent many different values we can save on memory as at any given time 

that variable can only have one value associated with it, meaning that if a new 

value is assigned to it like in our previous example that new value will replace the 

old one and so on. Not only does this make our program run more efficiently but 

it also makes keeping track of the representations of the different data in your 

program more manageable. 

Variable Scope 

An important aspect of working with variables is that they can be accessed at 

various places in your program so that the values associated with them can be 

referenced (in their original form) or changed and then referenced. For example 

you can reference a variable in one statement, run a couple of other statements 

then choose to reference the original variable again even with all the code 

separating the the first reference from the second, Processing will still remember 

what the variable you are referring to is. 

But not every variable is accessible from every place within a program. Variable 

scope refers to the enclosing range within a program that a variable can be 

accessed. For example variables defined within the setup() function are not 

accessible to the rest of the program, which is why setup() is best suited for 

assignment in terms of dynamic programming. As such there is a scope in which 

variables can be defined such that they are accessible from every place within a 

sketch, we call this the global variable scope. 

Datatyping 104


Erroneous code is produced from a lack of considering variable scope 

As you can see in the previous image x cannot be accessed from within draw() 

because it has been initialized within the setup() function. Initialization is the 

process of combining variable declaration and assignment into one statement. For 

example the following declaration and assignment statements can be written as 

such: 

int x; 

x = 20; 

//declaration 

//assignment 

or the statements could be combined in one statement and written as such: 

int x = 20; //initialization is both declaration and assignment 

Although the latter statement might save you some time in terms of typing, it is 

something you should be careful of doing when taking variable scope into 

consideration, as when this method of initialization is used within setup() it is 

going to create variables that are not accessible (and therefore cannot be 

referenced) from outside of the setup() structure. 

The proper way to address this issue would be to declare the variable outside of 

both draw() and setup(). Generally it is not a good idea to declare a variable more 

than once because this could cause unnecessary overhead on your program, as 

such, declaring variables within the draw() structure is best avoided when ever 

possible. Nonetheless, declaring variables within the draw() structure sometimes 

cannot be avoided and as a result is considered to be valid code. 

Each time you use a datatyping keyword for variable declaration Processing 

thinks you are trying to create a new variable, and does not perceive the statement 

as updating the already existing variable with the same name. 

Programming like this tends to look ambiguous and difficult to read. However, as 

already mentioned, there are times when declaring a variable within draw() is 

unavoidable, or in some cases can even contribute to the readability of your code. 

Datatyping 105


Basically, what this boils down to is that where you choose to declare your 

variables is your choice, but there are also certain rules in place that if you are 

aware of, can make this decision somewhat easier for you. 

Lets restructure the previous example using a more readable format that takes 

variable scope into consideration: 

int x; 

//declare variable only once in global 

//variable scope 

void setup(){ 

//assign a starting value to the 

x = 20; 

//variable. Note: accessible within 

} //setup()structure 

void draw(){ 

//access the variable from elsewhere in 

println(x); 

//the program. Note: also accessible 

} //within draw() structure 

By declaring a variable outside of the setup() and draw() functions we have 

created a global variable. A global variable can be accessed from both the setup() 

and draw() structures, it is said to have a greater scope than a variable that is 

defined within the setup() or draw() structures. Within setup() the variable has 

been given a starting value, remember that the variable already exists before the 

program reaches setup(), so setup() is not being used to create or declare the 

variable only for assignment. By the time the program gets to draw the new value 

associated with the variable is the value that the println() function reads each 

time it repeats. It's also worth noting again that only the code block within the 

draw() function is repeated. 

Interacting with images 

We're going to use what we've learned to have an image in a sketch react to our 

mouse's Y position, making the image move up and down accordingly. You might 

have seen this effect when viewing so called “high resolution” images that are 

larger than the window they are begin displayed in, in an online gallery. 

Locate the image named doorsClosed.png and drag it into your sketch. We can 

then start by rendering the image at the origin with the following code: 

//declare global variables 

Interacting with images 106


PImage doors; 

void setup(){ 

//size() always first in setup 

size(800,600); 

//use setup() for assignment where ever possible 

doors = loadImage("doorsClosed.png"); 

} 

void draw(){ 

//draw the image 

image(doors,0, 0); 

} 

When loading images into an active mode sketch, it's important that you declare 

the images object variable name outside of both setup() and draw(). This makes 

the object accessible as a global variable so that it is now within the scope of both 

setup() and draw(), this is important because we will need to access the new 

object variable from within both structures. It is advisable to use assignment in 

the setup() structure so that the image is loaded into the new object variable only 

once, placing the loadImage() function, within an assignment statement, for the 

new object inside the setup() structure, ensures this. 

Finally once we have set the image up for rendering we can use the image() 

function, as usual, to display the image in the sketch. It's worth noting that 

because the image is static, it is not possible to see that the image is in fact being 

redrawn to the Display Window approximately 60 times per second, when the 

sketch is run and although this might sound like a lot of excessive usage of system 

resources, most modern day computers should be able to handle this framerate for 

one image with relative ease. However, we will take a look at how to reduce the 

amount of times Processing cycles through the draw() structure in second, when 

we use start using the frameRate() function, a little later. 

Making the image follow the mouse's Y position is actually quite easy, modify the 

image statement to read: 

image(doors, 0, mouseY); 

Now when you run the sketch your image will start to move up and down in the 



Display Window because the value that the image() function is reading for it's Y 

parameter is the system variable mouseY. As you might recall mouseY stores the 

mouse's current Y position. If your mouse has moved the new position of your 

mouse's coordinate will replace the previous value that was stored in the mouseY 

system variable of the previous run-cycle, and as a result the image will be drawn 

in a new position. 

But why does the image appear to be streaking across the Display Window? 

Streaking 

The streaking effect 

We have told Processing to repeatedly draw the image by placing the image() 

function within the draw() structure, as a result the streaking effect is actually 

caused by the “ghosting” of the previous image having been drawn to the Display 

Window and not being erased before the image is redrawn in a new position for 

the current frame. To fix this effect we need to tell Processing to first clear the 

Display Window before drawing the image again in the current position. We can 

do this quite easily by adding the background() function before the image 

statement, thereby clearing the Display of the the image's previous rendering. Add 

the following statement before the image() statement in the draw() structure: 

background(0); 

Now when you run the sketch it should act in a more predictable fashion. I've 

chosen black as a background color but you can choose any color. There are 

however several areas that can be improved on, 

• firstly the way in which the image moves in relation to the mouse is not 



very interesting to interact with. It would seem that the image appears to 

be stuck to the mouse. 

In order to fix this we will make the image lag slightly behind the mouse 

and then slowly catch up to the position of the mouse by creating a new 

variable that we can use to control the speed at which the image moves. 

This will create the impression of the image's movement being affected by 

friction. 

• Secondly because the image's origin is it's top left hand corner, when we 

move the mouse down we tend to expose the background above the image, 

so we'll also make the image react to the mouse's y position in relation to 

the center of the image and not it's top left hand corner. This reduces the 

possibility of exposing the background and makes the image more of a 

focal point. 

• Finally we will constrain how far the image can move along the Y axis so 

as to completely eliminate the possibility of exposing the background. 

Friction simulation 

Friction is the force that resists the relative motion of something else (like an 

object, a gas, a liquid, etc), and is the effect that we will be attempting to simulate 

(in a simplified form) in this sketch. By moving the mouse up and down within 

the Display Window the image should try to follow the mouse and slow down as 

it approaches the mouse, this will create the impression of friction. 

We'll start by creating three new variables. Add the following statements at the 

top of the sketch, below the PImage statement: 

float yPos; 

float difY; 

int frict = 30; 

//declaration related to image Y position 

//declaration related to difference between 

//mouse and image's Y position 

//initialization, friction. high values make 

//image move slower 

float is a keyword for declaring floating point variables. Floating point values are 

numbers that have a fractional part, that is to say they are numbers with a decimal 

value such as 1.0, -2.9865, 10000.423, 0.0000001 and so on. Floating point 

numbers will tend to require more memory for storage so if you can get away 



with representing the number data as type int and not compromising the integrity 

of your program you should consider doing so. 

We are using the float datatype in this program because we will be using division 

in one of our expressions. This is important because true division will always 

return a number with a decimal value, if you were to use an int instead of a float 

or double depending on the programming language you are using, you risk having 

datatype conversion errors or truncated integers returned. As a result when you 

use division in your expressions always consider whether representing that data 

with an int is a good idea or not. 

The three variables yPos, difY and frict are going to be used to represent three 

different values of which only one will remain constant throughout the duration 

that the program is running. The only variable that will remain constant is the frict 

variable. As a result the frict variable has been initialized through a declaration 

and assignment statement outside of both setup() and draw() structures. This 

value will control how fast or slow we would like the image to move towards the 

mouse. 

Creating a variable such as this within the global variable scope, will give us 

access to the variable within both setup() and draw() thereby allowing us to tweak 

the value associated with the variable and have it update throughout the program. 

This will save us some unnecessary work in the long run. When the sketch is 

complete setting the frict value high will cause the image to appear to have more 

resistance when moving towards the position of the mouse ultimately making the 

image move slower, and setting this value low (but not to zero, because division 

by zero is not permitted in mathematics, as is the case in programming) will cause 

the image to appear to have no resistance and move almost immediately to the Y 

position of the mouse. 

The variable yPos will be used to store the Y position of the image and also 

update the Y position of the image, and the variable difY will be used to store the 

difference between the mouse's Y position and the center of the image's Y 

position. Both of these variables will need to be updated regularly for each of the 

cycles of the draw() function, this is because each time the user moves the mouse 

the position of the image must change as a result of difY now being less or more 

depending on whether the mouse is closer or further from the images center. 



Variable naming conventions 

Before proceeding, it's worth noting the convention I've used for naming these 

variables. There are several rules (depending on what language you are 

programming in) that determine what a valid variable name is generally you'll 

find that many popular higher level languages share these similarities regarding 

valid variable declaration, 

1. Variable names can only contain alphanumeric characters and underscores 

(that is “_”, “a” to “z”, “A” to “Z” and/or “0” to “9”). Spaces cannot be 

used in variable names. 

2. Variable names cannot start with numbers. 

3. Variable names should be descriptive but not verbose, for example “yPos” 

as opposed to “Y_Position_Of_The_Image”. 

4. Use consistent casing. Variable names generally do not start with an 

upper-case character. This convention is reserved for Classes. In the 

previous example I've used a mixture of both upper-case and lower-case 

characters to name my variables such as yPos which is intended to be an 

abbreviation for “y Position” or difY which is an abbreviation for “the 

difference in Y positions”. 

Some programmers might use different conventions including underscores 

because to them this might look more readable y_pos or dif_y. Either of 

these conventions is perfectly valid. But you should determine which 

convention you are using, and stick with it throughout your program. 

Changing from one naming convention to another can often make a 

program confusing and less readable. 

5. Your variable names should be self documenting, that is to say they 

should be descriptive about their purpose without having to include 

additional comments explaining their purpose. This point is with the 

exception of intentionally, explicitly documented code, which is generally 

a convention used for teaching programming. 

6. Variables that are typed in all upper-case characters are often referred to 

as constants. Their value is not supposed to change. This is simply a 

naming convention and there is nothing stopping you from changing the 

value of a constant in many higher level languages, although this is not 

recommended. So beware when using this naming convention as it could 

lead to confusion if not used properly. 



Planning and Pre-Debugging 

We'll start by making an assignment within the setup() structure that sets the yPos 

value to the center of the Display Window. This has not effected the position of 

the image yet, because we have not linked the yPos variable to the image yet. Add 

the following statement at the end of the setup() structure, before it's closed 

braces: 

yPos = height/2; 

If we wanted to make sure that yPos is returning the value we are expecting it to 

return then we could add a println() statement within the draw() structure to test it. 

The statement would look like this: 

println(yPos); 

If the program was run at this stage it should print a value that is representative of 

the center of the Display Window's height. Using this method of tracking 

variables is a common technique for debugging a program and provides an easy 

and convenient method of understanding how the program is changing and 

updating values internally. When you are happy that the program is returning the 

results you were expecting you can simply comment out the println() statement 

and resist deleting the statement until the program is fully completed, tested, 

documented and functional. 

In order to render the image at the correct position we need to: 

Determine what the Y position of the users mouse is (mouseY) and from this 

value subtract the sum of the Y position of the image (yPos) and half of it's height 

(doors.height/2). The latter value (yPos + doors.height/2) describes the position of 

the image with relation to it's center. 



The image's movement will react to the mouse's relative position to the images center. 

Once we have the mouseY – (yPos + doors.height/2) value we will assign it to 

difY, then in the following statement we'll divide difY by the frict variable. This 

is important because we're then going to take that value (that is the answer of difY 

divided by frict) and add it to the yPos variable, meaning that if the value of difY 

was initially returned as 90 dividing it by frict would return a value of 3 (because 

90/30 = 3) which is subsequently the value that we add to the images current Y 

position to cause it to move down by a value of 3 (plus moves down the Y axis 

minus is moves up the Y axis). On the other hand if difY returned a value of -90, 

this would mean that the users mouse is above the center of the image and the 

value of -3 would be added to the images Y position causing the image to move 

up by 3. 



As the mouse's Y position is less than the center of the image, the image is forced to 

move up. 

Then we're going to assign the sum of those values (yPos + difY/drag) back to the 

yPos variable. 

Finally we will use this value to determine the position that the image is currently 

rendered at. 

The results of this method is that the image will start moving fast towards the 

mouse then get slower as it approaches the mouse. 

Implementing a Programmatic Solution 

To summarize we are dividing the difference between the mouse's Y position and 

the center of the image with the frict value, then adding this value to the images 

current position. We can express this programmatically with the following two 

statements, which you can add to your sketch before the image statement: 

difY = mouseY - (yPos + doors.height/2); 

yPos += difY/drag; 

In the second statement we use a technique known as Augmented assignment 



which is the process of condensing a statement that uses the common technique of 

using a variable in an expression, then assigning the value of the expression back 

to the same variable. For example the statement: 

x = x + 5; 

Can be expressed in augmented assignment form as: 

x+=5; 

Both statements evaluate to the same answer, the latter is a more commonly used 

method for this type of statement, as this kind of statement is so commonly 

implemented in programming. Some other examples of augmented assignment 

follow: 

x = x -5; 

//Can be expressed in augmented assignment form as: 

x-=5; 

x = x * 7; 

//Can be expressed in augmented assignment form as: 

x*=7; 

/= and %= can also be used in augmented assignment. As you can see the 

following statement used in our sketch is an example of augmented assignment: 

yPos += difY/drag; 

//Can also be expressed as: 

yPos = yPos + difY/drag; 

At this point if you were to run the sketch, your image still would not move in 

relation to the two statements you just added to your sketch. However if you were 

to add a println() statement for the yPos variable you would see the numbers 

indicating that the code is working. It's always a good idea to test an 

implementation before fully integrating it into your program when ever possible, 

with the println() function. 

In order to create a link between these two statements and the y position of the 

image we would need to place the variable yPos into the Y parameter field of the 

the image() function. However, if we where to do this our image would continue 



to move beyond it's boundaries and display the sketches background. Fortunately 

we have a function in Processing that allows us to stop values from getting too 

high or too low. 

Constraining Values 

The constrain() function works by clamping a value between a range that you 

specify. It accepts three parameters, the first parameter is the value that you want 

to constrain and in our case this would be the variable yPos. The next parameter is 

the minimum value of the range you would like the value constrained between 

and the final parameter is the maximum value for the range that the value yPos 

will be constrained between. 

Modify the image() statement to match the following code fragment, and 

complete your sketch: 

image(doors,0, constrain(yPos, height- doors.height, 0)); 

At first this statement could look a little intimidating, but in fact you already 

know what's going on in most of the statement and it's only the Y parameter of the 

image() function that is somewhat different. 

As you are aware the image() function accepts three parameters, firstly the object 

variable containing the image (doors), secondly the value of the X position you 

would like the image rendered at and finally the images Y position. 

This statement is in the draw() structure and as a result will be repeated 

throughout the program's run-cycle, this means that every time the user moves the 

mouse the difY variable will change and as a result so too will the yPos variable. 

It is therefore necessary for this statement to be within the draw() structure, or 

these changes will never be seen. The Y parameter of the image() function 

accepts an expression in this example, the expression consisting of the constrain() 

function: 

constrain(yPos, height - doors.height, 0) 

This expression when evaluated, returns the value of the image() function's Y 

parameter. The constrain() function clamps the yPos value so that the image is 

never raised above the value returned from height – doors.height and never 



lowered below 0, this will be the point where the image's origin matches the 

Display Window's origin. 

The area which the image's motion is constrained to, exists above and outside of what is 

visible within the Display Window. 

Of course if you think this example could be easier to read, you're probably right. 

For example you could declare a global variable to which you assign the previous 

expression to within the draw() structure. The additional overhead that such an 

action would create in this example is minimal, for example: 

... 

float imageY; 

void setup(){ 

... 

doors = loadImage("doorsClosed.png"); 

... 

} 

void draw(){ 

… 

imageY = constrain(yPos, height- doors.height, 0); 

image(doors,0, imageY); 

} 

However in order to demonstrate how expressions can be used as parameters in 

code, this example uses the former method which does not accommodate for the 

imageY variable. Nonetheless if you would like to see how this example can be 

implemented you can examine the comments in the imageScroll.pde file. 



Branching 

When we write a program we generally don't want the script to do the same thing 

every time we use it. Often, what we want is a script that is versatile in it's 

application. Excluding this versatility would make the interactive software 

predictable and boring. We therefore use certain built-in structures that help us 

control the way in which our programs run, allowing us to skip blocks of code 

and execute other blocks of code before others in a non-linear way. This can be 

done in a dynamic and changing sequence based on the users input, the logic of 

the program, the time of day or whatever other characteristic we choose to model 

into a program. The process of creating this dynamic ordering that determines the 

programs flow of control is what is referred to as branching. 

Branching is also referred to as conditional programing and is the process of 

creating code that has the ability to choose a certain path based on a set of 

conditions stipulated in the program but which can also be influenced by 

conditions outside of the program, such as a user interaction. The conditional 

statement is syntactically a single statement made up of multiple branching 

statements. What determines the course of action that the program follows is a 

boolean value of true or false returned from a comparison within the structure of a 

conditional statement. 

The if() structure 

The if() structure can also be referred to as an if statement because although, the 

statement is in practice made up of multiple statements the structure of the if 

statement is treated like a single statement during compilation and/or 

interpretation. 

if statements must always have a conditional to qualify as an if statement. An 

example of the structure of an if statement follows: 

conditional 

if(expression1){ 

… do statements 

} 

keyword 

if() statement 

structure 

Branching 118


Multiple if statements can be used within the same program and even within the 

same draw() structure. They are identified by the if keyword followed by 

parenthesis containing a conditional. The conditional for an if() statement will 

always return a value that is true or false through the process of evaluation which 

can be based on a comparison expression. We'll have a look at the process of 

comparison a bit later, for now we'll focus on the boolean datatype. 

Data that can either be true or false is a primitive datatype known as a boolean. 

Just like all primitive data types booleans can be declared with a keyword 

followed by a variable name. 

The expression within the conditional of an if() statement must, through the 

process of evaluation, return a boolean value of either true or false in Processing, 

in order for the program to continue. In other programming languages the 

conditional can also evaluate to a 1 or a 0, with 1 being representative of true and 

0 being representative of false. The language's compiler/interpreter will then 

convert the 0 or 1 to a boolean equivalent value through a process known as type 

casting., Processing, however, requires that the conditional evaluate to a boolean 

value of true or false, so that automatic type casting can be avoided. As you are 

aware 1 and 0 are of type int in Processing and the Processing does not 

automatically convert them to boolean values. In the event of your conditional 

evaluating to an int or datatype other than a boolean you will receive a “cannot 

convert” datatype error. Later we will have a look at how to use Processing's inbuilt 

ability to prevent automatic type casting to our advantage. Although 

automatic type casting is favored in some programming languages it is usually an 

inherent legacy feature of a lower level language that a current higher level 

language is based on. In Processing type casting must be done explicitly with a 

type casting function. 

Type casting errors 

Branching 119


If we were to declare a boolean variable and use it in an if statement, it might look 

something like this: 

boolean myValue = true; 

//initialization 

if(myValue){ 

//if conditional returns true 

… run these statements //statements within if() structure 

} //are run 

...then run these statements 

//if conditional is false entire if 

//structure is skipped 

In the previous example we have used initialization to declare a variable of type 

boolean and assign the value of true to it. We then used the new variable in an if() 

statement conditional (the part between parenthesis following the if keyword). 

The way that an if statement works is the program will evaluate the expression 

within the conditional, if the conditional evaluates to true the code delimited 

within the if() statements braces will be run. However if the conditional evaluates 

and a value of false is returned, it will skip the code within the if() statement's 

braces and proceed to the statements that follows, for example: 

boolean myValue = false; 

if(myValue){ 

… don't run these statements 

} 

...run these statements 

//variable initialized to 

//false 

//conditional evaluates to 

//false 

//entire if() structure is 

//skipped 

Using this method of programming we have allowed our program to make a 

decision based on certain conditions, in a real world situation the conditions the 

program would evaluate would usually be dynamic for example a user interaction 

or some other dynamic feature. 

Branching 120


Relational Operators 

Writing if() statements becomes really interesting when more than one expression 

is used in the conditional. Up until now we have only used a single expression as 

a condition. 

Using a single expression within a conditional 

In the previous image the highlighted area indicates a single expression for the 

conditional in the form of a variable called myBooleanVar which has been 

datatyped as a boolean, in this case the variable has been assigned the value of 

true, therefore the conditional evaluates to true. This simplistic approach to using 

if statements can be useful in some situations but, the ability to use comparison 

within a conditional statement extends it's usefulness much further. 

Comparison 

A comparison requires at least two entities (which are most commonly numerical 

values and/or expressions in Processing, but can extend into strings in some other 

programming languages) and a relational operator (also known as a comparison 

operator in other programming languages). Comparisons included within a 

conditional, just like the previous expressions we've been working with, must also 

evaluate to a value of either true or false. Comparisons simply instruct the 

program to evaluate the two expressions on either side of the relational operator 

and compare the results of the two expressions with each other and from this 

comparison return a boolean of either true or false. Relational operators include: 

Branching 121


< less than 

> greater than 

== equality 

= is greater than or equal to 

!= inequality 

Let's have a look at how we can use the a relational operator to compare two 

values. 

(5>1) 

This is a conditional extracted from an if() statement, it consists of a single 

comparison. The comparison returns a value of true and would be read as “ five 

is greater than one”. The next example demonstrates a comparison that returns a 

value of false: 

(5


void setup() { 

size(300,300); 

} 

void draw() { 

if( mouseY >= height/2){ 

println("Mouse is in the bottom half of the sketch"); 

println(mouseY); 

} 

println("Mouse could be in either half"); 

} 

The program starts, as always, by running the code within the setup() structure 

then moves onto draw(). Within draw() it runs the if() statement which instructs 

the program to check whether the mouse's Y position is greater than or equal to 

the height of the Display Window divided by 2. For example in our sketch the Y 

parameter of the size function within setup() is 300 so if the user has placed the 

mouse at a Y position that is anywhere between 150 and 300 then the conditional 

will return a value of true as these values are all greater than or equal to 150 (i.e. 

height/2). It's also worth noting that the relational operator that has been used in 

this comparison is the >= (greater than or equal to) operator, which means that the 

value that is returned on the right side of the operator is included within the range 

of values (as the minimum value in this range) that will cause the conditional to 

evaluate to true. What this means is that if you want a value of false returned the 

mouse must be within the range of 0 to 149. 

If the conditional returns a value of true meaning that the mouseY system variable 

has a current value of 150 or anything between 150 to 300, the program then runs 

the code delimited within the if() structure, which in this case tells Processing to 

print "Mouse is in the bottom half of the sketch" and then print the value of the 

mouseY system variable. The program then moves on to the rest of the code 

within the draw() structure. This tells the program to print "Mouse could be in 

either half", as this statement exists outside of the if() structure, it will be 

evaluated regardless of whether the if()'s conditional is returned as true or false. 

The program then loops back to the beginning of the draw() function and goes 

through the code within the draw() structure again as it has reached the end of the 

draw() structure at this point. If the users mouse is not within the bottom half of 

the Display Window this time the comparison conditional will return a value of 

false, the program will then skip the code delimited within the if() structure that 

tells it to print "Mouse is in the bottom half of the sketch" and move onto the rest 

Branching 123


of the code within the draw() structure that once again tells it to print "Mouse 

could be in either half". 

if() structures can increase the amount of options that can be programmed into a sketch. 

As you can see branching provides us with a very easy way of changing the 

behaviour of our program by including variables within a comparison that in 

themselves are dynamic. 

Extending the if() structure with else 

In our previous example, we where able to run statements based on whether the 

mouse was in the bottom half of the Display Window, if we change the 

conditional to read: 

(mouseY


of the Display Window and a different set of statements when the mouse is in the 

other half of the Display Window? 

Using an if statement to do this by itself would not be possible, but fortunately we 

can extend the if() structure with the else keyword. 

Use of the else keyword within an if() structure ensures that even if the 

conditional returns a value of false that the code that follows else (which is still 

within the if() structure) will be run, before the program exits the if() structure and 

moves on to the rest of the statements making up the program. This can 

effectively provide us with a fail safe method of ensuring that code is run within 

an if() structure before the program exits the structure. For example if we wanted 

to get our sketch to tell us whether the mouse is specifically in the upper or lower 

half of the Display Window we would modify the previous sketch to look like 

this: 


size(300,300); 

} 

void draw() { 

if( mouseY >= height/2){ 

println("Mouse is in the bottom half of the sketch"); 


}else{ 

println("Mouse is in the upper half of the sketch"); 


} 

println("Mouse could be in either half"); 

} 

Notice that as soon as you start the sketch and if your mouse is not hovering over 

the Display Window, Processing will read the mouseX and mouseY system 

variables as being 0 and 0. As a result the first branch of the if() structure is 

skipped because the conditional evaluates to false (0 is less than 150) and the 

second branch is immediately run, that being the else code block. Once you start 

moving your mouse around in the Display Window you will see the println() 

statements execute depending on which half of the Display Window the mouse is 

in. 

Branching 125


Extending the if() construct with if else if else 

There are many times when you will require more than the two branches that an if 

else construct will permit, and in that case you can use the process of nesting 

multiple if else structures within others. For example, in our previous sketch when 

our program started and our mouse was not hovering over the Display Window, 

Processing rightfully skipped the first if() control structure and went to the else 

structure. However we could capture this possibility in a condition and associate it 

with it's own code block. An if else if else construct generally follows this pattern: 

if(condition){ 

...statements 

}else 

if(condition){ 

..statements 

}else{ 

...statements 

} 

As you can see nesting if else constructs within each other is pretty easy, but 

when typed in the previous format they can be a bit difficult to read. As a result 

they are generally written in the following format, remember that because 

Processing is a free form programming language you are free to format the 

statements as you wish, however certain formats might be easier to read than 

others, for example the traditional format for an if else if else construct follows: 

if (condition){ 

...statements 

}else if(condition){ 

...statements 

}else{ 

...statements 

} 

There are no limits to how many if else structures you can nest within an if else 

construct, but bear in mind that nesting too many if else structures within others 

can make it difficult to follow and keep track of what is going on in your code. 

Processing and many other higher level languages have structures such as 

switch() that might serve your purposes better, if you want your program to be 

able to branch between a possibility of three or more control structures. 

Branching 126


Logical Operators 

Logical operators allow us to to extend our conditionals by creating a means of 

comparing one relational expression with another. They come in the format of: 

&& logical AND 

|| logical OR 

! logical NOT 

These operators can be used within a conditional to return a value of true or false 

based on the context in which they are used, for example logical AND will return 

a value of true only when both expressions on either side of it evaluates to true 

and can be used as in the following examples: 

(5>3 && 3>1) //Returned as True, because both 

//expressions are true 

(5>3 && 33 || 3>1) //Returned as True, because both 

//expressions are true 

(5>3 || 3


if (!(x>1)) 

... 

//can also be expressed as, 

if (x


PImage img; 

PImage sliderBk; 

PImage sliderFd; 

int margin = 50; 

void setup(){ 

size(800,600); 

img = loadImage("tunnel.png"); 

sliderBk = loadImage("sliderBk.png"); 

sliderFd = loadImage("sliderFd.png"); 

} 

void draw(){ 


image(img,0,0); 

image(sliderBk, width/2 – sliderBk.width/2, margin); 

image(sliderFd, width/2 – sliderBk.width/2, margin); 

} 

Starting a sketch in this way is enables us to see a template of the sketch, and 

provides us with foundation on which to build. After adding the previous code 

you should have a sketch that looks something like the following image. 

The template from which the sketch will evolve. 

Interface Controls: Setting up a Slider 129


User Defined Functions 

Now that we have a template we can start modifying it, to include some 

interactivity. One of the fundamental components of this sketch is the slider, as 

the whole idea of changing the color of an image is going to be based on the 

user's interaction with the slider. As a result we're going to start by setting up the 

button of the slider first. The kind of button we will be setting up in Processing is 

going to be determined by a range. This range will encompass the clickable area 

of the button, and because our button is part of a slider the range should 

automatically be able to adjust itself to accommodate for the button moving 

around the area that it can be dragged within by the user. 

Slider Button 

Area in which button can be dragged 

As detecting the location of the button is a fundamental requirement for this 

sketch and is something that needs to work throughout the duration that the sketch 

is running, we are going to create a user defined function that will take care of this 

requirement for us. 

Up until now we have been using Processing's built-in functions, which can 

suffice for many different situations but you will occasionally come across a 

situation in programming when the language you are coding in does not provide 

the functionality you need built directly into it's API. This is not a reflection on 

the language's inability to perform in a certain situation, but rather an intentional 

quality built into a programming language's design where paradoxically it's 

limitations, in terms of built-in functionality, can actually extend the languages 

capabilities. What this means in terms of Processing is we have a set of functions 

already provided for us, these functions already have definitions associated with 

them, by creating user defined functions we take these predetermined functions 

and combine them into new forms of useful, reusable and compact code. This not 

only allows us to extend the languages capabilities into fields that perhaps even 

the developers of the language never imagined but also to create our own 

definitions which suite the specific needs of our own applications in a more 

practical sense. 

Perhaps at this point you are wondering why all programming languages do not 

User Defined Functions 130


share the same set of functions? Many useful, popular programming languages do 

in fact share many of the same functions we find in Processing, but might be 

referred to as directives, commands or subroutines amongst other terms 

depending on which language you are programming in. Besides the functions that 

are common amongst many different programming languages each programming 

language will have certain features (perhaps in the form of functions or some 

other built in feature) that will tailor that language to the environment it is best 

suited, as defined by it's developers and possibly extended in definition by a 

community, as is the case with Processing. This feature set that contributes 

significantly to defining the language's functionality, is intentionally maintained 

within the languages definition or philosophy as this makes the feature set easier 

to contextualize and thereby easier to learn for the programmer using the 

language, creates an abstraction of commonly used resources within an 

environment and can significantly improve the performance when a user's 

program is implemented. For example, if you wanted to write your own class for 

loading and displaying images within a Processing sketch, there is nothing 

stopping you from doing that, however the PImage class is maintained as a part of 

Processing's feature set specifically for those reasons and as a result is optimized 

to run as efficiently as possible for the loading and displaying of images. 

Subsequently the possibility of you gaining any form of performance increase 

from creating your own class using Processing's built-in functions to serve the 

same purpose as the PImage class is, unlikely. As a result it's worth considering 

whether writing your own class or user defined function is applicable or not 

before setting out to do so. 

In our case we are creating a user defined function because it will make our code 

easier to read and not reduce the performance of the application, as our function 

will contribute to making our program running more efficiently than having the 

function definition within the draw() structure causing the computer running the 

sketch to process the function definition line by line every time the draw() 

structure repeats. With a user defined function we can avoid this by loading the 

function's definition into memory and calling the definition with a simple function 

call, as we have been doing with built-in functions. 

As we are using Processing's built-in functions, within the environment that they 

are intended for and best suited to, we will be enhancing the quality of our sketch 

with our user defined function rather than trying to work against the context that 

Processing is best suited. 

However, this is not to say that it is not possible to extend a programming 



language beyond the definition or philosophy of it's environment, but if that is 

your intention then you would more than likely consider abstracting a far greater 

degree of the languages built-in features within a library consisting of multiple 

classes. 

The definitions for user defined functions must exist outside of both setup() and 

draw() structures if they are to have a greater scope. Our function definition will 

reside at the bottom of the sketch and contain three main characteristics. 

1. Our function should always know whether the user's mouse is over the 

slider button or not. 

2. If the user's mouse is over the slider change the cursor to a hand icon 

indicating that the button is clickable to the user. 

3. Return a value of true or false to the main program, depending on whether 

the mouse is over the slider button or not. 

Although the process of creating a user defined function might seem new to you, 

it is in fact not really all that different to how we have been using the setup() and 

draw() function's structures. Bearing this in mind, our user defined functions are 

going to follow a very similar structure to that of setup() and draw(), for example 

expressed generically: 

datatype functionName(){ 

...function definition 

} 

Then within the context of draw(): 

void draw(){ 

..statements defining draw() structure 

} 

Now as a user defined function, applicable to our sketch: 

boolean myFunction(){ 

...statements defining myFunction 

} 

As you can see, not a lot has changed in terms of how a user defined function is 

structured in comparison to the previous example using draw(). The fundamental 



difference is that statements delimited within the braces associated with draw() 

define it's structure and not the function, as the definition of the draw() function 

exists outside of the sketch we are creating and is something that the developers 

of Processing have determined. In contrast statements delimited within a user 

defined function form a function definition, within it's braces. 

In order to use the function we will then need to include a call to the function 

from within our main program. This is very similar to the method used to call 

built-in functions such as rect(), ellipse(), println() and many other functions we 

have already used. 

Let's revise our previous example to demonstrate the process of defining a 

function then calling it from within the draw() structure: 

void setup(){ 

...statements 

} 

void draw(){ 

...statements 

myFunction(); 

} 

boolean myFunction(){ 

...statements defining myFunction 

} 

From this example you can see that a call to a user defined function is as simple 

as a call to a built-in function. This has the added benefits of making the code 

easier to read and removes the function definition from the body of the draw() 

structure. Now we can reuse the function as many times as we would like within 

our main program by simply evoking it via it's name, compare this to typing out 

every statement within it's definition in the main program every time we wanted 

to instruct the program to do what the user defined function does. 

Now that we have an understanding of how the function will fit into the program, 

lets have a look at creating it's definition. 



Creating a user defined function 

Datatyping a function 

The first line of a function definition must be used to declare the function, and as 

you are aware declaration in Processing means giving the function (variable or 

other entity) a name and datatyping it. Naming a function is a very similar process 

to that of naming a variable as you will see in the following code fragment 

forming the first line of our user defined function: 

boolean overButton() 

The parenthesis following the function name are used to contain declarative 

parameters. These parameters will be defined within the function body, in our 

case this function does not accept any parameters so we leave the parenthesis 

empty. As you have been using functions that accept parameters user defined 

function can also be created to accept parameters that you define. 

In comparison to setup() or draw() our function is being datatyped as a boolean, 

all functions must return a datatype or use the void keyword like setup() and 

draw(). As void does not return any data it is subsequently not classed as a 

datatype within Processing (and traditionally in C/C++) but as a structural 

element, this differs to other higher level languages (some of which are closely 

tied to Processing) that do consider void as a datatype. Nonetheless our function 

is going to return data of type boolean, which will be used to determine whether 

the user's mouse is over the slider button or not. 

Determining a range 

In order to calculate whether the mouse is over the slider button or not we will 

have to determine the range in which the slider button is located. We already 

know where the slider button is in terms of x and y because these are values 

determined by parameters if the image() function used to draw the image. We can 

use this information, along with the width and height object variables to work out 

the slider button's range. 



Determining the range of the button as the area covered in diagonal stripes. 

In the previous image if A and B where variables the image() function to render 

the slider button could be rewritten as: 

image(sliderFd, A, B); 

This method of expressing the X and Y parameters as variables is particularly 

useful to us because, we would like the slider button to be able to “slide” along 

the x axis, this means the value of A would need to be dynamic. 

As the slider button only moves along the x axis the variable B will not change, 

however this value is used in more than one situation, firstly to determine the Y 

position of the image that will form the area along which the slider button can be 

dragged referred to as sliderBk (short for slider background), secondly to 

determine the Y position of the slider button referred to as sliderFd (short for 

slider foreground) and thirdly referenced within the range we will set up shortly to 

determine the clickable area of the button. As a result this value has been declared 

as a variable of type int and named margin. This way if at a later stage we decide 

to move the entire slider down in order to make room for other graphical elements 

above it then all I have to do is update the value associated with margin, instead 

of having to find and change an explicit value scattered throughout the source 

code. 

The value described as A in the previous image requires a more meaningful name, 

something that is self documenting. As a result I have created the variable 

buttonXPos in the global region and datatyped it as an int: 

int buttonXPos; 

Eventually I'd like to replace the X parameter for the image() function rendering 

sliderFd in the X position determined by buttonXPos. As we are aware what the 

variable buttonXPos is going to represent we're going to set it up with a 



temporary value within our sketch to test our user defined function. So we're 

going to add a temporary statement for testing and debugging purposes to the 

draw() function which assigns a value to buttonXPos and then changes the 

image() function of which sliderFd is associated with to reflect this assignment 

statement. Once the buttonXPos variable is declared in global space, you can edit 

the draw() structure to include the first command and update the appropriate 

image command: 

... 

//temp for debugging 

buttonXPos = width/2 - sliderBk.width/2; 

... 

image(sliderFd,buttonXPos ,margin); 

Once we are sure that our function is working we will return to the temporary 

statement that we adding for debugging and testing purposes and include the 

buttonXPos variable assignment statement within an if() structure. 

We are now ready to proceed with setting up our function. To briefly recap our 

function has been declared as type boolean and given the name overButton(), 

setting up the range will occur within a conditional consisting of multiple 

comparisons and will look like this: 

boolean overButton(){ 

if (mouseX >= buttonXPos && mouseX = margin && mouseY


1. mouseX >= buttonXPos, this checks if the mouse is anywhere in the 

highlighted area. If the mouse is then a value of true is returned and 

Processing will continue to evaluate the rest of the conditional. 

2. mouseX


3. mouseY >= margin, once again this comparison is only evaluated if the 

previous comparison was true because both comparisons are separated 

with &&. This comparison returns a value of true only if the mouse is 

below the top of the slider button. 

4. mouseY


let us know that when the value returned from the function is true that the mouse 

is over the button and when the value is returned as false we can safely conclude 

from this information that the mouse is not hovering over the button. 

First we are going to declare another variable in the global scope and datatype it 

as a boolean, add the following variable to the global space of your sketch: 

boolean mouseOverButton; 

Now we'll use this variable in our user defined function to return a boolean back 

to the main program. 

boolean overButton(){ 

if (mouseX >= buttonXPos && mouseX = margin && mouseY


datatype if it is datatyped, meaning that in our case when the mouse is not over 

the slider button and we did not have an else structure capturing this possibility at 

that point our function would not be returning any data back to the main program. 

This is why it is important that we add an else structure to this if() construct, so 

that we can set the mouseOverButton variable to false, and subsequently return he 

correct data back to the main program. This also gives us an opportunity to 

change the cursor back to an arrow, indicating to the user that their mouse is no 

longer over a clickable element. 

Our function declaration and definition is now complete and we can use it in our 

main program. Calls to user defined functions are as easy as calls to Processing's 

API functions. Add the following statement to the draw() structure. 

overButton(); 

Now Processing will run the function at every frame and set the 

mouseOverButton variable within the overButton() function to true or false 

appropriately, update the cursor and return the correct value datatyped back to our 

main program, which we will soon put to use. 

Dragging the slider button 

mouseDragged() is a function that provides a structure to which we can add 

statements each time the mouse is dragged. A dragging operation qualifies as a 

user clicking and dragging a mouse button anywhere in the Display Window, 

when this happens the mouseDragged() function will be called once, and it's 

structure will be executed. As a result because the mouseDragged() function is not 

called repeatedly for each frame that the mouse is begin dragged, we will use the 

function to set a variable called buttonDrag to true indicating that the mouse is 

currently being dragged, this variable will then be used in the draw() structure, 

within an if() statement which causes the slider button to follow the mouse when 

the variable is true and remain stationary when it is false. When the user then 

releases the mouse we will use a call to the mouseReleased() function (which 

structurally works in a similar way to the mouseDragged() function) to set the 

variable, buttonDrag to false within the mouseReleased() structure. What this 

means is that when the if() statement in draw() checks the status of this variable it 



will now be returned as false causing the slider button to remain stationary. In 

other words, we already have a function that tells us if the mouse is over the 

button or not, we will now add two more functions that will tell us whether the 

user's mouse is attempting to drag the button and whether it has been released. 

Mouse related functions usually follow the end of the draw() structure and should 

not be mixed amongst user defined functions. 

We'll start by declaring the buttonDrag boolean in global space: 

boolean buttonDrag; 

Then using it within a mouseDragged() function, remember to place all mouse 

related functions together and not between user defined functions: 

void mouseDragged(){ 

if (mouseOverButton){ 

buttonDrag = true; 

} 

} 

This simple function is run once the user clicks a mouse button and starts to drag, 

then the function will check if the mouse is over the slider button as 

mouseOverButton is returned to our main program via our overButton() user 

defined function. If the mouse is over the slider button and the user has clicked 

and dragged in the Display Window, then we can safely conclude that the user is 

trying to click and drag the slider button. As a result we set the buttonDrag 

variable to true. Now we can use this variable in our main program to update the 

position of the button slider in the draw() structure. 

Firstly we will start by commenting out the following statement as it is no longer 

needed for testing, as we are ready to implement the actual code: 

//temp 

//buttonXPos = width/2 – sliderBk.width/2; 

The following statement will replace it: 

if(buttonDrag){ 

buttonXPos = mouseX - sliderFd.width/2; 

} 



This if() statement will form the basis of the construct used to control the 

movement of the slider button. If you were to run the script at this stage you 'd 

notice that although you can now click and drag the button, there are a few new 

issues that need tending to: 

1. The slider button now starts at the 0 x position, and subsequently needs to 

be constrained to the region that the sliderBd object covers. 

2. When the button is dragged it can be dragged well beyond the sliderBd 

region, so this operation also requires constraints. 

3. Once the button is released it continues to follow the mouse. 

Setting up regional constraints 

As we have seen from previous examples the constrain() function can be used to 

setup a maximum and minimum value that can be used to determine the limits of 

another value. This provides a convenient solution for working with the 

buttonXPos value of which we'd like it's minimum value mapped to the left edge 

of the sliderBd object and it's maximum value mapped to the right edge of the 

sliderBd object minus the width of the slider button (sliderFd). We need to minus 

the width of the slider button (sliderFd) because the top left hand corner of the 

slider button image is the point that will be able to move the the maximum value 

specified in the constrain() function, as a result of using the default setting for 

imageMode() which is CORNER. If this point was matched to the right edge of 

sliderBd the results would look like the following image: 

sliderBd.width 

SliderFd CORNER 

The slider button is dragged too far right 

As you can see the slider button has gone too far past the right edge of the 

sliderBd image, subtracting the sliderFd's width from the right edge of sliderBd 

will solve this. 



Modify the if() statement to include the following if else clause: 

else{ 

buttonXPos = constrain(buttonXPos, width/2 - 

sliderBk.width/2, width/2 + sliderBk.width/2 - 

sliderFd.width); 

} 

The minimum value for the constrain() function is the center of the Display 

Window minus half of the width of the slider background image (sliderBd). 

The maximum value for the constrain function is the center of the Display 

Window plus half of the width of the slider background image (sliderBd) minus 

sliderFd's width. 

The values that will be used in the constrain() function to determine the slider button's 

draggable area 

With this information in mind finishing the if() construct is just a matter of copy 

and paste with one minor modification. Although the modification is minor it's 

addition to the sketch will be what finally gives the user the results they were 

looking for. The value we are constraining in this case is going to be mouseX. 

The following if construct demonstrates this: 




buttonXPos = constrain(mouseX - sliderFd.width/2, width/2 - 



}else{ 

buttonXPos = constrain(buttonXPos, width/2 - 



} 

Finishing the slider 

The Third issue with the slider is to get it to stop dragging once the mouse has 

been released. For this we're going to use the mouseReleased() function. The 

mouseReleased() function should be placed directly below the mouseDragged() 

function for the purpose of readability. However to Processing it does not make a 

difference if the function is before or after mouseDragged(). The 

mouseReleased() function is pretty simple, all it does is run the function once 

every time the mouse button is released in the Display Window. In our case the 

function will check if buttonDrag is set to true, if it is then we can be sure that the 

slider button is being dragged. As the function is run when the mouse has been 

released, we can be certain that the user no longer wants to drag the button, as a 

result the function then sets the buttonDrag variable back to false. This means that 

the conditional using this variable in the draw() structure will evaluate to false, so 

that mouseX will no longer be used to determine the value of buttonXPos. The 

mouseReleased() function should look like the following code listing: 

void mouseReleased(){ 


buttonDrag = false; 

} 

} 

Mapping Values 

Now that we have the slider moving correctly we can use the values of 

buttonXPos and map them to any values that we choose, for example we cold 



map the range of values that buttonXPos returns to the amount we would like an 

image to scale on it's x axis, how far or fast an image moves across the screen, or 

just about anything that can accept a range of values as an input. We're going to 

map the buttonXPos range to the tint of an image, making the image appear to 

fade in from black. Mapping one range of values to another is done with the 

map() function. The map() function accepts parameters in the following format: 

map(mValue, oldLow, oldHigh, newLow, newHigh); 

The parameter mValue is the value that you will be mapping to the new range, in 

our case this is buttonXPos. The parameters oldLow and oldHigh are the 

minimum and maximum values of the range you would like to map to the new 

range, in other words these values are the furtherest left we can drag the slider 

button (oldLow) or expressed within the context of our program: 

width/2 - sliderBk.width/2 

The oldHigh value is the maximum value of the original range, and in the context 

of our program: 

width/2 + sliderBk.width/2 – sliderFd.width 

You might have noticed, by now that these two values are the exact expressions 

we used to determine the minimum and maximum values for the constrain() 

function assigned to buttonXPos, this is no coincidence. These two values 

determined the maximum range of the sliders movement and this is the exact 

range we are mapping to a new range. The new range will be represented by the 

two parameters newLow and newHigh and in our case these are two simple 

numbers 0 and 255 respectively. As we are mapping the slider button's movement 

to the tinting of an image via the tint() function we will be using the single value 

that is returned from the map() function which will be between the newLow and 

newHigh parameters in order to create the impression of the image fading in. In 

the context of the actual values, 0 to 255 represent the range of values that the 

tint() function uses to tint the image with various levels of gray. For example the 

value 0 has the effect of making an image appear as fully gray (or black) and 255 

has the effect of making an image appear with no gray and no black tint. 

With the slider button's values converted to the correct range of values, all that is 

left to do is link the new values to the image. In order to do this we will start by 



declaring a new variable in the global scope. Add the following variable to your 

sketch: 

float imgTint; 

As you can see this variable is datatyped as float, this is because the map() 

function returns floats. Remember that this does not mean that the parameters 

themselves have to be floats, nonetheless it is worth noting that in order to 

perform true division if the parameters you supply Processing with for the map() 

function are of type int Processing will typecast them to floats for the purpose of 

the map() function. What this means is that once those values have been evaluated 

by the map() function, the answer will be returned as a float. Since this is the 

variable that we will assign the return value of the map() function to, and as just 

stated this value will be a float it makes sense to datatype this variable as a float. 

If we try to use another datatype, such as an int, we will get a “type miss-match” 

error. 

With our new variable, imgTint, we will use assignment in the if() construct we 

created earlier within the draw() function, to determine it's value as the slider is 

dragged. Add the following statement to the if() construct, directly under the 

assignment statement for buttonXPos: 

imgTint = map(buttonXPos, width/2 - sliderBk.width/2, width/2 + 

sliderBk.width/2 - sliderFd.width, 0, 255); 

In the previous statement we use the map() function to determine the value of the 

imgTint variable. Now that we have a place to store this value we can associate it 

with the tint() function. Which we will do before the image() function to render 

img. We do this by adding the following statement: 

tint(imgTint); 

This statement must precede the statement telling Processing to render the img 

object. If you were to run the sketch at this point you might notice that everything 

is working, but not quite as expected. The answer to this problem is order. If you 

look at the current sketch it runs like so. 



draw() 

If the slider button is being dragged 

Update variables 

Else leave everything as it is 

render the images 

end draw() 

Although this method might be somewhat functional, it's not very intuitive. What 

this means is that when the user drags the slider the user should be able to see the 

results of their actions in realtime (another way of saying immediately or 

something very close to that) and when the user releases the mouse button, the 

values should stay as the user set them and not jump around to seemingly 

incorrect values. As a result we need to make sure that the images are being 

rendered for all possible situations using the correct values, which in our case is 

only two different branches. So we are going to restructure our code to 

accommodate for a more intuitively designed interface. 

draw() 

end draw() 

If the slider button is being dragged 

Update variables 


Else leave everything as it is 


How this new structure is implemented in our program will follow this pattern: 

buttonXPos 

imgTint 

tint() 

img 

noTint() 

//update variable 

//update variable 

//set the tint value 

//render main image now effected by tint 

//Turn tint off so slider images are not 



sliderBk 

sliderFd 

//effected by it 

//render slider background image 

//render slider button image 

This is the order within the first code block of the if else construct the second 

code block will follow the same order. For a full listing of the code it's best to 

look at the sketch itself which is 

named slider.pde. Finally to end off the example I've added another image to the 

sketch which I've associated with the object I've called star and mapped it's Y 

movement to the slider. Like I said the mapping of one value with a range to 

another range can lead to in infinite array of possibilities, and is largely the 

premise on which more complex applications are built upon. Why not try your 

own custom mappings you'll soon come to realize that with this simple function, 

the sky is definitely not the limit. 

The final slider.pde sketch 

The mystery shape maker 

In this next sketch we will discover two new fundamental programming concepts 

arrays and iterations, learn how to work with random numbers and try out a new 

datatype called color. The mystery shape maker is a sketch that allows the user to 

make several clicks in the Display Window, and by capturing and storing the 

The mystery shape maker 148


coordinates of each click constructs a new shape for the user in a randomly 

generated color. The shapes can be as simple or complex as you want, as you 

determine how many times the user gets to click in the Display Window before 

the mystery shape is drawn. 

Arrays 

Some of the shapes that can be created with the mystery shape maker 

Arrays are used to store data, but unlike the other data storage types we have been 

using (such as variables) arrays have the ability to store more than just a single 

value. Arrays can store multiple values of the same datatype in much the same 

way that an ordinary list (such as a grocery list) consists of multiple elements 

related to the topic of the list. In fact, this analogy is so true to the nature of arrays 

that every component making up an array is referred to as an element. This 

analogy can be extended ever further, as with a list each element in that list can 

have a number associated with it, in an array each element has a number 

associated with it too. We refer to these numbers as indices (in plural) or simply 

an index number in singular form. 

An everyday list: 

My Shopping List //name of the list 

1. Tea //element1 

2. Soy Milk //element2 

3. Vegan Cookie //element3 

Arrays 149


An Array 

int[] myArray = {20, 30, 40}; 

//name of array is myArray[] and it is datatyped as an int, so it 

//can store integer values 

//element 1 is 20, and has an index value of 0 



Index values for arrays start at 0 and can go as high as the number of elements in 

an array minus 1, for example if an array has 15 elements, the index value of the 

last element in the array is 14. 

Element No. 1 

has an index 

value of 0 

Element No.3 

has an index 

value of 2 

int[] myArray = {20, 30, 40}; 

Element No.2 

has an index 

value of 1 

Understandably at first this system of numbering might seem a bit strange, so in 

order to simplify things you can think of an index number as a means of referring 

to an element within an array without having to know what it's value is. This 

concept should not be new to you as it does not differentiate very much from that 

which defines a variable, the main difference being that instead of using a 

variable name we are now using an index number within an array to reference that 

specific value. The syntax for referencing an element within an array follows: 

int[] myArray = {20, 30, 40}; //initialize array 

myArray[0]; 

//reference array element with 

//index number 0, which has a value 

//of 20. 

We can also use an array in a program in a similar way that we would use a 

variable, for example: 

Arrays 150


Index Number 0 1 2 


int x = myArray[0] + myArray[2]; //sets x to 20 + 40 i.e. 60 

Using an array in this format can be very similar to the way in which variables are 

used, and the comparison can extend further than the previous expressional 

example into initialization and assignment. As you can see in the previous 

example the array was initialized through both declaration and assignment in one 

statement in a similar way that variables use initialization. 

As arrays have multiple elements assigning values to the elements of an array 

cannot be through a simple reference to the arrays name, as Processing would not 

know which element is to inherit the value on the right of the assignment 

operator. As a result the process of assigning values to elements of an array after 

declaration or initialization must also include the index number of the element 

you wish to assign a value to, on the left hand side of the assignment operator. For 

example: 


myArray[2] = 10; 

//element 3 was 40 now has a value 

//of 10 

With all the similarities between variables and array elements you might be 

wondering what the purpose of an array is? Unlike variables storing one value 

followed by another value of the same type within the same variable, the array 

does not have to replace the previous value in order to store a new value. For 

example, what if I wanted to store the x position of the mouse when the user 

clicks in the Display Window. This would be easy enough, I'd just create a 

variable and assign it the value of the mouseX system variable. This is fine if all I 

need to know is the current x position of the mouse when the user clicks. 

However, what if I need to know the previous x coordinate of the mouse, or the 

one before that and so on. Retrieving this information with a simple variable 

would not be possible because each time the user clicks the mouse the current 

value of mouseX replaces the previous value. 

Arrays 151


int mXPos; 

if(userClicked){ 

mXPos = mouseX; 

} 

//declare variable to store mouse x 

//position 

//hypothetical conditional to test if 

//user has clicked 

//sets variable to current X position of 

//mouse 

//user moves the mouse around and clicks again 

if(userClicked){ 

mXPos = mouseX; 

} 

//hypothetical conditional repeats to 

//test if user has clicked 

//replaces the previous value for mXPos 

//with the new X position of the mouse, 

//and the previous value of mXPos can no 

//longer be retrieved. 

With arrays this information becomes accessible to us. By using the elements of 

an array we can store the first x coordinate of the mouse at index 0, the second 

coordinate at index 1 and so on. Lets have a look at an example of this in a sketch. 

int[] myArray = new int[4]; 

int clicks; 

void draw() { 

} 

void mouseClicked(){ 

if(clicks


} 

println(myArray[2]); 

println(myArray[3]); 

clicks++; 

} 

//print the value of the 

//third x coordinate 

//print the value of the last 

//x coordinate 

//increment the click value 

//by 1 

Program Notes 

In the first line of the sketch we declare an array with four elements. When using 

this technique to create a new array we must indicate the datatype of the array and 

use brackets[] to tell Processing that we are about to create an array (and not just 

simply declare a variable). We must then name the array and use the assignment 

operator to populate the array with the new elements (which do not have values 

assigned to them as of yet). We do this by use of the new keyword, followed by 

the datatype of the new elements which must match the array's datatype and 

finally, brackets indicating how many of these new elements will populate the 

array. 

int[] myArray = new int[4]; 

Next the variable clicks is declared, this variable will be used to count how many 

times the user has clicked in the Display Window. The draw() function is then 

initiated in order to keep the program running, and prevent the sketch from 

turning to static mode. 

The mouseClicked() function consists of a simple if() statement. The conditional 

of the if() statement is executed when the user clicks a mouse button within the 

Display Window. The conditional checks if the clicks variable is less than four, 

which is the amount of elements in the array. If this is the first time the mouse has 

been clicked, clicks will equal a value of 0 as it has not been assigned a value 

through initialization, it has only been declared. As a result the following 

statement is run: 

myArray[clicks] = mouseX; 

Arrays 153


This is the statement that assigns a value to each element in the array. If this is the 

first time clicks has been used in the comparison it will also be the first time the 

user has clicked in the Display Window and therefore clicks will have a value of 

0, as a result the preceding statement can be translated and explicitly expressed 

as: 

myArray[0] = mouseX; 

This means the element with the index number 0 is assigned the value of 

whatever the mouse's x coordinate was at the time the user clicked a mouse 

button. The next four println() statements print the value of each of the four 

elements in the array. As only the first element has a value at this point in time, it 

will be the only element that is non-zero until the user clicks again (up to three 

more times). 

clicks++; 

In a similar way that we used augmented assignment to shorten an expression that 

is commonly used in programming, we have used an increment operator in the 

previous example to shorten this statement. The increment operator works by 

adding 1 to the current value of the particular variable it is used with, then 

assigning this new value back to the original variable. This is a common method 

of getting a program to count for you as each time the variable is used with the 

increment operator it will return a value that is one more than it's previous value. 

Writing this statement without the increment operator would look like this: 

clicks = clicks + 1; 

As you can see using an increment operator can make your code easier to read 

and save you some keystrokes. 

The decrement operator (which is two minus signs --) works in a similar way to 

the increment operator except that it subtracts 1 from the variable's current value 

before reassigning the new value back to the original variable. 

The result of this statement is that the clicks variable will now be one more than 

it's previous value by the time the program repeats. For example the clicks 

variable was initially 0, but at the end of the if() statement the clicks variable will 

have a value of 1. This is important because the next time the user clicks a mouse 

Arrays 154


button the comparison will be working with different values. For example on the 

first click the comparison can be expressed as (0


evaluating to true and subsequently assigning positional data to the elements in 

the array, will now evaluate to false as the number of clicks increases in value. 

We will then use the beginShape() and endShape() functions and combine each 

one of the two arrays' corresponding elements into a coordinate for the vertex() 

function, which will be embedded within a loop that cycles through the two arrays 

extracting the information from them and subsequently drawing the mystery 

shape. 

Although this might sound like a handful, you already know how to create two 

thirds of this program. Nonetheless, lets recap on these fundamental programming 

topics as they will more than likely prove to be a useful asset in many a sketch. 

First we are going to start by declaring and/or initializing the following global 

variables: 

int points = 6; 

int clicks; 

int[] numx = new int[points]; 

int[] numy = new int[points]; 

//number of points 

//click counter 

//array for mouse x 

//coordinates 

//array for mouse y 

//coordinates 

//generate a random color for the shape's fill 

color randCol = color(random(256), random(256), random(256)); 

The points variable will be a number that we can change before running the 

sketch so that we can make our shape consist of as many or few points as we like, 

this number should not be negative. 

The clicks variable will be used to store the amount of times the user has clicked 

in the Display Window, it will also be an operand within the conditional that 

populates the array. 

Then we move onto declaring the arrays that will store the x and y coordinates of 

the user's clicks. Notice how the number of elements in this array has been 

defined as the variable points. As points is of type int it can be placed within the 

array's declaration brackets. The preceding statement relating to the declaration of 

the numx array can be translated and explicitly expressed as: 

int[] numx = new int[6]; 

It is worth noting that in the actual sketch we have not used a numerical constant 

Arrays 156


but rather a variable to determine how many elements will populate the array, this 

is because if we decided we want to use more or less points making up the 

mystery shape, it would be easier to implement this change by means of 

modifying the initialization statement for the points variable rather than having to 

change numerical values scattered throughout the sketch. 

The final variable we have created within the global space is called randCol and 

has been datatyped as color. The color datatype is used to store color values, in 

our case we are using the format of: 

color varName = color(R, G, B); 

Where color is the keyword used to declare variables of type color, varName is 

the name of the variable, and the assignment operator is used to assign a color 

value in R (red), G (green) and B (blue) values. RGB values range from 0 to 255 

each. Note the expression used for each of the R, G and B values: 

random(256) 

random() is a function that is used to return a random number, that is between 0 

and the number specified, but not including the specified number. As a result the 

parameter 256 is used so that Processing will include values between 0 up to and 

including 255. random() also accepts parameters in the form of: 

random(Low, High); 

Where Low is the minimum number in the possible range of random numbers and 

High is one more than the maximum number in the range. If you assign the 

random() function to a float Processing will return random floats. 

The next step is to setup the setup() and draw() functions as per usual, then add 

the following if() statement to the draw() function: 

if (clicks


There's not really anything new about this if() statement, so we'll just run through 

it really briefly. First the conditional checks if the amount of times the user has 

clicked is less than the amount of elements in the arrays. Using this method 

creates an error catching scenario, as opposed to if the user was allowed to click 

repeatedly beyond the number of elements in the arrays which would result in the 

amount of elements that the program would attempt to store in the arrays 

exceeding the amount of elements that can be stored in the arrays. This would 

cause an “Array Index Out of Bounds” exception. 

We can then use the clicks variable in the if() structure to determine which 

element in the array is assigned the corresponding mouse X or mouse Y value. 


clicks++; 

} 

Outside of the draw() function we setup a simple mouseClicked() function, which 

works in a very similar way to the mouseReleased() function. The difference 

being that the mouseClicked() function does not wait for the mouse to be released 

before running the code that makes up it's structure, it executes the code within 

it's associated braces as soon as the mouse is clicked within the Display Window. 

The purpose of the mouseClicked() function is simply to increment the clicks 

variable, which it does so within the function's only code block. 

Iterations 

Processing has two main types of iterations the for() structure and the while() 

structure. The while() structure can be thought of as a simplified version of the 

for() structure. We will be focusing on the for structure. 

The for() structure is used to iterate a value, that is to change a value by means of 

a recurring pattern. for() structures are also referred to as for() loops in some 

programming languages, whatever you call them they usually will be structured 

according to the following protocol. 

for(init; test; update){ 

...statements 

} 

Iterations 158


Of the main differences that separate one languages implementation of for loops 

from that of another, will generally not be anything structural by rather syntactic. 

For example some programming languages use comma's to separate init, test and 

update Processing uses a semi-colon implying that each is a statement on it's own. 

• The term init in the previous example is used to describe initialization. In 

a for() loop iteration init is used to declare a temporary variable that will 

usually be used in the iterations structure, test and update. 

• Test is used to describe a conditional, which like a normal conditional will 

evaluate to true or false. If the conditional evaluates to true the for() 

structure will run, if the conditional evaluates to false the entire for() loops 

structure is skipped and Processing will continue to the statement/s that 

follow the for() structure in the sketch. 

• Update is used to describe an expression that will determine how the value 

of the variable in the conditional is being changed. The value of the 

variable being evaluated in the conditional must change, by means of the 

update, or the loop will go on forever which will eventually cause 

Processing to crash. For example an increment statement is often used in 

update to increment the value of the variable initialized in init and 

evaluated in the conditional test. 

In programming it is common to use a for() loop iteration to get your program to 

count for you, as per the following example: 

for (int i = 0; i < 10; i++){ 

println(i); 

} 

//prints 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 one digit at a time 

The previous example used a for() loop iteration to count from 0 to 9, lets have a 

look at how we did this. First we need to use the for keyword to indicate to 

Processing that we are about to create a for() loop iteration. A for loop iteration 

relies on three statements init, test and update within parenthesis so that they are 

specifically associated with the for() loop iteration structure. As you can see the 

three statements are separated with semi-colons, this is unique to a for() loop 

iteration in Processing and clearly differentiates these statements from being 

parameters. 

As init is used to initialize a variable within the for() loop iteration structure, the 

scope of this variable is limited to the for() structure. What this means is that the 

Iterations 159


variable i in our previous example will not be accessible in other places within 

our sketch and only be accessible within the for() structure. As a result this 

variable name is usually i or n and not very descriptive. It is actually more 

distracting to call a variable initialized within a for() loop anything other than i or 

n (some people might also use x but this can be a bit distracting from variables 

that use x to denote a position on the x axis). It is therefore advisable to not use a 

variable name that is any more descriptive than a single character such as i or n. 

Once we have the variable initialized we can then use it in a test, if the test 

evaluates to true the code within the for structure will be run. It is important to 

note that if the test evaluates to true the code within the for structure is run, and 

only after this code is run is the update statement executed. 

A graphical representation of how an iteration works 

The update statement in our example is an incremental statement, which adds one 

to the variable from init subsequently increasing the value of the variable with 

each iteration. On the tenth occasion that the loop repeats the variable is 

incremented to a value of 10, so when the conditional evaluates the test (10


beginShape(); 

for(int i = 0; i < points; i++){ 

vertex(numx[i], numy[i]); 

} 

endShape(); 

Using this method we can let the user decide what the shape should look like. If 

you recall beginShape() and endShape() require the vertex() function between 

them. The difference with this sketch is that we have nested the vertex() function 

inside a for() loop iteration. The program will loop through the vertex() function 

as many times as the variable initialized within the for() loop called i, is less than 

the points variable declared earlier in global space. What this translates to is the 

the vertex() function will be run six times and on the seventh attempt to run the 

for() loop the conditional of the for() loop will evaluate to false as i will be equal 

to points (i == points) causing the loop to break and running the rest of the code 

that follows the for() loop structure, which would be the endShape() function. 

This creates a shape with six vertices in the positions that the user specified by 

clicking in the Display Window. The coordinates of these vertices are determined 

by extracting the values associated with each element in the arrays numx[] and 

numy[], as the index number of each element is referenced with the for() loop 

variable i. A full listing of the mystery shape program follows: 

int points = 10; 

int clicks; 

int[] numx = new int[points]; 

int[] numy = new int[points]; 

color randCol = color(random(255), random(255), random(255)); 


size(300,300); 

smooth(); 

} 

void draw() { 


if (clicks


}else{ 

fill(randCol); 

beginShape(); 

for(int tempx = 0; tempx < points; tempx++){ 

vertex(numx[tempx], numy[tempx]); 

} 

endShape(); 

} 

} 


clicks++; 

} 

Transforms 

Processing provides a convenient method for animating and interacting with 

components of a sketch that are transformed in various ways. The term transform 

when used in this context generally refers to any one of, or combinations of the 

following three actions: 

Translation, Scaling, Rotation. 

Translation is simply another way of saying “moving” but as the term moving can 

tend to be somewhat ambiguous when you consider that rotation also involves 

movement and so too does scaling (when you consider that the components 

making up an object such as it's vertices move when the object is scaled), we 

prefer to use the term translation as it specifically refers to positional data in terms 

of x, y and z of an entity. The function for applying translations within a sketch is 

translate() and it accepts parameters in the form of x and y with an optional third 

parameter for z (which we will discuss soon) when using a 3D renderer. 

Rotation is a transform that we have not discussed in any of our previous 

sketches, and as you will see can be a useful asset to creating certain types of 

animation within a sketch. Amongst the functions that provide us with access to 

rotation are rotate(), rotateX(), rotateY() and rotateZ() these functions accept 

values in radians. 

Scaling is a transform accessed with the scale() function and it accepts a single 

float value or two floats that relate to x and y or three floats that relate to x, y and 

Transforms 162


z for 3D sketches. Scaling creates the impression of making things appear to be 

bigger or smaller within a sketch. 

Let's have a look at an example of a static sketch using the translate() function. 

size(400,60); 

rect(0,0,50,50); 

translate(width/2, 0); 

fill(255,0,0); 

rect(0,0,50,50); 

A static sketch using transforms 

In the first line of the sketch, we simply defined the window in which the sketch 

is running as being very long horizontally and short, vertically. In the following 

line we drew a rectangle at the origin, and because the rectMode() function by 

default is set to CORNER, the rectangle sits perfectly flush with the top left hand 

corner of the Display Window. We then used the translate() function with a 

modification to the x parameter, and as you would expect the next time we draw a 

rectangle (after changing the fill color) it's position on the x axis reflects this 

translation we previously applied. However, if you have a look at the x parameter 

for the rect() function you will notice that things are a bit different to what you 

might expect as the X parameter reads 0 whereas the rectangle is drawn close to 

the center of the Display Window and to the right of the previously drawn 

rectangle. Shouldn't the rectangle be drawn at the origin if it's X parameter is 0? 

If you were thinking something along those lines then you are absolutely correct 

and in fact the rectangle is being drawn at the origin, the main difference here is 

that we have used the translate() function to move the origin, not of the rectangle 

but of the entire coordinate system. Let's have a look at how this came to be. 

Although the effect of what you are seeing in the Display Window creates the 

impression that Processing has moved the rectangle, the rectangle as it is 

Transforms 163


indicated by it's X parameter in both rect() function calls tells us something 

different. That is that the rectangle has in fact not moved. The reason that the 

rectangle has come to be drawn in this new location is due to the effect of the 

entire coordinate system moving. 

If you were for a moment to reflect back on the Cartesian graph system that we 

discussed earlier you would remember that everything in Processing works in a 

similar fashion to that of something drawn on graph paper. Bearing this in mind, 

what we have done in the previous sketch cannot accurately be described as 

moving the rectangle, but rather more akin to us moving the “graph paper”. For 

example if you were to draw a rectangle on a piece of graph paper, then move the 

graph paper around, you would in effect be creating the impression of the 

rectangle drawn on the graph paper moving around. The rectangle itself would not 

be what you are moving around, in terms of the fact that the rectangle's positional 

x and y data has not changed with relation to the origin of the coordinate system it 

was drawn relative to. We can therefore say that the rectangle has not moved, 

however the coordinate system associated with it has. 

An object drawn on graph paper does not move but the graph paper does 

This is the purpose of transforms in Processing, they move the coordinate system 

for us. We can still move the components of a sketch through their own positional 

data, which we usually supply in terms of X and Y parameters of a function, but 

bear in mind that mixing translation techniques like this will result in the 

component appearing to have “moved” by the sum of the two data sets. To put 

this in another way, the distance the entity would appear to have moved would be 

the sum of the translate() function plus the X, Y and Z parameters of the function 

to draw the entity. 

So if we still have the ability to modify components of a sketch via their own X 

and Y parameters what's the benefit of having transforms? 

Transforms can save us a lot of unnecessary work, make our code a lot easier to 

read and provide us with functionality that would not be possible without them. 

Transforms 164


Lets have a look at an example of how this works. 

In order to see the benefits that transforms have on our code we'll revisit the smile 

sketch from our static sketch examples at the beginning. If you recall, the 

purpose of the sketch was simply to draw a smiley face to the Display Window in 

static mode with some other components. We're only interested in the smiley face, 

so first we're going to adapt the sketch for active mode by including the drawing 

of the face within the draw() structure: 

void setup(){ 

size(640,480); 

} 

void draw(){ 



fill(191,233,255); 


//smile 

noFill(); 

stroke(255,0,0); 


//eyes 


fill(0,255,0); 



} 

The smile static sketch revisited and modified to fit an active mode sketch 

Transforms 165


As you can see nothing surprising about the sketch, but what if we wanted to 

animate the smiley face by moving it across the Display Window, or attaching it 

to the mouse? 

This could become quite a cumbersome task as every component of the smiley 

face that has X and Y parameters would have to be updated for every frame. To 

give you an indication of how much extra work this is we're going to have a look 

at what sort of changes in the sketch would need to be implemented if we wanted 

to attach the smiley face to the mouse: 

void setup(){ 

size(640,480); 

} 

void draw(){ 



fill(191,233,255); 

ellipse(mouseX, mouseY, 100, 100); 

//smile 

noFill(); 

stroke(255,0,0); 

arc(mouseX, mouseY + 10, 50, 50, 0, PI); 

//eyes 


fill(0,255,0); 

ellipse(mouseX-15, mouseY-15, 20, 30); 

ellipse(mouseX+15, mouseY-15, 20, 30); 

} 

As you can see almost every second line of code had to be updated within the 

draw() structure. Now imagine if you had a whole character you wanted to draw 

and how much additional work something like that could amount to? 

With transforms making a change like this to your code is easy: 

void setup(){ 

size(640,480); 

} 

void draw(){ 


//transform 

translate(mouseX-width/2, mouseY-height/2); 

Transforms 166



fill(191,233,255); 


//smile 

noFill(); 

stroke(255,0,0); 


//eyes 


fill(0,255,0); 



} 

Notice that only one additional line of code was needed to accommodate for this 

update, the rest of the code remained unchanged. 

The additional statement is: 

translate(mouseX-width/2, mouseY-height/2); 

This statement simply uses the translate() function, with two parameters relating 

to X and Y. The X parameter tells Processing to “move” the entire coordinate 

system to the position of the mouse's X value then to subtract half the width of the 

Display Window from this value. The reason we need to subtract half the width of 

the Display Window from the mouseX system variable is because our entire 

sketch was originally made to draw the smiley face in the center of the Display 

Window. 

Offset from the origin with 

mouseX 

Offset from the origin with 

mouseX - width/2 

As the coordinate system is transformed, it's origin can exist within the boundaries of the 

Display Window or outside of these boundaries. 

Transforms 167


As transforms effect everything below their implementation within a sketch, due 

to them transforming the entire coordinate system, there are times when you will 

find that this is not the effect that you want. 

The image below of a cart is made up of three separate images which are rendered 

in the following order the wheel in the background, the main cart and the wheel in 

the foreground. If our intention was to rotate the back wheel first, as the back 

wheel would have to be rendered before any of the other images. We run the risk 

of having the transforms applied to the back wheel effecting the main cart and the 

wheel in the foreground as they are rendered after the back wheel, and will 

therefore be effected by any scale(), translate() and/or rotate() function that is 

intended for the back wheel. This would create the impression of the cart orbiting 

around the back wheel, which is obviously not what we where trying to 

accomplish. Two functions in Processing called pushMatrix() and popMatrix() 

help us to solve this problem. 

Main Cart 

Background wheel 

Foreground wheel 

The template rendering of the cart.pde sketch 

The function pushMatrix() when called before a transform is executed will store 

the current position of the coordinate system. This means that if you call a 

pushMatrix() function at the start of the draw() structure it will remember the 

default position of the coordinate system (pre-transform). You are then free to 

apply transforms to the particular component of the sketch that you would like to 

scale, rotate or translate. Once you are satisfied with the transforms you have 

performed you can then render the component, for example by means of a call to 

Transforms 168


the image() function. Running the popMatrix() function at this point will then be 

necessary to restore the coordinate system back to the state it was in when the 

previous pushMatrix() was called. You can then proceed to run more 

pushMatrix(), transforms, render, popMatrix() combinations on other components 

of the sketch which will remain unaffected by the previous transforms. Using 

pushMatrix() and popMatrix() in this way allows us to apply multiple transforms 

to a component of a sketch ,and not have those transforms effect other 

components. 

Transforms 169


Lets have a look at how to use this technique to make the cart move across the 

Display Window and have the wheels of the cart rotate accordingly. 

We'll start as always with a template of what we want the final result should look 

like: 

PImage cart; 

PImage wheelFd; 

PImage wheelBd; 

PImage grass; 

void setup(){ 

size(800,600); 

cart = loadImage("cartMain.png"); 

wheelFd = loadImage("wheelFd.png"); 

wheelBd = loadImage("wheelBd.png"); 

grass = loadImage("grassLessBlur.jpg"); 

} 

void draw(){ 

background(grass); 

imageMode(CENTER); 

} 

image(wheelBd, -75, 25); 

image(cart, 0, 0); 

image(wheelFd, -95, 35); 

//println(mouseY); 

Out of interest you might be wondering how I came about selecting the X and Y 

parameters of the image() functions which render the wheels relative to the 

position of the cart. If you look at the last line you'll see a println() function that 

has been commented out. By replacing the image() function's X and Y parameters 

with mouseX then mouseY, respectively and one at a time, you can run the 

sketch with the image of the wheel attached to either the mouse's X or Y position. 

Place the wheel in the position it should be in, the println() function (when 

uncommented) will print out the position of your mouse, note this value and 

replace it with the mouseX or mouseY system variable in the wheel's image() 

function's corresponding X or Y parameter. 

Transforms 170


As the imageMode() function is set to CENTER in this example you will have to 

move the cart image to a location that is not the origin, so that the left and top 

halves of the image is not obscured by the boundaries of the Display Window. 

You will then need to subtract the value that you added to the X and Y parameters 

of the image() function to draw the cart from the respective values printed in the 

Text Area that will be used to place the wheels in the correct locations. 

Now that we have a template from which to start let's set up a temporary system 

that allows the cart to trail after the mouse with a bit of friction, we'll then modify 

this code to suit the needs of our sketch. This methodological approach to 

sketching by creating a rough idea then refining it will allow us to see results 

much sooner in the sketching process, rather than spending a lot of time on a 

sketch only to find out when it is almost done that the effect we were trying to 

achieve isn't quite working out. 

We'll start by adding the following global variables: 

float xPos; 

float difX; 

int drag = 30; 

If you recall from the imageScroll.pde sketch, we used the technique of creating 

the impression of friction with a similar set of global variables. The only 

difference is that in this sketch we are now using the same technique to create the 

impression of friction along the x axis. Next we'll need to add the following 

statements to the draw() structure after the imageMode() function call: 




difX = mouseX - (xPos + cart.width/2); 

xPos += difX/drag; 

Since we want the cart to move with relation to the mouse moving past the end of 

the cart on the right hand side, we're going to divide the cart.width object variable 

by 2 and add it to the position of the cart which is now determined by the center 

of the cart object because we have set imageMode() to CENTER. 

To temporarily link these statements to the rendering of the cart, directly after the 

previous statements add the following code: 

Transforms 171


pushMatrix(); 

translate(xPos, 250); 




popMatrix(); 

Notice that we just added three additional statements. The first new statement is 

pushMatrix() this tells Processing to store the current transformational data of the 

coordinate system in memory, we then use the translate() function to to modify 

the coordinate system along the x axis by the value of the variable xPos and the 

numerical constant of 250 for the Y parameter. the Y parameter is a numerical 

constant simply because it will not change throughout the duration that the sketch 

is running. Next we render the images without any changes to their parameters as 

all of their positional data remains the same, the transform will create the 

impression of movement for us. Then finally we use the popMatrix() function to 

restore the transformational data relating to the coordinate system when 

pushMatrix() was initially called. 

When using pushMatrix() it must always be coupled with popMatrix() or 

Processing will complain about there being too many calls to pushMatrix() and 

not enough to popMatrix(). The term matrix simply refers to a grid of numbers, 

which is how Processing stores information about the coordinate system in 

memory. For example a matrix can be represented as: 

1 2 3 4 5 

6 7 8 9 10 

11 12 13 14 15 

16 17 18 19 20 

We would call this a 4 x 5 matrix meaning that it is made up of 4 rows and 5 

columns. This is not an actual representation of a matrix that Processing uses to 

calculate transforms but simply an example of what a matrix could look like, in 

fact the matrices that Processing uses are simpler than the previous matrix 

example. 

You might hear the term transformation matrix used on occasion, this is just 

simply referring to the numbers that make up the matrix that the matrix 

representing the current coordinate system must be processed through in order to 

produce the representation of the coordinate system in it's transformed state. 

Although this might sound like a bit of a tongue twister, the concept is less 

Transforms 172


complicated when you think of it in graphical form. Following is an example of 

what this might look like as a graphical representation, remember the numbers are 

purely illustrative, and not intended to represent actual numerical data and 

patterns that Processing calculates: 

pushMatrix() 

Matrix representing 

current coordinate 

system 

Transformation matrix 

stores data about 

translation, rotation 

and scaling 

= 

Resulting matrix 

representing new 

coordinate system 

popMatrix() 

Now that we have an idea of what the cart is going to look like when it's moving, 

lets concentrate on getting the wheels to rotate and translate. 

pushMatrix(); 

translate(xPos -75 , 250 +25); 

rotate(xPos/wheelBd.width); 

image(wheelBd, 0, 0); 

popMatrix(); 



As you can see we have removed the image() function that renders the wheelBd 

object and placed it between a pushMatrix() and popMatrix() function pair. 

Between pushMatrix() and popMatrix() we are free to use translate() and rotate() 

to modify the coordinate system before rendering wheelBd with a call to the 

image() function. When we originally rendered the three images making up the 

cart, we had to offset the back wheel and front wheel so that they we in the 

correct places in relation to the position of the main cart. When performing 

transformations to an image it's best the have the image transform from the origin. 

As a result the X and Y parameters of the image() function used to render the 

image should remain at 0, and translations should be used when the image's X and 

Y coordinates need to change. This is often the simplest and most logical 

approach to working with transforms as it ensures that the image's relative 

distance to the origin is not modified which could lead to unexpected results. 

Transforms 173


Transforms are more predictable when the image() function's parameters are set to 0, 0 

for X and Y. Offsets in these parameters will often result in undesirable transformations. 

By setting the imageMode() function to CENTER and the X and Y parameters for 

the image() function to 0 and 0 we can be assured that the image of the wheel is 

going to be rendered with it's center at the origin. This is important because all 

transformations are relative to the origin, so that when we rotate the wheel it will 

appear to rotate from it's center, this is also due to setting imageMode() to 

CENTER and not leaving it at it's default of CORNER which would have resulted 

in the wheel appearing to rotate from it's top left hand corner. Bearing this in 

mind it is also important that the images that we use for the wheels are square in 

shape, in other words the image's width should match the same image's height. 

This creates the impression of the wheels being flat on the ground when they start 

to rotate. The following statement, is how we remove the image() functions offset 

and are still able to match the position of the cart with the mouse's X value: 

translate(xPos -75 , 250 +25); 

The xPos variable has not changed in terms of how it is applied in this sketch, the 

difference is that the X and Y parameter values that were used in the image() 

function to render the wheel have now been added to the translate() function's X 

and Y parameters. The rotate() function follows: 

rotate(xPos/wheelBd.width); 

As the xPos variable changes relative to the distance the cart has moved we can 

use the changing properties of this variable to make the wheels rotate. We can 

then divide this number by the width of the wheel image which is also the 

diameter of the circular shape of the wheel. This expression is based on the 

formula for pi which is pi = circumference/diameter, but it is worth noting that the 

Transforms 174


value returned from our modified expression is not equal to pi, as this would be a 

constant value as a result xPos is substituted for the circumference of the circle as 

this will yield a value that changes relative to the distance that the cart has 

traveled. 

We can then render the image at the origin after the coordinate system has been 

transformed, so the image appears to have moved because the coordinate system 

it is rendered relative to has, by then, been transformed. 

image(wheelBd, 0, 0); 

Finally use popMatrix() to reset the coordinate system back to it's original 

transformations. 

We can then continue to render the main cart and foreground wheel using the 

same techniques, and not have transformations from one rendering effect another. 

In the final cart.pde example I've added a shadow, try to figure out how you 

would go about creating this effect before looking at the code. Here's a hint, I've 

added four additional images to the sketch. 

The completed cart.pde sketch 

Transforms 175


An Introduction to 3D in Processing 

Up until now we have been using Processing to create 2D sketches, that is 

sketches with 2 measurable dimensions such as width and height, however 

Processing allows us easy access to another dimension that being depth. As width 

is usually associated with the X axis and height is usually associated with the Y 

axis, depth is usually associated with the Z axis. 

Y 

X 

Z 

Axes indicating 3 Dimensions 

In Processing we have access to two 3D renderers, P3D and OpenGL. The P3D 

renderer is used mainly for 3D sketches on the web, the OpenGL renderer 

requires that the machine running the sketch must have OpenGL acceleration 

capabilities. Many modern 3D games and most 3D content creation software uses 

OpenGL, as it is not specific to Processing and a set of features that abstract the 

details of hardware acceleration for software developers. Using the P3D renderer 

in a Processing sketch is easy, as this renderer is simply invoked by adding an 

extra parameter to the size() function. For example: 

size(800, 600, P3D); 

This would cause Processing to use the P3D renderer. Using the OpenGL renderer 

is slightly different as this requires that the OpenGL library is first imported: 

An Introduction to 3D in Processing 176


import processing.opengl.*; 

All import statements in a sketch should precede all other statements. You can 

then use the OPENGL mode as a third parameter for the size() function. 

size(800, 600, OPENGL); 

A typical example of a sketch using OpenGL might look something like this: 


void setup(){ 

size(500,500,OPENGL); 

} 

void draw(){ 


… 

} 

3D Primitives 

In a similar way that Processing has 2D primitives such as rectangles, ellipses, 

lines etc you will also find a set of 3D primitives such as a box or a sphere. 

However you are free to use 2D primitives in a 3D sketch, but not 3D Primitives 

in a 2D sketch. One of the fundamental differences that separates the way in 

which the functions used to render 3D primitives differs from rendering 2D 

primitives, is that 3D primitives do not have parameters for X, Y and Z 

coordinates. For example the function to draw a box which is box() can accept 

three parameters but these parameters relate to width, height and depth. 

So how to we place 3D primitives in a sketch and move them around? 

This is achieved with the transform functions we have been using in our 2D 

sketches. The main difference is that now we have an additional axis to consider 

the Z axis, as a result in a 3D sketch translate() can be used with either 2 or 3 

parameters for example: 



translate(X, Y); 

//or 

translate(X, Y ,Z); 

Where X, Y and Z would be the numerical values relating to how the coordinate 

system is translated. The rotate() function can also be used in the following 

context: 

rotateX(num); 

//or 

rotateY(num); 

//or 

rotateZ(num); 

Where num is the numerical value in radians that the coordinate system will be 

rotated around the corresponding axis. 

Using the box() function and translations here's an example of how we could go 

about drawing a simple robot character using OpenGL: 


void setup(){ 

size(500,500,OPENGL); 

} 

void draw(){ 


pushMatrix(); 

translate(width/2, (height/2)-100); 

box(40); 

translate(0,80); 

scale(0.8,1); 

box(80); 


scale(1,2); 

box(30); 

translate(-140,0); 

box(30); 


scale(1,1.5); 



} 

box(30); 


box(30); 

popMatrix(); 

A simple robot character rendered in Processing using OpenGL 

Creating 3D sketches can be fun, but can also become exceedingly difficult for 

the beginner as you will often find that a firm grasp of trigonometry is necessary 

and depending on what you are wanting to achieve an understanding of vector 

math and matrices might also be a prerequisite. However if you are interested in 

learning more about creating 3D sketches the best place to start is to work your 

way up from creating 2D sketches, that make use of the transformation matrix and 

basic trigonometric functions, then try adapt these ideas to include three 

dimensions. 

Guess My Number Game 

Using the information you've learned, thus far you should be able to follow the 

code within the guess my number game. Have some fun by modifying the code 

and try to make your own! 

Guess My Number Game 179


One of the many possible implementations of The Guess My Number Game 

Guess My Number Game 180


Object Oriented Programming 

Object Oriented Programming is a modern day programming paradigm, meaning 

that it is a fundamental style that suits the task of creating modern software. Most 

popular modern programming languages support OOP (Object Oriented 

Programming), and as a result understanding the fundamental concepts that define 

it within Processing can help in implementing it, by means of adapting your 

knowledge to suite any programming language that supports Object Oriented 

Programming. 

Earlier we discussed that OOP can be contrasted with Procedural Programming if 

you consider that Procedural Programming is a style of programming where the 

program is tailored to suite the data as opposed to Object Oriented Programming 

which is more akin to a style of programming where the data is tailored to suite 

the program. To briefly recap on these concepts, typically when creating 

programs using the procedural programming paradigm we use the programming 

language's built-in API features and associate the data we are representing in our 

program with the features that are defined by the developers of the language. The 

data that is associated with the API features is what we then use in our main 

program. This is in contrast to the object oriented programming paradigm where 

we define new types of data (called classes) to categorize and associate the data 

we are representing in our programs with the programming languages built-in API 

features. We then use instantiations of the classes called software objects in our 

main program. 

From this description you can see that the results of both programming paradigms 

can eventually lead to the same thing, however the process of getting to that result 

is what distinguishes one programming paradigm from that of another. 

Object Oriented Programming 181


The Procedural Programming 

Paradigm 

Data to represent 

The Object Oriented 

Programming Paradigm 

Data to represent 

API features 

API features 

Class organizes data 

Data represented with 

API features 

Objects representing 

Class 

Main Program 

Main Program 

An graphical representation of how OOP works 

OOP as you are aware relies on classes, from which we instantiate objects. These 

objects are the reason why we refer to this programming paradigm as Object 

Oriented Programming, and emphasize the “Object” part. We have already been 

using classes that are a part of Processing's API such as PImage from which we 

have instantiated object variables which we have given names, and those objects 

have inherited various properties and functions (called methods in OOP) from the 

classes from which they where instantiated. But what exactly is a class? 

The concept of a class 

A class is simply a body of code that, in a similar way to a function, exists 

independently of the main body of code from which it is referenced. However, a 

class does not only have a singular purpose like a function that checks the 

position of the mouse, or moves and image around in a specific way or has some 

other purpose that can be summarized by a singularly specific directive. A class 

can consist of many functions, which in the context of OOP we refer to as 

methods. These methods can be used like functions of your main program but 

with the inherited properties of the class from which it came. As a result you can 

think of a method as being a function of a class, that when used in your main 



program will, like a function, have a definition independent of the main program 

and also have properties that are specific to the class it was instantiated from. The 

benefit of this is that when multiple objects are instantiated from a single class 

they all inherit the methods of that class, this allows you to use certain methods 

with one object and certain other methods with another object. Thereby creating 

relationships between those objects (and ultimately the data you are representing 

with you main program) with other data or API features in ways that would be 

very difficult or maybe not practically possible without OOP. 

Branch 01 

Method 1 

Branch 02 

Class 

Method 1 

Method 2 

Method 3 

Object 1 

Object 2 

Method 3 

MAIN PROGRAM 

Method 2 

Function Call 

Function 

Definition 

Method 2 

Branch 04 

Branch 03 

One class can result in many different branches. 

The Blueprint Analogy 

By creating classes we categorize the data we are representing and give these 

representations a context by associating them with features in the programming 

languages API. However a class is never used in the main program, it must first 



be instantiated as an object and the object is what we would use in our main 

program. In this sense a class is more like a blueprint, that describes the complex 

relationships between the data we are representing, like the blueprint of a house 

can describe how tall a wall will be or how far a window will be from the ceiling. 

If you can imagine a class to be like a blueprint then a software object is like a 

house made from that blueprint. For example, a class only describes the possible 

objects that can be instantiated from it, taking the blueprint analogy further we 

cannot live in a blueprint yet it has all the information we need to build a house 

which would be something that we use as a functional object. In other words we 

use the blueprint to build a house, this is just like instantiating an object from a 

class. The class only describes the possibilities of an object that can be 

instantiated from it and when we finally do instantiate an object from the class, it 

is the object that we use in our main program. 

Just like a blueprint describes a structure it does not say anything about how the 

structure can be used for example a blueprint can be used to build somebody's 

home or the same blueprint can be used to build an office. The purposes the 

buildings serve are different, but the structure of the buildings remains the same. 

The relationship between classes and software objects is very similar, in that one 

object instantiated from class can serve a certain purpose and another object 

instantiated from the same class can serve a different purpose, but because both 

objects are instantiated from the same class the context in which they are used 

will tend to have similarities. 

A single blueprint could be used to make several derivatives 



Why use Object Oriented Programming 

One of the fundamental concepts that makes OOP so popular is known as data 

encapsulation. We have already discussed how a variable can have a greater or 

lesser scope depending on where it is declared, that is to say that when a variable 

is not declared within the global variable scope it can only be accessed in some 

parts of a program and not in others that are outside of the structure in which it 

was declared. The range over which the variable is accessible refers to the 

variable's scope. Data encapsulation is a similar concept, except that the concept 

of “hiding” data is emphasized as opposed to defining a variable in the global 

variable scope where the concept of “exposing” data is emphasized. Another 

major difference between the two concepts is that with data encapsulation as 

opposed to variable scope we are not referring to a single variable but can, in fact, 

be referring to entire structures. These structures that we make inaccessible to the 

main program are what form the body of code that defines a class. By defining a 

class we use a modular approach to designing software, in the sense that the class 

that we have defined is not necessarily specific to the program we initially wrote 

it for, and as a result an be used in our program or removed from our program 

without us having to rewrite the entire program this is an inherent design 

characteristic of data encapsulation. 

Amongst other applications, creating a class defines the behaviors that an object 

instantiated from it will inherit. In order to interact with an object in a program, 

and subsequently use that which it has inherited from a class, we interact with the 

object via it's behaviors which are more commonly referred to as methods. This is 

a form of data encapsulation, in that we do not have direct access to how that 

object works as that is defined within the class. However we can still have the 

object interact with our main program through it's methods. In this sense Object 

Oriented Programming can provide a level of abstraction, when working with 

objects in the main program. 

Creating a Class 

As previously mentioned a class typically consists of method definitions and 

various fields (which we also refer to as member variables) that store information 

about the current state of the object instantiated from the class. The term fields 



refers to variables that are members of a particular class, and as a result are 

encapsulated data that store information about the object itself and are sometimes 

referred to in Processing as class data. 

Typically in Processing creating a class is a four step process that involves, 

1)Class Name creation 

2)Field declarations 

3)Constructor creation 

4)Method definitions 

The structure of a class looks similar to setup() and draw() and user defined 

functions, but since a class is not a function, but may contain many functions 

(called methods) it's name is not followed by parenthesis. An object variable 

name which we will have a look at shortly, on the other hand is followed by 

parenthesis in order to provide a means of communicating with the object's 

internal structure. 

void setup(){ 

} 

void draw(){ 

} 

class ClassName{ 

} 

As you can see a class definition usually finds it place at the very end of a sketch, 

this is sometimes referred to as an in-line class definition. This simply emphasizes 

that the class is directly related to the sketch that it is defined within. As defining 

a class at the end of a sketch, after user defined functions, mouse and keyboard 

functions etc can create a cluttered looking sketch Processing also provides us 

with Tabs in which we can place additional code that will be compiled with the 

sketch we are currently working on. You can create a new tab by clicking the 

arrow pointing to the right on the far right of the PDE and a fly-off menu relating 

to Tabs will appear. 



The Tab fly-off from the PDE 

Processing will then ask you to provide a name for the new tab. 

Creating a new Tab 

Once you supply a unique name and click OK Processing will create a new blank 

Tab next to the original Tab. What has actually happened is that Processing has 

created a new .pde file that has the name you specified for the Tab that was just 

created. This new .pde file resides in the same location as the sketch you are 

currently working on, as a result it can access anything in the data folder that you 

can access from the code of the original Tab. Although Processing has created 

another .pde file this file is only part of a sketch. In a similar way that the original 

pde file can be reliant on the contents of the data folder, the new .pde file in the 

same location as the original pde file can also be reliant on the original .pde and 

the contents of the data folder. As a result we refer to this collection of elements 

(i.e. pde files, txt files, spreadsheets, images and anything else that is in the data 

folder used in the sketch) collectively as the contents of a sketch. 

Using additional Tabs in a sketch provides us with a convenient location for 

placing classes. This is useful because it emphasizes the modular design of classes 

and clears the main pde file from becoming over-cluttered with code. Working 

with additional tabs is not synonymous to working with multiple sketches. 

Multiple tabs are a means of breaking up the current sketch you are working on 



into smaller manageable portions of code. As a result when a sketch with multiple 

Tabs is run all the code within all the Tabs of that sketch are compiled together. 

This means that only one of the Tabs should have setup() and draw() structures, 

the other Tabs should be used for class definitions, user defined functions or other 

elements of a sketch that exist outside of setup() and draw() structures. 

A Button Class 

If we wanted to create a class for a button, that we will call Button. This class will 

also have 

• fields that will contain certain information about the object instantiated 

from the class such as the color of the button, it's size and position. 

• The class will also have a constructor that will use the class's fields to 

create an initial state for the object. 

• Finally the class will have 2 methods, one that renders (or displays) the 

button and another that tests whether the user's mouse is over the button. 

The completed buttonClassExample file 

In order to give the class a name and let Processing know that we are about to 

create a class we must use the class keyword. The name of a class generally starts 

with an upper-case character. For example. We'll start by adding a new tab and 

calling it Button. In this tab add the following code: 

class Button{ 

} 

This is how we create a class and name it in Processing. As you can see the class's 

A Button Class 188


name is Button which starts with an upper-case character, in-line with popular 

standardized coding practices. 

When we instantiate an object from this class there are several properties we'd 

like this object to inherit from the class, which we will have access to modifying 

from the main program but not be able to modify the definitions of these 

properties as this will be encapsulated within the Button class. A list of the these 

properties follow: 

1. the color of the rectangle that will visually represent the button object, 

2. the object's X coordinate 

3. the object's Y coordinate 

4. the object's width 

5. the object's height 

6. and a name for the object. 

As a result we will need at least all six of these properties represented in the 

class's fields as variables. 

Let's add those fields to the class, inside the braces of the Button class add the 

following declarations: 

color cB; 

float xLocB; 

float yLocB; 

float xSizeB; 

float ySizeB; 

String nameB; 

As you can see each of these variables will hold the information related to the 

previous list of six items. To give you an idea of how these fields (or variables) 

will be used we need to fast forward a few steps into the future and take a quick 

look at what happens when we instantiate the class. The process of creating an 

object is actually nothing new to you, as you have already instantiated objects 

from the PImage class. One of the main differences with our Button class is that 

we will be using it's constructor to initialize objects instantiated from it, so when 

we get to doing this we will use an initialization statement that will in part look 

like this: 

//this is simply for illustrative purposes 

Button(cB, xLocB, yLocB, xSizeB, ySizeB, nameB); 

A Button Class 189


From this partially complete code fragment, Button accepts the parameters the 

user has input, which will be assigned to the object's fields (which were inherited 

from the class's fields). These parameters will be used to initialize the the object 

instantiated from the Button class. However at the moment, these variables don't 

really do much, or store any information that will help in constructing the button 

object. This is why we need a constructor. The constructor is like a method that is 

automatically called every time a new object is instantiated from a particular 

class. The main purpose of a constructor is to determine a default state that an 

object will exist in as soon as it is instantiated. The constructor is defined below 

the fields declaration of a class and our constructor will look like this: 

Button(color tempcB, float tempxLocB, float tempyLocB, float 

tempxSizeB, float tempySizeB,String tempNameB){ 

cB = tempcB; 

xLocB = tempxLocB; 

yLocB = tempyLocB; 

xSizeB = tempxSizeB; 

ySizeB = tempySizeB; 

nameB = tempNameB; 

} 

Note that the constructor has the same name as the class, this is a requirement for 

using a constructor. When we refer to Button() we are actually referring to the 

constructor of the class and not the class itself, which we simply refer to as 

Button. 

The first line of the constructor tells Processing how the Button class will accept 

parameters when a new object is instantiated from it. You might have also noticed 

that we have declared six new variables that will temporarily store the values that 

the user inputs as parameters when an object is instantiated. These values will 

then be assigned to the original member variables which will store the values that 

the user has input as parameters when instantiating the button. Using this 

approach to designing a constructor ensures that multiple objects can be 

instantiated using different parameters with the same constructor. 

At this stage in the design of the Button class we have fields declaring the 

member variables that will be used to store information about the button, and how 

we would like to use those fields to construct the button, but we have not told 

processing to actually draw the button to the Display Window so that the user can 

see a visual representation of the object and interact with it. This is amongst one 

A Button Class 190


of the many reasons why class's have methods. In order to render this visual 

representation we're going to create a method called disp() which will create a 

rectangle from the parameters the user inputs into the Button() constructor when 

instantiating a new object. Just like user defined functions methods must use the 

void keyword if they do not return a datatype. Here's what our disp() method 

(short for display method) will look like: 

void disp(){ 

fill(cB); 

rect(xLocB, yLocB,xSizeB, ySizeB); 

fill(0); 

text(nameB, (xSizeB/2)+xLocB-((xSizeB/2)/2), 

(ySizeB/2)+yLocB+((ySizeB/2)/2)); 

} 

Creating a method follows the same routine as creating a user defined function. 

Our disp() method is really quite simple all it does is accept the cB variable as a 

fill() color, draw a rectangle with the positional data from xLocB and yLocB and 

finish the rectangle by determining it's size from the xSizeB and ySizeB 

variables. The method then goes on to set the fill() to black and render the name 

of the button (nameB) in the center of the button. 

A class can be as simple or a complex as you want, and since we have all the 

“main ingredients” of our class we're going to return to our main program and 

have a look at how to instantiate an object from this class. 

Object Instantiation 

Object instantiation is not a new concept to you as you have already instantiated 

objects from the PImage class. The process of instantiating an object from our 

Button class will follow a very similar pattern. 

Since we want this object to be accessible from both setup(), draw() and user 

defined functions we are going to declare an object variable in the global variable 

scope by adding the following declaration outside of both setup() and draw(): 

Button myButton; 

A Button Class 191


We now have a variable name that we can use to reference the object we just 

instantiated from the Button class, this name is myButton. 

Within the setup() structure we'll initialize the button: 

myButton = new Button(color(255), width/2, height/2, 100, 40, 

"myButton"); 

myButton (the object variable) has inherited the properties of the Button class. If 

you were to compare this statement with the modified example of the class's 

constructor: 

//this is simply for illustrative purposes 

Button(cB, xLocB, yLocB, xSizeB, ySizeB, nameB); 

You will notice that this button is currently being constructed, but remember that 

you will not actually see the button at this stage as all we have done is told 

Processing how we would like the button to be constructed we have not told 

Processing to actually display the button. The use of the new keyword in the 

previous listed assignment statement is followed by the class's constructor which 

is why we are using Button() and not Button. 

Now that we have told Processing how we would like this new button constructed 

let's move onto the draw() structure and actually render the button. 

Using an object's method is easy, and is very similar to a function call. The main 

difference is that the name of the method is preceded by the name of the object 

itself. For example: 

myButton.disp(); 

Add this statement to the draw() structure, and you'll finally see your button. 

The button instantiated and displayed by it's disp() method 

A Button Class 192


As you can see when working with OOP the main program looks less cluttered 

with code and the majority of the code exists in creating classes. This for many 

people creates a more readable interface for designing software, and once you get 

the hang of using OOP it can also help to localize problematic code that might be 

difficult to locate without a program adopting a modular design. 

The completed sketch ButonClassExample.pde also contains another method 

called over() which will identify if the users mouse is over the button, if you take 

some time to examine the sketch you should be able to add your own 

functionality to the button. 

Working with external data 

There are many ways of getting data into a Processing sketch from importing a 

simple image, 3D geometry or importing spread sheet data and the list goes on. 

But amongst the simplest and most versatile methods of getting external data into 

Processing is by means of a text file. 

A simple text file 

A text file imported into a sketch should have the file extension .txt. A word 

processor document might have additional formatting and as a result might 

produce unexpected results when used in a sketch. For this exercise it is 

recommended that you use the file called names.txt. 

Importing a text document into a sketch works in the same way that that images 

are imported into a sketch. Locate the file to be imported and click and drag it into 

Working with external data 193


the PDE with the sketch you are working on, open. The PDE will report that a file 

has been added successfully to the sketch and if you were to open the sketch's 

data folder you will find a copy of the file in there. In order to display the contents 

of the names.txt file in the Display Window we will use an array of Strings with 

each element of the String representing a line of characters in the names.txt file. 

Lets have a look at how to do this. 

In the global variable scope declare a new array of Strings and call it names: 

String[] names; 

Notice that declaring an array like this does not indicate to Processing how many 

elements will be in the array. This is because we want Processing to tell us how 

many elements are going to make up this array. In other words if we had a text 

document with many lines each of which was intended to be an element in an 

array, instead of counting the lines in the text document and creating the array like 

so: 

String[] names = new String[10560]; 

We would use the former method where the number of elements is decided by 

Processing and if we wanted to know how many elements Processing has 

populated the array with, we would use the String object's variable length to find 

out. We'll have a look at how to do this a bit later. 

In setup() we're going to populate the array with the loadStrings() function, which 

will accept one parameter that is the name of the text file containing the data that 

will be used to populate the array. 

names = loadStrings("names.txt"); 

We now have an array of Strings that we can refer to by it's variable name called 

names. This array has several elements each consisting of a String representing 

each individual line of the names.txt file. 

Finally to display the information contained within the elements of the names 

array we will use the text() function within a for loop: 



void draw() { 

for(int i = 0; i < names.length; i++){ 

text(names[i], 20, i*20 + 20); 

} 

} 

The String object's variable, names.length stores the amount of elements in the 

names array, this information is important for creating the test of a for loop 

iteration. The text() function uses each element in the names array as a data input 

parameter, subsequently rendering each line of the text file one after the other and 

offset on the Y axis. 

The loadStringsExample.pde file 

Using this technique of loading external data does not have to be confined to 

working with the Strings datatype. Typecasting provides a convenient approach to 

converting String data into numerical data that can be calculated. Here's an 

example of the loadStringsExample.pde file that does just that with a file 

containing numbers. It is worth noting that although when you open the 

numbers.txt file it reveals a list of numbers to you, when this information is read 

into our sketch Processing identifies this data as String data. Which is why we 

must first typecast each element of the numbers array with the int() function into 

an int datatype before we can perform addition on the data. 

String[] names; 

String[] numbers; 

int tCast; 




size(300,300); 

smooth(); 

names = loadStrings("names.txt"); 

numbers = loadStrings("numbers.txt"); 

} 

void draw() { 


for(int i = 0; i < names.length; i++){ 

text(names[i],20,i*20 + 20); 

} 

for(int i = 0; i < numbers.length; i++){ 

tCast += int(numbers[i]); //typecasting int(numbers[i]) 

} 

text(tCast,250,20); 

} 



Attribution 

Images 

Apollo Guidance Computer 10 

Copyright NASA 

NASA Manned Spacecraft Center 10 

Copyright NASA 

Japanese Rickshaws 11 

Public Domain 

Medical Equipment 14 

Copyright the owner of the image 

Gambling Machines 15 

Yamaguchi 先生 /Wikipedia 

Alan Turing 16 


LOLCAT image 17 

M-J 

Processing.org image 41 


Star Wars ARC-170 Starfighter 

Guess My Number Game 

Cody Borst (Sqorck) 

Coat of Arms Icons Social Commentary Viz 

Copyright the owner/s of the images 

Attribution 197

Hello Processing - Vula

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?