First Project: Processing

As I mentioned here, the first project we are doing is going to be made using processing. The ultimate aim is the create an interactive information graphic about 21st century media to be displayed on the screens in the foyer of the media building at uni.

For those who are keen viewers of this wonderful blog, you’ll remember that I’ve already done some work in processing, experimenting with generative design and the Twitter API. In friday’s workshop we got to grips using more complicated methods in processing such as for loops, if statements and even the odd modulo.

The first thing we made was a simple drawing tool which used an if statement to see if the mouse was clicked, and if it was it would then draw the circle and follow the position of the mouse. Obviously this was very basic stuff so we experimented a bit further by making the size of the drawing tool increase. For this we used a modulo e.g. x=(x+1)%50. What this does is adds 1 to the value of x over and over again until it reached 49 and then the modulo resets it to 0 so the counting can start again. I used a similar methods for the value of the hue which increased its value making the colour move up the spectrum and then loop back around. I like the effect this gave as its a gradual change in colour rather than just random values which we experimented with before.

Screen Shot 2014-10-11 at 12.17.50

Next up we played around with nested for loops in order to create a grid. This method is great for creating something which looks visually complex but can be written with very few lines of code. In my example below, I again added an element of interactive as the mouses x coordinate influenced the size of the grid and the colours. This meant that depending on the position of the mouse, the grid would be animated with waves of colours passing over it which looked pretty cool.

Screen Shot 2014-10-11 at 12.18.50

The final thing we did in the workshop was to play around with rotation. For this started by creating a rotating square around the centre of the canvas. This then progressed into making the square change colour with the same process i had used before to get the gradual hue changes. In this one the opacity of the square is lower so when it is redrawn over the old shapes, they can still be seen slightly, creating a different effect. We also made the square increase in size using the same modulo statement which resulted in the pattern created constantly evolving and moving. This created a rather psychedelic effect which I like a lot and will try to improve upon in the future.
Screen Shot 2014-10-11 at 12.14.48

For next week we’ve been tasked with playing around with some of the methods we’ve learned about and to make something cool to showcase in the workshop. So the plan for this weekend is to sit in the dark in my room, write a little code and watch some colourful shapes dance around on my screen.

Advertisements
Tagged ,

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

%d bloggers like this: