DRIFT TOOL
Version 0.25
Version 0.25
OVERVIEW
LICENSE
SUPPORT
DRIFT is a web tool built on p5.js, offering users to create realtime ever-evolving generative 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.
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
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
The tool is available as a free version – fully functional but with watermarks on exported graphics, so you can thoroughly evaluate its capabilities before committing. Without a valid license key, the tools can only be used for evaluation and testing. To remove watermarks and obtain full usage rights, please purchase a license key at Gumroad:
https://antlii.gumroad.com/l/drift-license-key
By using any tool at https://antlii.work, you agree with the Terms of Use and License Agreement. For full details, including usage rights for Personal, Commercial, and Extended Licenses, examples of permitted applications, please view the complete License Agreement here:
https://antlii.work/license
https://antlii.gumroad.com/l/drift-license-key
By using any tool at https://antlii.work, you agree with the Terms of Use and License Agreement. For full details, including usage rights for Personal, Commercial, and Extended Licenses, examples of permitted applications, please view the complete License Agreement here:
https://antlii.work/license
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.
Please let me know if you're running into any issues or discover a bug while using the program.
0.25 (Jul 03, 2025)
0.24 (Feb 03, 2025)
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:
And a big thanks to Unsplash platform, and specifically the contributors, for the chance to freely use their images in this project.
- Browser Performance: Simulation speed can vary widely depending on your hardware and browser. If you notice significant slowdowns, , try switching browsers (Chrome and Firefox tend to offer the best performance) or disabling hardware acceleration in your settings.
- 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.
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 program is not designed to run on mobile devices.
- Screen size: A minimum resolution of 800x600 is required.
Please let me know if you're running into any issues or discover a bug while using the program.
Change Log:
0.25 (Jul 03, 2025)
- Canvas Rendering: Updated the core algorithm that generates and displays the canvas in the browser;
- Image Loading: Optimization of the system for loading images into the tool;
- External License Verification: Moved license key checks to a dedicated external script for easier maintenance.
- Global Stylesheet: Replaced the local style.css with a unified global stylesheet to streamline styling;
- Global Popup Notifications: Integrated an external popup script to handle alerts, warnings, and errors in a consistent, user-friendly modal;
- Updated Events: Refactored event handling and drag-and-drop workflows with real-time visual feedback on the canvas;
- Preset Logic Update: Refining the preset import algorithm for greater reliability and error resistance;
- Export Logic Overhaul: Unification of the export pipeline for enhanced clarity and easier future updates;
- Switched color system from RGBA to HEX, making it easier to manage color values in the interface;
- Updated Options: Enhanced the tool’s options with new settings;
- Local Storage Changes: Minor changes in saving the tool display settings into local storage;
- Minor Tweaks: Made various small UI refinements and under-the-hood adjustments.
0.24 (Feb 03, 2025)
- Added the ability to export graphics to MP4 instead of WebM video format
- Added drag-n-drop feature to load images and presets by dropping files onto the canvas
- UI Refactoring
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;
- 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.