Colliding Scopes Turn photos into kaleidoscope animations
Animation Speed
# of Tiles
Width: Height: Seconds:

About

This web tool is completely free, open source, without any paywalls or premium options. You are welcome to use it for personal or commercial purposes.

If you found this tool useful, feel free to buy me a coffee. This would be much appreciated during late-night coding sessions!

Buy Me A Coffee

Enormous thanks and credits to Luke Hannam, whose blog post explained the code and mechanics for creating kaleidoscope animations in javascript.

I made only a few tweaks to Luke's original algorithm, with my main work being to add the front-end user interface allowing users to upload their own photos, control variables like animation speed, and easily export the canvas animation to video.

There are a few hotkeys which can speed up using the tool:

This project is coded using Javascript, HTML, and CSS (see github repo linked below). Video creation and encoding is done using mp4 muxer.

I do not have access to any of the images that you upload here, as all processing is done "client-side" (i.e., no images are saved or stored by me — they stay on your computer only).

Feel free to reach out to discuss, ask questions, or to share your creations! The animations can be easily uploaded to instagram or otherwise -- you can tag me @stereo.drift :)