Rotto Diffuso is an experimental typographic generator that turns text into living matter. Inspired by Karl Sims’ incredible work on reaction–diffusion (the Gray–Scott model), this web tool lets you “cultivate” words as if they were biological organisms, generating complex organic textures that evolve in real time.
Originally created for the visual identity of the Bari International Gender Festival 2025, Rotto Diffuso offers full control over chemistry, flows, and lighting—allowing you to explore the boundary between typography and natural chaos, and export your results in high definition.
You can use Rotto Diffuso freely for your personal or commercial projects.
Be sure to tag @studiorotto if you share something.
Smart Guide
1. Main Controls
Pause/Resume: Freezes or resumes the real-time simulation calculation.
Reset: Restores all parameters to factory defaults (including F/K and colors).
Clear: Wipes the entire canvas, removing all traces of reaction. The canvas becomes empty (black or transparent).
Regrow: Re-initializes the text “seed”. Useful if the reaction has died out or if text has changed and a fresh start is needed without resetting parameters.
2. Text Generator
Text Area: Field to input the text used as the reaction mask.
Choose Font: Opens the file system to load a local font.
Size (10 – 2000): Font size in points. High values fill more canvas space.
Line Height: Vertical spacing between lines.
Letter Spacing: Horizontal spacing between letters (supports negative values for overlaps).
Alignment Icons: Aligns text left, center, or right relative to the canvas center.
Text Influence (0.0 – 1.0):
High: The text acts as a constant feed source (remains legible).
Low: The text provides only the initial impulse and then dissolves into the reaction.
3. Colors & Style
Color Map Presets: Quick buttons to apply predefined color gradients.
Custom Gradient: Opens the editor to create custom gradients (add stops by clicking the bar, remove by dragging off).
Emboss (Checkbox): Activates normal map rendering to simulate 3D relief.
Invert (Checkbox): Inverts the value mapping (empty becomes full and vice versa).
Emboss Strength: Intensity of the relief effect (visible only if Emboss is active).
Blur: Applies a post-process Gaussian blur to soften edges.
Hue/Saturation/Brightness/Contrast: Global color correction on the final output.
Color Frequency: How many times the gradient repeats along the reaction density values (creates color rings).
Color Phase: Rotates the gradient colors (“color cycle” effect).
4. Export
Width / Height: Rendering resolution for export (independent of screen view).
Show Export Guide: Displays a dashed box on the canvas indicating the framing area.
Export PNG: Downloads a static image.
Transp. PNG: Downloads a static image with a transparent background (Alpha channel).
Sequence / Transp. Seq.: Starts frame-by-frame recording. Press “Stop & Save ZIP” to download.
5. F/K Presets & Rate (Chemical Parameters)
Preset Buttons: Pre-calibrated Feed and Kill rate configurations generating known stable patterns (e.g., Corals, Worms, Mitosis).
F/K Map (Red Reticle):
Y Axis (Up/Down): Feed Rate. Controls how much “food” is added. High = explosive/full reaction. Low = dying reaction.
X Axis (Right/Left): Kill Rate. Controls how fast reactant dies. Right = fast death (thin shapes). Left = slow death (bloated shapes).
6. Simulation Parameters
Speed: Number of calculation passes per rendered video frame. Increase to accelerate evolution.
Time Step: Time multiplier in the differential equation.
< 1.0: Slow and precise simulation.
> 1.0: Fast simulation but potentially unstable (artifacts).
7. Scale (Geometry)
Scale: Base dimension of the reaction grid.
0.01 – 0.1: Microscopic, sandy details.
1.0 – 5.0: Macroscopic, liquid details.
Radial Scale: Modifies scale based on distance from the center (e.g., denser at center, sparser at edges).
Random Scale: Introduces scale variations based on white noise.
Ring Scale: Introduces scale variations based on concentric rings.
8. Flow (Flow Vectors)
These sliders apply physical forces that move matter while it reacts.
Vertical Flow: Pushes reaction up or down (drip effect).
Radial Flow: Expands (explosion) or contracts (implosion) matter.
Rotation Flow: Rotates the entire simulation around the center.
Swirl Flow: Creates a spiral twist.