In 2012 I visited the arts exhibition “A House Full of Music“ at Mathildenhöhe Darmstadt. It was a huge inspiration, because it covered a wide range of music arts, with a focus on the works and ideas of John Cage.
There I stumbled upon a animation of Marcel Duchamp from Hans Richters movie “Dreams that Money can Buy”” with music by John Cage: the so called Dream Scene (Youtube). The simplicity of the visual illusion of moving rings, which are just moving plates is compelling. After succesfully recreating them in Processing 2.0, I realized, that it should be painless to achieve the same effects in HTML5.
Paper.js is a great library for vector based drawing on HTML5 Canvas. It has useful built-in-functions like layers or animation. But the very best: vector math right in Javascript: Paperscript!
1 | new Point(5, 10) + 20 // {x: 25, y: 30} |
The result of this little experiment is a bright animation in honor to Duchamp. Ah, and needless to say that it is generative: The discs are created randomly, so move your cursor or click and you will see…