Spencer Roberts / Coding Session 1

October 4, 2013 § Leave a comment

On a Wednesday afternoon we will be taught how to code by Spencer Roberts, which is a skill I’ve always wanted to gain and develop, but not yet, until this point, got round to doing. Coding is such a useful skill to attain due to the widespread use of it in everything from websites to mobile applications, to game design, code forms the fundamental basics to so much in the present day, and this will only increase as we progress into the future, with technology becoming ever more prominent in our every day lives.

This first sessions we were introduced to ‘Processing’, a programming language, development environment, and online community. Processing was initially created to teach computer programming fundamentals within a visual context, and soon evolved into a development tool for professionals. It’s free to download, and has open source code on the website where people share their own coded designs and works.

I plan on learning more about coding in my own time, as the little time of one hour a week to look at code isn’t enough to fully explore the possibilities of it, I have taken out the book ‘Processing: Creative Coding & Computational Art’ by Ira Greenberg to learn more, and understand the language of code, as at first glance and application, it would appear to be  foreign language, a language I am determined to learn!

This video below shows some capabilities of Processing and code, I would like to at some point create something of a similar level.

This link is the screen capture of Spencer’s screen, explaining the code and the process.

I have included my own research into this post, to understand how the code works, as I didn’t fully understand why the code was doing the things it was doing during the workshop.

For easier readability and understanding, I will always put any code in bold italics, to avoid any confusion, and my own notes made within the coding in blue.

This is the code we all had at the end of the session:

float xpos;
float ypos;
float yinc;
float xinc;
float xpos2;
float ypos2;
  // ‘float’ is a variable which stands for floating point which indicates fractional numbers

void setup(){
size(1024, 768);
smooth(); }

void draw(){ println(“i am drawing”);
  // this constantly writes “i am drawing” in the black command bar located at the bottom of Processing

  // the line I’ve created

xpos=xpos+xinc; ypos=ypos+yinc;

if(ypos>768) yinc=-5;
if(ypos<0) yinc=-5;

if(xpos>1024) xinc=-3;
if(xpos<0) xinc=3;
  // ‘if’ means you’re asking a question, in this case…
  // …the above four lines of code are what make the line bounce back and forth of the frame (berween 768 and 1024 pixels, the image frame)



we were told that almost all code will start with this:

void setup(){


Curly braces {}, which always work in balanced pairs (an open and closed one), are used to structure blocks of code

When a semicolon ; is used, it means it’s the of a statement, which is simply a command to the program to do something, as you’ll see in the chunk of code, the semicolon ; is used at the end of almost every line. View it simply as a fullstop in normal human language. Failing to add a semicolon ; to the end of code will result in a compiler error – an error message.

In the code:


there is two parts: the command, and the action (which will be in brackets). The command comes before the action, so in this instance println is the command, and (“hello”) is the action.

print() is an important function that you’ll see all the time in Processing to help you debug your code. The alternate version is println() which does the same thing, but adds a return after the printing the string argument within the brackets. For example, if I were to put in the following code:



the output would be as follows:


If you use the println() version, as follows:



the output would look like this:



The next lines of code create the environment that I will be working in:

size(1024, 768);

each (line) one of these is known as function call, these are reusable blocks of code that you call when you need them. You know this because of the brackets after each word. Each word here is a function, the numbers within the brackets are called arguments – things that are passed to the function, which the function expects to receive and makes use of. When more than one argument (the numbers, remember) is passed to a function, as in size(1024,768); , commas are used to separate the individual arguments. There is no limit to the number of arguments you can pass to a function, as long as the function has the same number of parameters to receive the arguments. In addition, they must be sent in the same order that the function expects to receive them.

size creates the dimensions (width and height) of the sketch window, in this case 1024 by 768 pixels.

background fills in the colour (RGB) of the background, 255 on the RGB colour scale is white.

stroke creates a stroke or outline on the shape, alternatively using nostroke();

fill sets the shape fill colour.

To create a shape I’d put ellipse(50,50,80,80); this line of code means “draw an ellipse, with the center 50 pixels over from the left and 50 pixels down from the top, with a width and height of 80 pixels.”

You’d insert the shape at the end of the code instructing the colour & outline.

Parentheses = Brackets

A string is traditionally a sequence of characters, either as a literal constant or as some kind of variable.

skipping a line of code (spacing lines of code apart) is called whitespace, which is disregarded Processing and Java, as it is in many other programming languages. You can put as much whitespace as you like to help you visually organise your code.

Indenting code is a conventional way to write blocks of code, indenting code makes it easier for other coders to read your code. Often indentations are created by hitting the space bar twice.

Naming Conventions

Camelback notations are combinations or multiple words where each word is capitalised, it is commonly used in case-sensitive environments. By capitalising the initial character of the multiple words, you can read them more easily. Usually the initial character of the first word is not capitalised, but can be, it doesn’t make a difference. it isn’t required to use camelback notation, but it’s highly recommended. e.g. sleepWellAtNight()

There are however naming rules: legal names can only contain letters, underscores, numbers, and the dollar $ sign. The initial character must be a letter, underscore, dollar sign, but not a number. It’s recommended to only use a letter as the initial character. You can use numbers after the initial letter. It’s also strongly advised to use names that are descriptive, for example, which is easier to understand: getAge() or abdi()?

The names you define are called identifiers, these are fictitious names that you create. Based on the preceding rules here are some legal identifiers:

  • String myBall
  • float speed
  • int ballCount
  • float theBallSpeed
  • boolean YouCanActuallyMakeYourVariableNamesAsLongAsYouLike

Here are some illegal ones:

  • String Ball 1
  • int 100bjs
  • float -weight
  • int myBall#

The reasons that these are illegal are as follows: Ball 1 is illegal because of the space in the identifier; 100 bjs is illegal because you can’t begin an identifier with a number; and -weight and myBall# are illegal because both contain illegal characters: – and #.


A variable is something that can mean different things in different parts of the program. However, a literal is simply an explicit number or string constant (words of characters) used in programs e.g.

  • “Sophie”
  • 25
  • 10346
  • “abc”

Note that string literals are enclosed in quotes (usually double quotes) and numeric literals are not. In some cases, if you need a string within a string, you surround the inner string with single quotes ‘ ‘ e.g.

String announceDate = “I’m writing this on: “;

String currentMonth = “October”;

int currentDay = 4 ;

String currentDayName = “Friday”;

int currentYear = 2013;

String comma = “, “;







The sketch will output the following:

I’m writing this on: Friday

4 October, 2013

Notice the use of the print() and println() statements to help format the outputted lines combining the literals.


Variables are essential to programming, coding anything without them would be very difficult. There are two types of variables in Processing and Java: primitive variables and object reference variables. The major differences between these two categories of variables are the kind of data they can be associated with and how this data is stored and referenced in memory. At the moment primitive variables are what will be covered, as object reference variables are a little more complicated.

A primitive variable is simply a name assigned a specific value in memory that you can recall and change e.g.

int age = 6;

String name = “Ian”;

boolean isABoy = true;

The first part of each of the statements (int, String, and boolean) declares what type of primitive data the variable can hold: int holds integers, String holds words, and boolean holds true or false. The next part (age, name, and isABoy) is the identifier of the variable, and the last part is the actual value (6, “Ian”, and true) assigned to the variable.

Variable names are case sensitive within Processing and Java, meaning that xSpeed is a different variable than xspeed. A variable’s name is created by the coder and needs to be a legal identifier (refer to naming conventions). Regardless of whether you are naming a primitive variable, object reference variable, function, method, class, or object, the same legal identifier-naming rules apply. There are however keywords that are exceptions: these can be found here. Also try avoiding naming custom variables, functions etc. with any of the built-in function names in Processing, to avoid unexpected results.

When initially creating a variable by writing ballCount, it has not yet been specified a specific value to be assigned to the variable, but only letting the computer know what type of data is allowed to be assigned to the variable (in this case, an integer (a number that can be written without a fractional or decimal component)). Every variable must be associated with a data type. Some common primitive data types in processing are int, float, char, and boolean. Data types tell the variables what they can and can’t do and also how much memory should be allocated for them. For example, a boolean type variable can only hold the variables of true or false, requiring only 1 bit of memory to store either a single 0 (false) or a 1 (true). It would be a waste of memory to do it any other way. A byte can hold a number between -128 to 127 (making 256 different possible values), requiring 8 bits, or 1 byte.

When you write the variable data type and identifier (name) – e.g. int ballCount – you refer to this as declaring the variable. When you give a variable a specific value – e.g. ballCount = 3 – then you say you are initialising the variable. These two activities can be done together in one step (e.g., int ballCount = 3), or separately depending upon your program needs. Because variables are by default mutable, once you initialise a variable you can still change its value whenever you need to (as long as you assign it a value consistent with its originally declared data type). For example, try out this code:

int ballCount = 15;


ballCount = 10;


ballCount = 100;


giving the output:






Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

What’s this?

You are currently reading Spencer Roberts / Coding Session 1 at Leo Patterson.


%d bloggers like this: