TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Show HN: Turning photos into kaleidoscope animations (JS open source project)

2 pointsby getToTheChopin10 months ago

2 comments

getToTheChopin10 months ago
This is an open source project to turn photos into kaleidoscope animations.<p>Live website: <a href="https:&#x2F;&#x2F;collidingscopes.github.io&#x2F;" rel="nofollow">https:&#x2F;&#x2F;collidingscopes.github.io&#x2F;</a><p>Built using javascript, HTML, CSS.<p>Enormous thanks and credits to Luke Hannam, whose blog post explained the code and mechanics for creating kaleidoscope animations in javascript: <a href="https:&#x2F;&#x2F;www.pepperoni.blog&#x2F;canvas-kaleidoscope&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.pepperoni.blog&#x2F;canvas-kaleidoscope&#x2F;</a><p>I made only a few tweaks to Luke&#x27;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.<p>There are a few hotkeys which can speed up using the tool:<p>Press &quot;r&quot; to start recording a video of the animation. You can specify the length of the video in seconds. An mp4 video file will be exported to your downloads folder afterwards<p>Press &quot;p&quot; to pause &#x2F; play the animation. This lets you stop at an interesting point of the animation<p>Press &quot;s&quot; to save a screenshot of the current state of the animation (png image)<p>This project is coded using Javascript, HTML, and CSS. I do not have access to any of the images that you upload here, as all processing is done client-side.
nimzoLarsen10 months ago
Very trippy — nice work. Could see this working in music videos.