Processing – Workshop Week 2 – So many colours!

Following on from our first processing workshop we progressed towards creating generative art formed by multiple changing frames and values of rectangles on a canvas, we began by setting up the canvas, shown below –

Here is the setup for the beginning of this project, the function 'frameRate' was new to me however luckily the name is self explanatory. The function 'smooth' was also new and simply means (as explained by my lecturer) to turn on antialiasing, which means to smooth edges to make more of a synergy in the design between the harshness of computer generated shapes and the artistic expression I was intending for.
Here is the setup for the beginning of this project.

The function ‘frameRate’ was new to me however luckily the name is self explanatory.

The function ‘smooth’ was also new and simply means (as explained by my lecturer) to turn on antialiasing, which means to smooth edges to make more of a synergy in the design between the harshness of computer generated shapes and the artistic expression I was intending for.

Also, the function ‘int’ meaning integer was used as well as more than ‘<‘ values to keep the values of ‘x’ and ‘y’ above ‘0’ so they would appear on the canvas at all times, a rule was also created so that

The ‘random’ function made each rectangle produced (e.g. 25 per second according to the frame rate set) a different colour which would cause them to contrast with each other, creating the artwork rather than a large blob, HSB is a ‘colormode’ which can be changed from the more standard RGB (Red, Green, Blue) setting is required, HSB allowed me to change one channel (Hue, Saturation and Brightness) of the rectangles, ranging from ‘0’ being white to ‘100’ being black, therefore the randomness created a greyscale background.

The rectangle (rect) was then declared and given a size, in this case ’60, 60′ with its ‘x’ and ‘y’ co-ordinates looping as this here we’d created a nested loop due to the application taking the rectangle drawn at point (0, 0) and looping creating rectangles to tesselate all the way across the canvas creating a background.

Here shown is the second part of the code I used to create the spiral pattern effect that would overlay onto the background created.
Here shown is the second part of the code I used to create the spiral pattern effect that would overlay onto the background created.

The values ‘s’ and ‘r’ were declared where ‘s’ was the size of the square and ‘r’ was the rotation value, ‘h’ was given the data type ‘float’ as it uses a decimal place later in the sketch.

To again add artistic value to the sketch the function ‘noStroke’ was used to take away sharp edges from the squares that would be drawn.

the translate function allowed me to transfer the original from the top left corner of the sketch to the centre, allowing the squares to circle around it as an origin.

the rotation value ‘r’ was used to allow the rotation value to change with every frame, allowing the square to effectively spin around the origin creating the artwork, this is shown by ‘r=r+1’.

‘rect(0,0,s,s/6)’ makes the square into a rectangle, this can be altered to create other shapes which would then produce different artistic drawings.

‘s=(s+2)%(width/2)’ increases the size of the rectangle by 2 pixels per frame, this can be altered easily to create completely different artworks.

Here is the final product –

Here is the artistic result that was produced, personally I found this fascinating and was interested to experiment further with this sketch.
Here is the artistic result that was produced, personally I found this fascinating and was interested to experiment further with this sketch.

Sources –

https://www.processing.org/reference/fill_.html (accessed October 12th 2014)

https://www.processing.org/reference/colorMode_.html (accessed October 12th 2014)

https://processing.org/reference/float.html (accessed October 12th 2014)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s