RASTR Tool

RASTR is a powerful web-based tool that transforms written text into geometric and kinetic compositions through a custom rasterization algorithm. The canvas with the text is divided into virtual cells whose size defines the raster quality. For each cell containing part of the text, the program renders a geometric shape that can be styled and animated through a control panel.

The tool is built with p5.js and supports both custom and Google Fonts, allowing for flexible typographic experimentation. Outputs can be exported as SVG for vector work, PNG for still images, or MP4 / WebP sequences for animation. RASTR also allows saving and loading presets in JSON, making it easy for users to save their text and graphical settings so that they can easily access them when needed.

---

Basics of use:

For a quick start, I suggest exploring the PRESETS section. This will give you an idea of the tools' features, as well as allow you to make something of your own using off-the-shelf solutions.

When entering the text in the Prompt Text field, it automatically wraps within the canvas. But if you want to move the text to a new line manually, use the /n combination inside the string.

The Rasterization Quality sliders, located directly below the Prompt Text, controls the number of particles during text rasterization. The higher its value, the more particles will reproduce the text shape and the more detailed the result will be. But it directly affects performance, especially if the real-time rendering is in effect.

The program includes built-in performance optimization. Depending on the selected format type in the EXPORT section, it will either display a static image or render the animation in real-time.

• For static exports (such as PNG or SVG), the canvas stays static and is only updated when any of the interface parameters change. This reduces unnecessary processing and lowers power usage. You can also use the Select Frame option in the EXPORT section to choose which frame to export.
• For animated exports (MP4 or WEBP/PNG sequences), the program automatically switches to real-time rendering, allowing you to preview the animation live on screen.

Performance and compatibility

Some technical tips regarding the use of the tool:

• Browser: The tool should works smooth in Chrome and Firefox browsers, but Safari is not supported.

• Fonts: The program supports fonts in OTF, TTF, WOFF formats. Fonts may take some time to load from Google Fonts, and certain fonts may not display correctly. Also, in some cases, font features such as kerning or ligatures may not be properly handled.

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

• SVG Export: When using Text String as the Shape Type, not all characters may convert correctly into vector paths. This especially applies to certain special characters or emojis — they may not be supported and will appear as empty blocks in the exported vector file.

• 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 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 awesome Opentype ↗ library that allow to access letterforms;

• The Tweakpane ↗ interface library, ingeniously developed by Hiroki Kokubun;

• The super quick Simplex Noise ↗ algorithm developed by Jonas Wagner;

• The p5.capture ↗ library for recording animations by tapioca24;

• The spectral.js ↗ library for realistic color mixing by Ronald van Wijnen;