TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

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

2 点作者 getToTheChopin10 个月前

2 条评论

getToTheChopin10 个月前
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 个月前
Very trippy — nice work. Could see this working in music videos.