Show HN: turning photos into oscillating wave animations (JS FOSS project) (collidingscopes.github.io)

6 comments

[ 0.19 ms ] story [ 28.2 ms ] thread

Turn photos into oscillating wave animations -- just upload a picture, then drag the sliders to adjust the waves that are used to manipulate the image

You can control the sine wave frequency and amplitude in both X/Y directions. You can create a video export to save and/or share your animation afterwards.

This project was inspired by analog oscilloscope art. I've long been a fan of wavy liquid patterns, and wanted to try my hand at coding a digital version.

Project is open-sourced on github: https://github.com/collidingScopes/shimmer

I've also uploaded several animation outputs on my instagram account: @stereo.drift

nimzoLarsen 1y ago ↗

This is awesome. Getting some cool sci-fi styles with high frequency / low amp.

The opposite (low freq / high amp) gets pretty trippy.

Would be sweet for a projection at a rave.

getToTheChopin 1y ago ↗

Thank you! I've been playing around with using a noisy gradient image as the input. Something like this: https://stock.adobe.com/my/search/images?k=noise+gradient

It makes for some interesting liquid textures.

earthWindFi 1y ago ↗

This is fun. Nice project and well done!

getToTheChopin 1y ago ↗

Thank you -- much appreciated. Sine waves are such a simple/nice effect for movement.

louloulouhoo 1y ago ↗

This is such a sweet tool! I love the way it looks with simple images / simple backgrounds. The waves are subtle in those areas which creates a cool sense of depth for the more "complex" aspects of the image. Well done!