processing

Processing.org
(image link)

Since using the 'Hello Processing' tutorials, more syntax has been introduced to use within processing work.

• //Comment) allows you to write notes to yourself on a line while working on a project

• /*Multiline Comment /* allows you to write more than a line of text to use in your work.

• Both of these special commands appear in the processing box in light grey to separate them from the rest of the commands.

• print() is a function that allows you to look at the data a program is producing and 'writes' to the console area (the black box at the bottom of processing box)

•println() similarly works like print() but produces a new line of output with each function and can hold more than one parameter (a numerical or other measurable factor forming one of a set that defines a system or sets the conditions of its operation).

• "Expressions" - an expression is a combination of operators, such as + (plus), * (multiply) and / (divide). A set of expressions creates a statement, which defines or assigns a variable, can run a function or construct an object.

e.g "ellipse();" draws a circle, and the (x,y,w,h) needs to be plotted to create the circle, or intx defines a new variable called 'x'.

In todays workshop we explored the use of the 'Processing' program working with shapes and colour, variables, conditionals, creating simple data visualisation.

To get us initially introduced to the program, we were tasked to draw a house in processing in 20 minutes after a brief tutorial.

Next we had to create a data visualisation (following the tutors steps on the projector) after creating collected data on an Exel sheet, using variables (i used 'Jam jars') such as different flavours of jam, how much was sold in a month, and the remaining amount.

To export the Excel file into processing, the excel needs to be saved as a .CSV file (save into your processing file to find it easier).
Next open the .CSV file with TextEdit / Notes (mac/windows)so that the information is transferable to processing.

To begin adding in an array of data, you start with the function String for data that is in word format, and the function int for data that is written in number format.

• The first image shows the text edit file.

• The array has been entered so that program knows what data it needs to process.
Processing doesn't know that words are not commands unless they have quotation marks around them.

• the shapes representing the data has to be 'drawn'.

•'for' controls a sequence of repetitions. (in this instance it controls the -ints-.

•"Remaining[i]" links the int Remaining information to the ellipse shape.

• the canvas size and background colour has to be set

----------------------------------------------------------------------------------------------------

• this section is the interaction between shapes and the information.

•'Translate()'Specifies an amount to displace objects within the display window.

•'rotate' rotates the object specified.

•'text()' places the text from the int and positions it at chose (x,y).

----------------------------------------------------------------------------------------------------

This is the original result after the code has been run in processing.

This is a version where the colours have been changed to
(in void setup()) stroke(255,0,0);

(in void draw()) background (0,200,20);
(for the ellipse) fill(0,0,250,50);

This website has been created for educational purposes only, for the module of Authorship & Interaction at the University of Westminster.

BA(HONS)Graphic Communication Design; Kirsten Adams; W1552277

My original work from the workshop;
I have reworked it for this write up and it seems as thought the process has worked better as a final result.

----------------------------------------------------------------------------------------------------