WebGL Kaleidoscope
One day, I kept thinking about kaleidoscopes and how they worked. So I decided to make one. Great story, I know.
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.
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:
- Framerate (at least in Chrome): As opposed to previous ways of setting up the project, this time I did not need an update loop. As there were no animating elements, I could update the screen only when an element changed.
- Simple UI: The page elements make it easy to explore the full features.
- The Effect:I was not sure that this would work at all, but I got the idea and had to run with it.
- Texture Loading: Provided that the image dimensions and file extension are correct, adding more images would be a breeze.
Things I'd like to impove:
- Triangle Pointers: Once again, pointers would make everything nicer. Whenever the texture coordinates are updated, every single triangle must be updated with the new values. With pointers, every triangle on the screen could just be a reference to the original.
- Dynamic Images: I would have liked to be able to upload my own images on the webpage, but cross domain issues prevented me from exploring this avenue.
- Containment: I should probably add code to ensure that the selection triangle stays somewhere on the screen. Oh well...
Debug:
Any debug information will be printed out here.