DRIFT is a web tool built on p5.js, offering users to create realtime ever-evolving degenerative visuals, based on bitmap graphics, such as images or photos. The program 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 web canvas with 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.


HOW TO USE

To change the selection size of an image area, use the touchpad by moving two fingers. 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.

Additionally, you can check out the project on Behance, where you can find some video tutorials on working with the tool:
https://www.behance.net/gallery/186166865/DRIFT-Motion-Art-Tool