United Nations Flags

There are 193 full members of the United Nations. I've put together a web page animating between those flags based on the SVG images in Wikimedia Commons.

The process was:

1. Curate the 193 state flags plus the flag of the UN itself.
2. Construct 194 approximations of those flags using JavaScript and HTML canvas elements.
3. Reorder those approximations into a loop of 194 transitions based on similarity.
4. Encode the 194 animations.
5. Create a web page to allow the user to explore the animations.

Of course, there are 194! ÷ 2 animations needed to get between any two flags directly, but that's such an absurd number I didn't even think about trying. I did think about creating "shortcuts" between flags in the loop and minimising the number of animations between two arbitrary flags to, say, 10, but this is still a huge amount of work. I'll leave it as an exercise for the reader to work out the total number of animations required to reduce the maximum number of hops to "N".

In an ideal world, I'd animate the high-quality SVG images themselves; but that's also a task for another day ... if ever.