Processing Tutorial – Creating Conditionals (Part 1)

One of the benefits of programming is that you have the capability to make what happens conditional on a type of user input or computer process. I chose this because I thought it would be a useful if at any point I wanted to put conditional choices into my interactive installation.

To start with, I used a colour pallet, like I used a few weeks back, to have a reference to call colours from instead of typing out the HEX value each time. I then created an integer variable so that the user is able to have a choice of colour pallet they want to use. I then also created two other variables ‘p1’ and ‘p2’ to be used as part of a switch statement which will randomly select the colour from the array.

I then created float for the ‘x’ and ‘y’ coordinates and also for the diameter of the circle that will house the colours from the pallet above. After creating the setup block, for the canvas size and also setting the initial values for the ‘x’ and ‘y’ co-ordinates, I created the ‘void draw’ section which is where the information of the background is created. Using the colour palettes, I was easily able to draw colours from a list (for the ‘fill’, ‘stroke’ and ‘strokeWeight’) instead of having to look up and type out each one individually. Also in this is where the ellipse is created to be later control by a user.

If we viewed the canvas at this stage, nothing would happen as we have no conditional statements set meaning it will not be responsive to anything inputed.

Jade Lauran Design

Jade Lauran Design

Using an ‘if’ and ‘else’ statement, I added the mouse input so that if it is on a particular side of the screen, the diameter of the circle will increase or decrease, by just half a pixel, with every loop.

I then came across something that I had not yet looked at before, ternary statements. This is a way of writing an entire ‘if’ statement in only one line of code. The way this worked was by taking ‘b’ (size of border) and stating that it is equal to, then putting the conditions that need to be met to follow. For this example, I put ‘mouseY’ is greater than the height divided by two. If this was ‘true’ then, using ‘?’ to separate the statement, ‘b + 0.1 : b – 0.1 ;’. Altogether looking like:

Jade Lauran Design

If you simply put ‘+=’ it will return an error message as ‘b’ could potentially go into a negative number, which will cause the program to crash. The way this was dealt with is to put a ‘constraints’ statement, so that it cannot go below ‘0’ or greater than ’50’. The reason that this is put afterwards is so that the ‘draw’ looks at the entire code in the block before it actually executes it, and only do it once through each run through.

Jade Lauran Design Jade Lauran Design

This was a little tricky to get my head round, although it made sense, I preferred the method whereby the ‘if’ statement was written out in full so that each step is fully clear to read.Although I didn’t fully understand how the ternary statements worked, I have grasped the basic ‘if’ statement structure and could possibly write my own unaided to add user control in Processing to be used in my installation to make it a interactive piece.

At this point I am going to take a break and try and digest what I had just learnt as it is a lot to take in all in one go. I aim to finish this tutorial however in the next few days.


– Poulson, B. Interactive Data Visualisation with Processing: Creating Conditionals. Available at: [Accessed On: 3 November 2014].


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your 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