DRIFT is a free interactive web tool built on p5.js, offering users to create realtime degenerative visuals, based on bitmap graphics, such as images or photos. The tool allows users to upload images from their computer or fetch random photos from the Unsplash service.

Using the mouse or touchpad, users can interactively set and resize the area on the uploaded image. When clicked, the tool creates a shape based on class Form and copies the image from the selected area into it. Next, the algorithm animates the shape by constantly repeating it on the canvas, moving and transforming it based on parameters from the Form and Animation sections.

To change the selection size of an image area, use the touchpad by moving two fingers on the canvas. If you have a mouse, hold down the right mouse button while moving the mouse.

By clicking on the touchpad or left mouse button, the tool creates a copy of the area from the image and starts the animation process based on the parameters from the Form and Animation section.

For ease of use of the tool, all the major actions in the program are tied to hotkeys and I highly recommend using them. Press the H key (available as button in the tool’s settings), to open a window with the list of hotkeys.

I’ve made about a dozen various Presets for animation so that you can try out the program's features and quickly generate various outputs. Moreover, you can save and load your own presets with the Import/Export folder in the Preset section.

Also, you can check out the project on Behance, there's a video tutorials on working with the tool:

The program is available for use and experimentation for free under the Creative Commons license. However, please note that if you decide to generate graphics based on Unsplash's photos through this program, you are also bound by Unsplash's license agreement.

If you intend to use the program for commercial purposes, kindly inform me.

The program is tailored for desktop usage with a minimum screen resolution of 800x600 pixels. The program is optimized for the Chrome browser, but it works quite well in other browsers as well (except Safari).

The code is hosted on Openprocessing.org, which means that the program’s loading speed might occasionally be slow, and there could be times when it’s inaccessible due to maintenance.

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

If you encounter any difficulties while using the program, or if you’ve discovered a bug, please let me know.

This program utilizes a number of third-party tools, and I would like to extend my gratitude to the creators for allowing their use in this project:

  • The p5.js Creative Coding Library, a product of the collective efforts of an incredible team;
  • 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.