Photo Kaleidoscope
Pete Chappell has created this canvas demo takes photos from Flickr (currently from a predefined set) and creates a kaleidoscope from them using the HTML5 canvas element.
Choose a photo and play with the effect
Comments from the Author:
I use a combination of drawImage and clip to render a 8 triangular portions of an image on a square canvas. Moving the mouse causes the masks (created by clip) to move over the original image thus creating the kaleidoscope effect.
Comments
Maxximum
Does not works under Opera 10.
Posted on July 28, 2010
frank
Works fine for me with Opera 10.53 and with the latest SE Iron browser as well.
Mr. Chappell, have you discovered a loophole or workaround for same-site browser security policy? I’m amazed to note that although the webpage is served from your site, the images are retrieved from Flickr… yet the browser allows these to be loaded by the canvas object!
Posted on July 29, 2010
Pete Chappell
@frank. I have a hidden image on the page that I’m using as the source image for the canvas (i.e. for the Kaleidoscope) and I just change the source of that image using javascript (and the flickr api). I guess that way the image is local to the page. I’m not sure this is a loophole but it does seem to work. I’m hoping to update the project sometime soon with some more ideas.
Posted on July 31, 2010
Related demos