Guide to Processing

Here are some of the main Processing codes/Vocabulary that we used in our workshops.

  • IDE – Integrated Development Environment
  • Variable – int/floats, boolean, string & arrays
  • Parentheses – ()
  • Class
  • Instant
  • Data Type
  • Compiler
  • Conditional Statement – Testing if something is true or false
  • Camel Case – myVar
  • Do While Loop – do { //code x++; } while (x < 10)
  • For Loop – for ( int x = 0 < 10; x++ ) { repeat code }
  • Variable initialisation – the initialisation of counter of loop
  • Condition – controls how many times the loop happens
  • Iteration – the increment/decrement of counter
  • Stroke Cap – sets style for how line endings are drawn (square, project & round)
  • Stroke Join – sets style for how lines are joined together (miter, bevel & round)
  • Stroke Weight – sets the thickness of the line
  • Random – random(); used for generating random numbers between two values which returns a float and random(10); returns a random number from – up to (but not including) 10

Processing Workshops

Processing is what we use for Programming. This is known as a “Set of Instructions” and various languages are used which are then interpreted to machine code. In these workshops, we were using Java.

The first workshop required us to simply make a circle and then make it disappear when the user clicks on the right-hand side of the stage. This was achieved by firstly, setting up the stage. Then drawing the object (circle) and then inputting the instructions the clear the stage. The screenshot below shows a commented version of what we created. I enjoyed this introduction to programming however as I am unfamiliar with the technique, it came across very overwhelming due to the various code shortcuts that are used. Despite this, it made me eager to learn more and progress further in the next workshop.

Screen Shot 2014-11-07 at 01.21.39

The second Processing workshop required us to create a sketch which draws 10 random circles on the stage without going off the stage. The circles had to be different diameters and colours. Also, when the mouse was clicked Рthe stage had to clear and the process would restart. At first, this task seemed impossible. However, we worked in pairs and together managed to start off the sketch using knowledge and screenshots from the previous workshop. Before we were given this task we were shown how to create random functions and loops. Within the random function, there are different variables which given information/values a name. With the loop function, there are two types; for and while loops and each individual cycle is known as an iteration. When trying to complete this task with no help, my partner and I managed to create what was expected of us but in a very long-winded way. We added each circle in separately but then were told there was a specific line of code which meant the computer would generate it all for us. Below is the difference between the code before and after it was shortened. The third screenshot shows the same task but for 500 circles.

Screen Shot 2014-10-09 at 11.20.19 Screen Shot 2014-10-09 at 11.41.59 Screen Shot 2014-10-09 at 11.44.14

In our final Processing workshop we were set the task to create an array of colours and randomly fill a square with one of the colours from the array when the mouse is clicked. Before this was set, we were shown how to create ‘do while‘ loops and how to alter the style, join and thickness of the outline of the object. There are also various ways to insert colours (RGB/HTML). This was the final outcome after I had figured and been helped to arrange the coding in the correct way. The main thing I am still struggling is knowing what piece of code goes where. I feel comfortable with what the majority of the codes we’ve learnt do but formatting and knowing where to place them is the part I’m finding most challenging. Hopefully this will become more naturally to me in the future when I am more confident with the concept.

Screen Shot 2014-10-16 at 11.16.48