I’ve been experimenting in Processing, this time with the intention of creating patterns out of rotating simple shapes. In the workshop we were given the example of a house image, but could then play around and make our own images to rotate and otherwise create patterns from. I wrote a function which would draw a stick-figure out of a few lines and a circle. I then used this function, calling it several times using a for loop, to make rows of stick-figures which were then incrementally rotated around the middle of the screen each frame. This created an interesting pattern.


I also added slight random deviation to each row’s position and opacity to make the pattern slightly less regular.

For the colouring of the image, I defined an array of a few RGB colours as effectively a pallet of colours which I would then randomly choose from for each generated row of stick-figures. I think this concept could prove very useful  in any more complex designs developed in Processing, or really any programming language, as it keeps a general tone for the whole piece by using a confined set of colours, and also makes it easy to swap out these colours and have that reflect throughout the whole piece of work with minimal coding effort.

I then decided to produce another piece with the same general idea, except this time I used rotating randomly-coloured circles which were also moving away from and towards the point of rotation, while changing size and opacity relative to the distance. I also implemented a system to take screenshots using a mouse-click, which would be named for the exact date and time they were saved using Processing’s in-built date/time functions (day(), hour() etc.) and simple string concatenation.

I decided to add another level of interaction to this piece, whereby the speed of the circles’ travel from and to the point of rotation is controlled via how far along the x-axis of the canvas the user’s mouse pointer is. I did this by mapping the controlling variable of how far the circles move each frame between two values to the mouseX variable between 0 and the width of the canvas. I really like the effect this has on the piece, as it provides a large variation in the patterns which can  be captured, simply by moving the mouse to different positions at different times and then taking a screenshot.


Several of the methods used in these works I’m sure will be fundamental for many Processing projects to come – things such as mouse interaction, string handling, and building up images from simple shapes. In theory, it would be quite simple to perform actions with camera-interaction similar to those done with the mouse, once the appropriate motion tracking libraries and such are in place. Once I am familiar with that side of programming in Processing, it is easy to see how small works such as these are very relevant in building up ideas and snippets of useful code for the interactive display project.