Color cycling using Inkscape

Introduction: Color Cycling
I didn’t know about the existence of this method of animation which was apparently used in the very early video games.
I first learnt about it through a video from Mark Ferrari in which he was explaining the process during a talk at GDC: https://youtu.be/aMcJ1Jvtef0?t=3099
I was so inspired and fascinated by the process that almost straight away I enrolled on a journey to do something similar in Inkscape.

I knew from the start that it would be possible because when working in Inkscape, we SVG artists carefully manage our resources (i.e: color, shapes and attributes). So it would be feasible to implement color cycling because the restrictions when working with SVG are actually very similar to those of early pixel games in a way.

Development: The making of:
I defined 10 shades of blue for the waterfall, and made sure to arrange the colors in such a way that each wave would follow the color pattern of my palette.

When the colors are cycling this is what is happening: the current wave takes the color of the previous wave and the next wave takes the color of the current wave.
When applying this principle to each wave in the waterfall you get the cycling effect below.

Cool, isn’t it!

Once the cycling effect was applied to the water, I just added a blur filter in order to blend the colors together.

Music and sound integration

The animation was crying out for sound effects and some background music.

A while ago I acquired 'Universal Sound FX' from the Unity Asset Store which contains all kinds of sound effects which were perfect for my scene.
The music is from John Leonard French (http://www.johnleonardfrench.co.uk/)

With Inkscape and FFmpeg working together I was able to blend the sound effects and the music to create the forest ambience and atmosphere I was after.

This is the 3rd project where I have used FFmpeg, a video and audio command line tools.

It is absolutely mindblowing how fast you can create, convert, manipulate audio and video files with ease.

I exported each frame (only 10) of the animation from Inkscape and converted those in a 2min10sec video.

I tried to create a story with the various animal sounds in the video. Various birds and some bees appear to come close to the area then leave. At the end, some gnus walk past and then are  being chased by a tiger.

Conclusion: Final thoughts and other projects
Color Cycling is such a ancient way to animate yet so effective, it is amazing to see that the whole animation is made of only 10 frames yet it convey the feeling of running water quite effectively (well I think so).

I have always wondered how Nintendo did the animation of waves lapping on the shore in “The Legend of Zelda: Link's Awakening” on the first game boy.

How the fire effect was done when the characters were hit by flammes in SNK’s King of Fighters series.

Now I am pretty sure that they all used Color cycling.

Where can I go from there?  Well the sky's the limit! There is so much you can do with Color Cycling, it is such an effective method to animate anything from water, fire to cloud and smoke.

Take a look at this: http://www.effectgames.com/demos/canvascycle/

Awesome isn’t it ?

I guess Palette Shifting would be the next step from Color Cycling. This would allow me to simulate different times of the day for a specific scene.
Take a look at these examples: http://www.effectgames.com/demos/worlds/

I remember the Morning Afternoon and Night time in SNK’s Fatal Fury Special series, or how the characters get to have different color selection in Art of Fighting 2.

I am pretty sure they used Palette Shifting for that too!

Although I look forward to try Palette Shifting,this project is actually my 3rd test with Color Cycling so  I am going to explore the different possibilities which seem endless!!!