Vimeo Awards Ident
April 27, 2010
I was asked (and honoured) to do an ident for the first awards festival for Vimeo.
My general concept was ‘make my computer draw it instead!’
I took it as an opportunity to demo some new ideas I’ve been working on in Processing.
My new area of interest is vector style artwork, usually created in Adobe Illustrator, by hand – with its trademarked solid/gradient fills, stroked outlines, lots of circles, straight lines and swirly freehand brush strokes. I was looking at a lot of abstract stuff on the web, I saw the amazing potential of purely algorithmically generated ‘vector style’ art work, which could also be more visually complex and sophisticated, and which could then also have animation / motion.
The ident for Vimeo is really just the beginning of me exploring this area – I’ve a lot more R & D to do yet, but to begin with my interest is in creating algorithms for brush strokes.
First of all was generating simple Perlin noise flow fields for freehand style strokes to be randomly drawn.
A ‘perlin flow field’ is something that uses a cloudy grayscale perlin noise image to affect the speed and direction of particles.
Next is to replace the simple red lines with a ‘brush’ – comprising of multiple bristles :-
On the inset of this picture you can see the brush image generated at runtime – also with perlin noise random generation.
With a little more refinement, I use the perlin noise principle to affect the size of the individual bristles as the brush stroke is being drawn:-
By this stage in my code I had a Class structure called Brush which looks like this:-
Brush (int num_, float mx_, int strokes_, int steps_, float agentspeed_, float increment_)
- ‘num’ is the number of bristles.
- ‘mx’ controls the scale/spacing between bristles.
- ‘strokes’ is the number of drawn strokes using the brush.
- ‘steps’ & ‘agentspeed’ control the overall resolution and definition of the final brush stroke.
- ‘increment’ scales the noise map to create broad vs tight brush strokes.
For the last image generated above, here was the instance of the Brush class which was behind it :-
b = new Brush(10, .2, 15, 200, 4, 0.007);
the Brush class generates its own image layer ‘finish’ :-
It’s all still early days, but the above coding gives me the potential to build up very complex layers of brush stroked image layers. I’ve yet to get into colouring, masking etc.
It was at this stage however that the Vimeo came along, so I thought it simple enough to replace the bristle (the red dots) with the ‘v’ from the Vimeo logo.
And before you know it, voila !
I’ve obviously added a random colonizing to each ‘v’ bristle. I also made each brush stroke follow a scaling up from small to large for dramatic effect. I also added a ‘fade’, whereby after each stroke is drawn, the previous strokes get a slight white wash and give a sense of depth and composition. These further parameters will be built back into the Brush class structure as the code and algorithms develop.
Here’s a few stills from the final piece.
Animation wise, I’ve really just shown the brush strokes as they are drawn, but my intention for future development is to have the possibilities of flowing, organic motion.