2-2-1-Processing

Processing is an open source Java-based programming software and a language that was developed by Casey Reas and Ben Fry in 2001 to enable artists, students, designers, researchers and the general public who like coding, to apply coding within the visual arts context. It can be used to help display Data in an effective and interactive manner.

Data visualization is the presentation of data in a pictorial or graphical format. It enables decision makers to see analytics presented visually, so they can grasp difficult concepts or identify new trends. With interactive visualization, you can take the concept a step further by using technology to dive deeper down into charts and graphs for more detail, interactively changing what data you see and how it’s processed and a programming software such as Processing can help us achieve this...

In the video, Daniel Shiffman explains the new features of Processing 3, a program that we will use in the workshop later. This shows what processing is capable of. Processing also has a library of sketches that has been written by many enthusiasts across the globe that can be accessed from the IDE (integrated development enviroment) itself.

Before the workshop we learned the basics by using the helloprocessing.org website I found the exercises fun and interesting. I may use processing in the future..

Here I experimented with shapes; Eclipse and rectangles and made a crazy Mad Hatter out of it

To draw an eclipse you have to write
eclipse(x, y, width, height); (where x and y are co-ordinates for the center of the eclipse)
and rect(x, y width, height); (where x and y are the co-ordinates for the top left corner of the rectangle)

Here I coloured in the Mad Hatter using many colours;

To colour in with greyscale you have to write
fill(x); where x can be any number between 0 and (255, 0 being the darkest)
To colour in with colour you have to write
fill(r,g,b); where r,g,b can be any number between 0 and 255.As Daniel mentions colours are like light and the 0 means no light while 255 is the most amount of light of that colour is mixed.'r' represents red, 'g'represents green and 'b' represents blue. We can also change the colour of the line around the shape by writing stroke instead of fill. We just have to keep in mind that this has to be written before the shape you want to colour otherwise it wont work.

This part of the processing tutorial was a bit different and hard to understand but when I got the hang of it I enjoyed it. The fact you can create something that people interact with using this software just shows what you are capable of.

To make an object interact we were introduced to void. There is "void setup()" which should always be there. It is the setting up of the environment and we only use it once. This includes the size of the canvas ("size(width,height);") and can also include the background ("background(r,g,b);")

It is written like
void setup() {
size(500,400);
background(0);
}

After void setup, we use void draw. This loops the sketch forever until we stop it. We can write things like rect(mouseX, mouseY, width, height); to make the rectangle follow our arrow.

It is written like void setup but has draw instead of setup
void draw() {
stroke(255,0,255);
fill(0,253,225);
rect(mouseX, mouseY,70,70);
}

Now here Daniel discusses how we can use questions in Processing. "If the answer is no draw a circle and if the answer is yes draw a square" he explains. This sections of processing code are called "Conditional Statements" and uses syntax "if (action) { code }" where action can be keyboard functions or mouse functions (eg. "mousePressed"). This then makes the code in between the curly brackets appear but overlays an existing code set prior to the Conditional statement (image 7).

To prevent this we use "else" after the closed curly bracket of the "if" statement and before another open curly bracket for the code for "else". Image 8 illustrates when "else" is used. (if that mouse is pressed it shows a square and if the mouse isn't pressed then "else" functions and shows a circle.).

This is how the conditional statement was written in the second picture in the void draw section pf the code...

if (mousePressed) {
rect(250,200,100);
} else {
ellipse(250,200,100,100);
}

After the Tutorial I retrieved my certificate of completion from the Goodbye section of the tutorial. I then decided to explore the gallery in the Hello Processing Website. I found it amazing what processing can do. I enjoyed exploring the gallery and interacting with various sketches created by other people.

Today was the workshop where we built on from what was learnt from the helloprocessing.org website. The programming software was installed and set-up. Image 11 shows the user-friendly interface of Processing. We learnt how to draw other shapes such as points, lines, polygons, triangles and arcs.
We also played with transparency and thickness of strokes.