FLAKE Tool

FLAKE is a parametric tool for creating complex symmetrical patterns and generative textures based on vector custom shapes. Built with p5.js, it uses a grid-based layout and a parameter-driven approach inspired by Signed Distance Function techniques: the distance from each point to the center of a tile is used to control the scale, color, and transformation of shapes across the canvas.

---

Tools Features:

• A library of geometric vector shapes to get started quickly.
• Support for custom vector shapes via drag-and-drop: Just drop your own SVG file onto the canvas. You can experiment with icons, glyphs, or abstract forms. The tool will transform and adapt the shape on loading and instantly implement it into the pattern.
• Use of raster images as masks (PNG, JPEG, WebP): Drop an image onto the canvas, and FLAKE will analyze its brightness and transparency to modulate the scale and distribution of shapes in the pattern.
• Preset system: The tool includes 30 various examples to explore and learn from. You can also export your own presets as a file, saving the combination of parameters and settings, including your custom SVG shapes and raster mask, and load them back at any time to revisit or iterate on previous compositions.
• Dynamic animation of shapes, smoothly changing their size and color based on noise functions, allowing you to create looped motion art.
• Customizable color palettes and blend modes for rich visual diversity.
• A built-in randomization engine with fine-tuned control for fast exploration and unexpected results.
• Flexible grid and symmetry options for building both orderly structures and chaotic textures.

---

FLAKE provides flexible export options, and its main advantage is the ability to export graphics in scalable SVG format, perfect for print and further editing. Animations can be exported as MP4 video files or as sequences of PNG or WebP frames, which can be later compiled into videos using tools like FFmpeg or similar.

Performance and compatibility

Some technical tips regarding the use of the tool:

• SVG Export: Exporting to SVG format has some limitations and issues:

  • Exporting may take some time, especially for complex scenes with a high number of shapes. It’s possible you’ll see a “Page Unresponsive” warning - don’t worry, this is expected. Just give it time to complete the export;
  • Only the standard Normal blend mode is fully supported;
  • The XOR blend mode works partially, but only with solid fill;
  • Other blend modes will automatically fall back to Normal;

  This is due to inconsistent support for blend modes in vector editors and SVG viewers/browsers. If needed, similar effects can be recreated manually.

• 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.

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 Paper.js ↗ project allowing to make magic with SVG format;
• The Simplex Noise ↗ algorithm developed by Jonas Wagner;
• The p5.capture ↗ library by tapioca24 for recording animations;