REFRACT Tool

REFRACT is a simple web generative tool built on p5.js that allows users to process images by applying various displacement filters and simple refraction effects based on shaders. With the program, you can import images from your device or pull an example photo from the Unsplash service, then apply and adjust the parameters of a distortion filter to create high-quality video clips or static compositions.

In addition, the program has a number of ready-made presets for quick application of various effects, plus you can export and save your own presets as JSON files for easy reuse.

Performance and compatibility

The tool accepts raster images in JPG/PNG/WebP formats as source material, and it also support transparency. You can upload images of any size, as the program will scale it down, the threshold value for the resize can be set in the program settings.

• Image Size: Image size directly affects performance and depending on the type of video card you have and the browser you are using, you may receive a warning that the image size is too large: Warning: The requested width/height exceeds hardware limits. Adjusting dimensions to [width], [height]. For this reason, in the program settings you can find the image size limitation parameter, which will reduce the image to the defined threshold value upon uploading the image.

• Browser Performance: Rendering speed can vary widely depending on your hardware and browser. If you notice significant slowdowns, try switching to a different browser - Chrome and Firefox tend to offer the best performance.

• Video Export: During export to video, the process may stop due to insufficient memory, especially with high resolution or long videos. If this happens, try reducing the resolution or length of the video. For large or high-resolution videos, consider exporting as a PNG sequence and later converting it to a video using the FFmpeg library.

• MP4 Lag: When exporting to MP4 format, a library-related lag can lead to performance drops, causing the program to slow down noticeably after capturing and exporting the animation. Refreshing the page resolves this issue.

• Mobile Support: The tool isn’t optimized for mobile devices. You’ll need at least an 800×600 display to run it reliably.

Please let me know if you're running into any issues or discover a bug while using the program.

Credits

I would like to acknowledge the use of several third-party libraries within this project and express my sincere gratitude to their creators for making these resources available:

• The p5.js ↗ Creative Coding Library, a product of the collective efforts of an incredible team;

• Shader examples ↗ for WebGL by Adam Ferriss

• Jonas Wagner’s Simplex Noise ↗ algorithm;

• The Tweakpane ↗ interface library, ingeniously developed by Hiroki Kokubun;

• The P5.capture ↗ library made by Tapioca24

And a big thanks to Unsplash ↗ platform, and specifically the contributors, for the chance to freely use their images in this project.