I originally made the "colored chain" in Flash with ActionScript 3 for the redesign of the Underworld Japanese fan website. Shortly after finishing it, a friend challenged me to create the same thing in JavaScript. As JavaScript was starting to get more popular for client-side interaction (and Flash was on the way out), I decided it was time to really start studying it. I made the colored chain after only 2 months of studying JavaScript.

Click the pink link and drag the chain.

How It Works

The "colored chain" uses a constructor function and prototypical inheritance to create each of the link objects. The links are then instantiated, arranged, and all necessary event handlers are set up in a main function. As the user drags the chain, the position and rotation of each link is calculated by trigometric functions provided in the book "ActionScript 3.0 Animation: Making Things Move!" by Keith Peters. Ironically, the book has since been republished for HTML5 and JavaScript!