DRIFT Tool
Web-based program for creating generative motion art
DRIFT is an 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.
Link to the program:
Get a license:
Quick Start
Upon loading, the program fetch a random image from Unsplash website, choose one of the animation presets from the list and apply about ten random forms to the image and run an animation sequence. Now, the tool is all set for use!
You can upload a bitmap image from your computer, using the 'Upload Image' button. Once you replace the image, the program will reset the progress and remove all the current forms with animation from the canvas.
Try to select some of the presets and add new shapes by clicking on the canvas with your mouse or touchpad. Please note that presets are loaded into the program as a JSON file, and it may take a while, so I made a status bar to see when the loading process is successful.
Quick start with the DRIFT Generator tool
Basic Controls
You can change the dimensions of the form area using the mouse or the touchpad. As you move the cursor over the canvas, scroll on the touchpad with two fingers, or, if you have a mouse, hold down the right button while moving the mouse.
Additionally, there are sliders available, to set the form dimension, but they are rather complementary to the main mode of operation. In the current version, the program does not support gesture control from a cell phone or tablet.
Basic controls of the DRIFT generator tool
Hotkeys
The following image shows the list of hotkeys available in the tool as well as the gestures for controlling the form dimension. You can also display this tooltip image in the program by pressing the H hotkey.
I highly recommend using hotkeys, it makes the workflow with the tool much more comfortable and faster.
Hotkey list of the DRIFT Generator tool
Forms Animation
The algorithm controls the motion of forms in real time, based on parameters from the Animation section. In this version there are 8 modes for interactions - movement the forms on the canvas by X/Y coordinates, shifting the image inside the form along X/Y coordinates, rotating the form by degrees, scaling the shapes by multiplier, and also transparency and tinting modes for the forms.
Upon selecting one of the modes, such as X-axis motion, some of its parameters will be available to choose from, such as the type of motion, the parameter's peak level, and the frequency that affects the rate of motion.
Besides, each mode has a Parameters Randomization settings where you can set the option of receiving random values for each parameter - for example, each time you create a new form.
The following video shows some of the various interaction scenarios when modifying the parameters for the modes that control form movement along the X and Y axes.
Dealing with animation parameters in the DRIFT Generator tool
User Presets
The program provides a system for creating custom presets so that you can save the program settings and return to them at any time. In the following video I illustrate how you can create your own preset, by modifying one of the built-in presets in the program.
When exporting, the tool stores almost all program settings and saves them in a JSON file to the user's hard disk.
Upon importing a preset, the preset settings from the file are written to the preset list under the *User Preset* nickname and can be returned at any time. Please note that these settings are overwritten each time a new preset is imported into the program.
Upon importing a preset, the preset settings from the file are written to the preset list under the *User Preset* nickname and can be returned at any time. Please note that these settings are overwritten each time a new preset is imported into the program.
Import and export user presets in the DRIFT generator tool
Export to Video
At any time you have the option to capture an animation at 60 FPS and save it as a video in WebM format or as a sequence of frames using one of the JPG/PNG/WebP formats.
Additional options available include setting the duration of the animation and the level of image quality. In the following video I demonstrate the process of exporting an animation to video format.
Export to video format in the DRIFT generator tool
Tool in Action
Behance provides a feature that allows to embed scripts directly into a project. This means you can try the tool right here, although it may take some time to load.
Alternatively, you can visit my website and use the tool from there:
For your convenience, I recommend switching to full-screen mode using a special button in the "Settings" section.
I should note, that 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).
DRIFT Generator Tool / Live Sketch
Moreover, besides generating motion art, the tool is excellent for producing static abstract art and degenerative graphics.
At any moment you can pause the animation process with the P hotkey. To download and save the current rendering in PNG format you can click the button in the interface or use the D hotkey.
To illustrate, I have compiled a series of posters using the tool. As a base material, I have selected some posters from Typographicposters' collection of the 100 best posters for 2022.
License
The tool is available for anyone to try at the following link:
https://antlii.work/drift-tool
https://antlii.work/drift-tool
The free version is fully functional but adds watermarks to exported graphics. This allows you to thoroughly evaluate its capabilities and test everything out before deciding if it's the right fit for you.
To remove watermarks/restrictions and obtain usage rights for the tool, please get a
license key at Gumroad.
