Tattoo Kaleidoscope = Animation Example

You can view the final interactive Flash version here:

Several years ago a client of mine called SWRD re-branded and their new brand was a stylized quote mark that would be duplicated into lots of different geometric patterns. It was a nice idea and looked visually quiet stunning.

Originally they planed on having a static story boarded animation that would move from one preplanned pattern to the next but as soon as I saw the patterned designs they had produced I just knew this could potentially be animated into random that would hopefully produce amazing animated patterns.

I love doing Actionscript based animation and I also get a kick out of doing things that contain some random element. In this case it is amazing how with a few simple parameters for x,y, rotation etc. you can randomly create limitless permutations of geometric patterns. I took the interface for this version a step further by giving the user an interface to select from lots of different base graphics, in this case vector tattoos courtesy of  Vector Graphics.

I know technically this is probably not an actual Kaleidoscope. It is not based on Fractals, just simply based on repeating patterns rotating around a central point. If there is a technical term for that than let me know and I will update the title.

In the future I hope to add the facility for people to upload their own graphics and also save their favorite patterns. A first stage of that was to include deep linking so that people can at least book mark their favorites.

On the subject of ActionScript controlled animation anyone hoping to learn more on this subject should definitely check out the totally excellent “Foundation ActionScript 3 Animation: Making Things Move!” from Friends of Ed here: As always with books from Friends of Ed, the source code is available and if you don’t fancy buying the book than you can learn loads just from looking through the downloads available here.

The original version of the “brand story” animation that inspired all this can be viewed here – “SWRD Brand Story“. As a small side note I actually preferred the previous Flash sting I did for them which you can view here – “SWRD Website Sting“.

Related Posts:

This entry was posted in Actionscript Animation, Lab Examples and tagged , , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

One Comment

  1. Posted December 14, 2010 at 6:55 pm | Permalink

    Hey very nice weblog!! Man .. Lovely .. Remarkable .. I’ll bookmark your weblog and take the feeds

One Trackback

  1. By 2starring on January 12, 2022 at 11:21 pm


Post a Comment

Your email is never published nor shared. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>