cutout.js - Javascript Cutout Animation

This project provides javascript cutout animation, inspirated by Monty Python and others. A first case study is a swinging Mona Lisa. Click the links to start the animation or to browse the project at github.

►Start canvas 2d
►Start webgl
►Github repository


Some notes on how the project was developed.

• At first there was the canvas 2d version. For browsers, that dont have hardware accelerated sprites, and to compare performances, a webgl version was implemented.
• Another canvas demo, which tests performance of transparent transformed sprites and was made before the cutout project, is here.
• The cutout segments are drawn using matrix operations. The canvas 2d api originally didnt had a method to read a current matrix. This is added currently (context.currentTransform). Until it is in every browser, own matrix manipulation using vecmath.js is done.
• Cutout segments are taken from one partly transparent image. It was drawn with the web paint app and following steps:
• The canvas-width of the original Mona Lisa image was doubled (Menu/Edit/Dimension), so that the original image is on the left, transparency is on the right side.
• Cutout segments were cut from the original image (Menu/Tools/Rect) and copied to the right side. Then transparency around them was drawn with Menu/Tools/Eraser.
• Finally, when all segments were done, the original image needed to be changed so that it constitutes the background. To dont have to draw new background, where Da Vinci didnt bothered, there is Menu/Tools/CopyBrush. With this tool the original background areas were multiplied, so that they covered the whole image.