WebGL Kaleidoscope

One day, I kept thinking about kaleidoscopes and how they worked. So I decided to make one. Great story, I know.

Download the source code here: scope.js and shapes.js


The Original Image

Click and drag the triangle to change the selected portion of the image.













Kaleidoscope View

The selected image above is mirrored and tesselated across the entire view to create the kaleidoscopic effect.

Your browswer does not support HTML5 Canvas. Try using Chrome! Your browswer does not support HTML5 Canvas. Try using Chrome!

THE CODE...

I got to thinking, a kaleidoscope is really just one image that is reflected and mirrored a bunch of times. So I started drawing out the pattern of what happens when you reflect a triangle's pattern over one of its sides. When you look at the pattern individually, there are only six different ways that the original triangle is drawn, and once you lay out the grid in that pattern, it is very easy to create the kaleidoscopic effect.



Things that work well:


Things I'd like to impove:


Debug:

Any debug information will be printed out here.