Dynamic Image Collage
Berry de Vos (aka RadicalFX) has created a Dynamic Image Collage creation tool, built with canvas.
Your collage creating begins with a Flickr search, which will bring up a list of the most popular results. Clicking any of the results will automatically add them to the collage area as a new layer. Each layer can be altered in a variety of ways – from moving, scaling and rotating to changing opacities, blend modes and shadows. You can also adjust the layer position in relation to the other layers.
Not the prettiest collage in the world...
The JavaScript code for the collage has been split in to two parts. The first part is a library that loads in all the calls for canvas and gives the page the ability to modify the layers in the collage; whilst the second part of the JavaScript code handles the page interactions and binds the HTML controls for the layers.
Berry comments:
The most difficult thing to get going was handling the collision interaction with the Objects, because I couldn’t use the normal mouse events based on the DOM. I had to figure out the math behind the collisions myself, this code is not very pretty.
Related demos