Spiral Clash

View the animation

From Oil Painting to Animation...

...a thirty year journey through life and art...

For the longest time this painting has been standing among a load of old bicycle tyres and other jetsam including packaging materials, acrylic paints, newspapers, DIY stuff and computer bits and bobs going back to floppies and zip discs.

It was painted way back in the early 90s when I was mixing and matching small offset inks for Rotaprint in Wembley, whilst doing a distance learning painting course with the Open College of The Arts. It takes inspiration from both my job and my hobby.

The design is two Archimedean Spirals fanning out in opposite directions, creating the segments which are then filled with blocked in colour.

...from paint...

An Archimedean spiral is dead easy to draw. It's a spiral where the distance between the loops remains constant as it moves out, unlike the shell of a snail where the distance keeps expanding in line with the Golden Ratio. I created the spiral by banging something round into the centre of the board I was painting with a nail. I then attached some cotton to it, wound it round, tied a pencil to the other end and unwound, drawing as I went. To get the second spiral I wound it up the other way and unwound again.

The black and white image clearly shows where the nail was. I did the black and white image as a dummy run for the colour one and then painted the colour one on the other side, clearly a good idea because I did the spirals a lot better on the second attempt.

The colours were precisely matched to give a segment a complimentary contrast with it's adjoining segment, causing the colours to clash and appear brighter than they actually are.

To get the most saturated colours I could I used both Artist's oil paints and oil based Offset Inks which mix with oil paints. Where I needed to make paints a bit more opaque I used Zinc White because it doesn't kill the colours as much as the intense opacity of Titanium White.

Unfortunately some of the colours have suffered the ravages of time more than others, particularly the ones made with laked pigments, but I do have professional quality 35ml slides of it when it was new and in better condition which I will upload when I get a decent scanner and the time.

The painting, with it's geometric design and colour interactions, fits firmly into the "Op Art" genre, and I have to cite Bridget Riley (a favourite Artist) as an influence, but it is equally inspired by my work as a Colour Matcher and as a Lab Technician. For the colour version I moved the spirals round about 90° clockwise to give it an upbeat dynamic. This is a standard practice in Western art, fully explored by Georges Seurat who played with what he could do by controlling the direction of the dots in his pointilist paintings.

The clashing colours clearly worked like a dream once when relatives were visiting. My Nephew came downstairs complaining of a headache. Shortly afterwards my Niece followed saying he'd been staring at my painting for the past half hour. The painting has since been published in an Open College of the Arts textbook.

...to pixels...

At around the same time as I was made redundant from Rotaprint I was accepted to study Fine Art (Painting) by the Birmingham Institute of Art and Design. Whilst there I discovered computers, or at least Photoshop, Claris Works and the Internet. After graduating I used my Print Union card to properly learn Graphics and Web Design software and bought myself a Mac with a then blistering 450 megaHertz.

I quickly acquired the ability to work precisely and accurately in Adobe Illustrator and created a series of vector images, including rebuilding the painting as a vector graphic. I drew the spiral in Macromedia Freehand because you couldn't actually draw out an Archimedean spiral in Illustrator, and still can't despite the fact that Adobe bought Macromedia and incorporated a lot of what Freehand did into Illustrator.

That was it with the image for a long long time as I got...

...a job...

...a bicycle...

...and an allotment

...and, finally, animation.


The job was as a 6th Form College Technician, first in the Art department, then in Media and finally in Media and Computing. All in all it involved helping students and, to an extent, teachers with Graphics, Movie, Animation and, in Computing, Web design based around coding.

At the college I had to take an autodidactic approach to developing my skills so as to help students, create how to guides etc.

This involved quite a lot of experimentation and doing my own thing as well as mastery of the Google search. A lot of the skills required for the animation came as a result of updating Computing's WebDesign element to include HTML5 and CSS3 and their Animation element where they were now being taught to use HTM5 as oppose to Action Script.

The animation was built with a lot more segments than the original painting, making it easy to give the colours an even spread using hexadecimal code. The Archimedean spiral was made in Inkscape, free Open Source software that writes to SVG, the intended format for the final product. The spiral was duplicated and one was flipped to give two spirals going out in opposite directions.

The document was then imported into Affinity Designer where the two paths were duplicated again. Paths were then cut and joined at the intersections to create the shapes which were then filled with colour. It was then saved again as an SVG and opened in Brackets, a free but excellent piece of web editing software for coders. That's where the animation was done entirely in CSS...

...and all because, since retiring, I don't have access to an up-to-date version of Adobe.

Animating the colours was a lot of work, but straightforward. Setting the axis for the rotation proved to be quite tricky. However, a little help from a good Maths' page about the Archimedean Spiral by French Mathematician Robert Ferréol and some tweaking of the SVG centre point (transform-origin) and I got it to within a gnat's whisker.

The End

Follow on:

Inspired by the Robert Ferréol page, I went on to create another animation based on the “Snail of Theodorus”, a variation on the Archimedean Spiral.

Click here to view it in action