Week Two – Coding for Creative Practice

examples of creative coding

week two – thursday 25th july

task three: independent study
This weeks example of creative coding I found is an interactive design on Open Processing by the user Jean-no, their work is titled ‘Glass breaking’.
Each click creates the effect of breaking glass by splitting the screen in four parts from the mouse coordinates, each section the splitting further again. All the pieces move away from the centre of the mouse click as they break. Each click also changes the colour of the background that is randomly generated!

processing outputs

week two – thursday 25th of july

task two: – independent study
Independent study this week was to continue on from the basic skills we had learnt in the studio and create three different processing outputs.

blue & purple ellipses
This output is generated by drawing two ellipses that have contrasting stroke colours and no fill. This enables you to see the density and values of the ellipses as the intersect. The interaction and movement of these two ellipses is controlled by your mouse movement on both the X and the Y axis.
During the generation of this design I struggled to see why it was only producing what looked to be one light blue ellipse, when in reality it was both – just layered exactly onto of one another. I solved this by swapping the X and the Y axis controls for one of the ellipses to the opposite of the other.

the false mirror
This output was inspired by the famous surrealist painting ‘The False Mirror’ by René Magritte. This output took a long time to generate and figure out how to make it seem like they eye could open and close with your mouse, eventually I worked out that a heavy stroke weight and colour and a low opacity for the ‘eyeball’ with the ‘eyelid’ sitting behind this created an appropriate effect. These two elements are controlled along the Y axis using the scroll of the mouse. The clouds are generated with a series of small white ellipses that sit in front of the iris but behind the pupil.

orange ellipse arrow
This output is generated using a series of ellipses that overlap. With an opacity of 10% for each ellipse the overlap creates a smoother gradient of the warm tones.
The arrow form is created by limiting the frameCount% at which each ellipse runs to, increasing at each ellipse by 50 until the centre/halfway ellipse, then decreasing by an equal amount.
Initially I struggled to remember the term that would allow the ellipses to move across the whole page, using frameRate, which only enabled the ellipse to move 200 pixels, rather than across the whole page.

processing

week two – thursday 25th of july

lecture notes:

functions: ‘rect(205,200,10,20);‘
Functions do something in code for example, creating objects, shapes and moving elements.
Functions include: rect, ellipse, triangle, fill, noFill, stroke, strokeWeight, line, background and size.

variables: ‘rect(width/2, height/2, mouseX, mouseY);‘
Variables store information about the function. Variables replace the standard numerical parameters that sit within the parentheses.
Variables include: width, height, mouse and frameCount.

screenshots working through combinations of functions, variables, comments and how to find reference information for functions.

data types:
data types are used to set up a document and run code in a smoother more organised way. Data types start with an open curly parentheses and end with one after all lines of code in that data type.
The two data types include: void setup{} and void draw {}

task one: ‘processing panda’
In pairs we were given a set of processing instructions in order to create a design outcome. Some of the instructions were deliberately left unclear for us to work out. We completed this task using the Processing software and a selection of functions and variables resources for elements we need to use.