The first sketch I made in processing was messing around with adding shapes and changing colour. The only thing that irritated me with this exercise was the positioning of the shapes as I found it hard to position the individual elements coherently.

Processing uses lines of code as instruction, which makes it somewhat easier to understand compared to CSS as it isn't 2 different versions of code merged onto one page.

Shapes

Function- rect
To draw a rectangle rect(a,b,c,d);
a-X(horizontal) location of shapes upper left
b-Y(vertical) location of shapes upper
c-width of shape
d-height of shape

Function- Ellipse
To draw an ellipse, ellipse(a,b,c,d);
Diameter-is any straight line segment that passes through the center of the circle and whose endpoints lie on the circle.
If the width(c) and height(d) match then the values will equate to a circle but if the differ it will produce an oval/ellipse.

We use 'void setup' to create the canvas and then we use the command 'void draw' to add elements into the canvas.

When writing out any command you have to end it with a semicolon to make the command work.

Colour

When adding colour the 2 commands are 'stroke' and 'fill'. Stroke is the outline of the shape whereas fill colours the shape interior. We use number values to colour things on a scale of 0-225.

0=Black
225=White

To add other colours we use a 3 number system that equates to mixing colours with an RGB colour model.

fill(255,0,0); would mean the colour shown would be red, but by playing around with the values you can make different colours and tones.

Codes to set colour:
background(r,g,b);
stroke(r,g,b);
fill(r,g,b);

All colours are from 0-255.

Code Elements:
-syntax introduced:
-//comment)
-/*multiline comment/*
-"i" statement terminator
-"," comma
-print() printIn()

Functions allow you to:
-Draw shapes
-Set colours
-Calculate numbers

Expressions
-combinations of operators
-things like "+,* and /"
-they operate on values

Statements
-A set of expressions together make a statement
-Like a sentence
-Define a variable or cosign a variable
-Run functions

For this exercise I made up some data to put through processing and make a java based graph. I based my data on places I go on a regular basis in the space of a year. The values used are randomly scaled up to create the right effect for the graph.

After entering in the values I had to start creating the actual canvas, which i wanted to be white and 800x800px, I used the smooth command to make the shapes and lines less pixelated. I then added the stroke function to change the colour of all the lines in the graph as well as strokeweight to control the thickness of the lines.

In relation to structuralism and poststructuralism, processing looks at different ways or articulating data and information. The program makes it easy to visualise data in a unique way and relay that to others clearly, in doing this it plays with the idea of the designer as the author, as an author's job is to relate to their audience. Processing uses it own language structure of functions and statements to create art via java.

Processing

Final