BLUUR TOOL
Version 0.24
Version 0.24
OVERVIEW
LICENSE
SUPPORT
BLUUR is a versatile web tool designed to generate abstract graphics and animations. It allows you to work with both built-in geometric shapes and custom SVGs, offering adjustable blur effects, GLSL-powered grainy noise textures, multiple blending modes, and the option to use either custom color palettes or procedurally generated gradients.
The main concept of the tool’s visualization is to create the illusion of shapes merging into one another through varying levels of blur. This dynamic blending is further enriched by each shape's color shifting throughout the animation cycle, based on a procedurally generated color palette.
The main concept of the tool’s visualization is to create the illusion of shapes merging into one another through varying levels of blur. This dynamic blending is further enriched by each shape's color shifting throughout the animation cycle, based on a procedurally generated color palette.
The program allows you to export high-quality graphics, either as screenshots in PNG format, animations in WebM format, or as a sequence of PNG/WebP images for further video generation using FFmpeg or a similar library. It also includes a set of pre-made presets for quick use and the creation of custom visuals based on these presets. Additionally, you have the option to export your own presets in JSON format to save preferred visuals for future reuse.
SOME USE NOTES:
The instrument comes out quite experimental (as always 😅) and relies on the use of random and noise functions, so I will briefly describe the features of interaction related to these parameters. The main control over the instrument is concentrated around the FORM and PALETTE sections.
FORM SECTION:
The Form Type selector offers two options for generating content: you can either use the built-in basic rectangular shape or opt for custom SVG shapes, which can be easily loaded into the tool by dragging the SVG files onto the canvas.
Before loading SVG graphics into the tool, be sure to convert all elements to paths, otherwise the program will not handle and load them. I created a simple guide in Figma on converting shapes to SVG files, using some basic vectors as examples. Feel free to use it!
Futhermore, you can upload more than one SVG file, in which case the tool will offer the option to sort the elements upon arranging them on the canvas. The options are Descending and Ascending for sorting based on SVG file selection you made in Explorer/Finder and Random for randomized output, based on noise seed. Also, while exporting a custom preset, SVG shapes will be saved inside the preset, so that you can achieve the same graphics output upon loading your custom preset.
The six tabs below offer controls to manage shapes on the canvas, allowing you to adjust the number of objects, their size, the offset between shapes, angle, blur level, and color blending.
Beside of manual controls, each tab allows you to randomly change parameter values using the Random Settings button. The Random Seed parameter acts as the primary vector for generating random values, with the variation intensity determined by the Random Level or the min-max Range values in the BLUR and COL tabs.
The Noise Seed parameter located right above the tabs is crucial, as it affects the random values for all other noise seeds. It can be used to generate different graphic outcomes based on the current parameter values of all tabs.
PALETTE SECTION:
In this section, you can choose between three modes to choose from - Predefined, Custom, and Procedural-Based palettes. With Predefined you can select one of the 150 ready palettes, and besides use it as a template for a Custom palette by clicking Populate Colors button, where you are provided with options to set up custom colors and shuffle them as well.
The Procedural-Based type is a procedure-oriented approach to color gradient generation based on a formula that was proposed by Inigo Quilez in his Palette article. I won't go into the details, as the main concept explained in the original article, but for those who want to see a visual representation of the gradient, I recommend using this Cosine Gradient tool, where you can tweak the parameters for RGB channels, which are similarly provided in the BLUUR Tool.
Regardless of the palette type or the settings in the PALETTE section, the range of colors applied to shapes is determined by the Blend Range parameter in the COL tab. You can use the minimum and maximum sliders for Blend Range to define the scope of color blends generated from the palette. Setting the Blend Range to its smallest value will produce a single tone, while increasing the range will introduce more shades, expanding the color gamut used in the final image.
Finally, it's important to note that in the PALETTE folder, you can choose the type of color mixing by selecting a Blend Mode. The outcome of the color mixing, and ultimately the final result, can vary significantly depending on the mode you choose, so I highly recommend experimenting with different options to see what works best.
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/bluur-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/bluur-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 uses a blur effect which is extremely expensive and demanding on computer resources. This is especially noticeable if you’re putting a lot of shapes on the canvas at high levels of blur, please keep this in mind when you are choosing the shapes quantity with the Form Amount controller.
Also some notes for using the tool with optimal performance:
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 and materials within this project and express my sincere gratitude to their creators for making these resources available:
Also some notes for using the tool with optimal performance:
- Performance: The program relies heavily on your graphics card rather than the processor, so a better graphics card will result in a smoother experience. If you encounter significant lag during export, consider reducing the canvas size or exporting as a WebP format sequence, which you can later convert to video using FFmpeg or a similar tool.
- Browser: Among the browsers I would recommend to use only Chrome - it's the fastest to handle the blur animation. But maybe this is the case with my configuration, so I recommend trying other browsers to experiment if you are experiencing any slowdowns when rendering.
- 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.
- 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.
CREDITS:
I would like to acknowledge the use of several third-party libraries and materials 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;
- The Tweakpane interface library, ingeniously developed by Hiroki Kokubun;
- The color.js library to manipulate colors and gradients with ease;
- An article on creating algorithmic color combinations from the brilliant Inigo Quilez;
- The super quick Simplex Noise algorithm developed by Jonas Wagner;
- The p5.capture library by tapioca24 for recording animations;