Minimal sketch — auto-render mode

import algorithmic.typography.*;

AlgorithmicTypography at;

void setup() {
  size(800, 800);
  at = new AlgorithmicTypography(this);
  at.loadConfiguration("config.json");
  at.initialize();
}

void draw() {
  // auto-renders — nothing to add
}

Programmatic config (no JSON file)

Configuration cfg = new Configuration.Builder()
  .initialTiles(12, 12)
  .changedTiles(6, 6)
  .changeTime(5000)
  .character("@")
  .build();

at.setConfiguration(cfg);
at.initialize();

Restart & keyboard

void keyPressed() {
  if (key == 'r') at.restart();
  if (key == 's') at.toggleFrameSaving();
}

{
  "canvas": { "width": 1080, "height": 1080 },
  "animation": {
    "duration": 18,
    "fps": 30,
    "changeTime": 6000,
    "secondChangeTime": 12000,
    "fadeDuration": 2000,
    "character": "A", // or a word: "TYPE"
    "textScale": 0.8,
    "waveSpeed": 1.0,
    "waveAngle": 45,
    "waveType": "SINE",
    "waveMultiplierMin": 0.0,
    "waveMultiplierMax": 2.0,
    "saveFrames": false
  },
  "grid": {
    "initialTilesX": 16,
    "initialTilesY": 16,
    "changedTilesX": 8,
    "changedTilesY": 8,
    "finalTilesX": 4,
    "finalTilesY": 4
  },
  "colors": {
    "hueMin": 0,
    "hueMax": 0,
    "saturationMin": 0,
    "saturationMax": 0,
    "brightnessMin": 50,
    "brightnessMax": 255,
    "waveAmplitudeMin": -200,
    "waveAmplitudeMax": 200,
    "backgroundR": 0,
    "backgroundG": 0,
    "backgroundB": 0
  },
  "cellBorder": {
    "sides": 0,
    "r": 255,
    "g": 255,
    "b": 255,
    "weight": 1.0,
    "colorMode": 0
  },
  "cellMotion": {
    "style": "perlin",
    "radius": 12,
    "speed": 1.0
  },
  "glyphOutline": {
    "style": "none",
    "r": 255, "g": 255, "b": 255,
    "weight": 1.5,
    "dashLength": 8.0,
    "gapLength": 4.0
  }
}

Wave presets

at.setWaveType(WavePresets.Type.SINE);
// SINE · TANGENT · SQUARE · TRIANGLE · SAWTOOTH
at.setWaveType("SQUARE"); // string overload
// or via config.json: "waveType": "TANGENT"

Custom wave function (lambda)

at.setWaveFunction(
  (x, y, time, angle) -> {
    return (float)Math.sin(
      x * 0.1 + time
    );
  }
);

Design system presets

at.useDesignSystem(
  DesignSystem.SystemType.SWISS
);
// SWISS · BAUHAUS · JAPANESE
// BRUTALIST · MINIMAL

Vibe coding — natural language

at.setVibe("calm ocean waves");
at.setVibe("chaos energy");
at.setVibe("geometric minimal");

Glyph motion (v0.2.1 – v0.2.4)

// Perlin noise wander
cfg.setCellMotion(new PerlinMotion(12, 1.0f));
// Circular orbital (CW / CCW)
cfg.setCellMotion(new CircularMotion(12, 1.0f, true));
// Lissajous figure-8 (1:2) or knot (3:2)
cfg.setCellMotion(new LissajousMotion(10, 1.0f));
// Spring-damped glyphs
cfg.setCellMotion(new SpringMotion(0.35f, 0.12f));
// Gravity + bounce  (kick() for impulse)
cfg.setCellMotion(new GravityMotion(0.4f, 0.7f));
// Mouse repel/attract field
cfg.setCellMotion(new MagneticMotion(this));
// ── v0.2.3 ──────────────────────────────────
// Ripple: click-triggered concentric rings
RippleMotion r = new RippleMotion(14, 1.0f);
r.setTileGrid(width, height, tilesX, tilesY);
r.trigger(mouseX, mouseY); // in mousePressed()
// FlowField: Perlin vector field
cfg.setCellMotion(new FlowFieldMotion(12, 1.0f));
// Orbital: constellation orbit patterns
cfg.setCellMotion(new OrbitalMotion(10, 1.0f));
// Disable
cfg.setCellMotion(null);
// ── JSON alternative (v0.2.4) ────────────────
// Any style above can be set in config.json:
// "cellMotion": { "style": "gravity",
//   "radius": 14, "speed": 1.0,
//   "gravity": 0.5, "restitution": 0.8 }

Three-stage grid progression

fadeDuration Cross-fade duration between stages (default 2000 ms)

secondChangeTime Set to 0 to disable the third stage

Reading grid state at runtime

Configuration cfg = at.getConfiguration();

cfg.getInitialTilesX();   // stage 1 cols
cfg.getInitialTilesY();   // stage 1 rows
cfg.getChangedTilesX();   // stage 2 cols
cfg.getChangedTilesY();   // stage 2 rows
cfg.getFinalTilesX();     // stage 3 cols
cfg.getFinalTilesY();     // stage 3 rows

cfg.getChangeTime();      // ms → stage 2
cfg.getSecondChangeTime();// ms → stage 3
cfg.getFadeDuration();    // crossfade ms

Determining current stage manually

int elapsed = millis() - startTime;
int cols, rows;

if (elapsed > cfg.getSecondChangeTime()) {
  cols = cfg.getFinalTilesX();
  rows = cfg.getFinalTilesY();
} else if (elapsed > cfg.getChangeTime()) {
  cols = cfg.getChangedTilesX();
  rows = cfg.getChangedTilesY();
} else {
  cols = cfg.getInitialTilesX();
  rows = cfg.getInitialTilesY();
}

Auto Default — library clears & draws each frame

at.initialize();
// draw() is empty — auto-render handles it

Manual You control what goes on the canvas

at.setAutoRender(false);
at.initialize();

void draw() {
  background(0);
  // … your drawing code …
  at.renderAt(0, 0, width, height);
}

Multi Several instances side by side

AlgorithmicTypography a, b;
void setup() {
  size(1600, 800);
  a = new AlgorithmicTypography(this);
  b = new AlgorithmicTypography(this);
  a.setAutoRender(false); b.setAutoRender(false);
  a.loadConfiguration("a.json"); b.loadConfiguration("b.json");
  a.initialize(); b.initialize();
}
void draw() {
  a.renderAt(0,0,width/2,height);
  b.renderAt(width/2,0,width/2,height);
}

Save frames as PNG sequence

// Enable in config.json
"saveFrames": true

// Or toggle at runtime
at.toggleFrameSaving();
at.setFrameSaving(true);

// Check output directory
println(at.getFramesDirectory());

HSB Colours render correctly in PDF & SVG — the library switches colorMode(HSB) before every draw call and restores RGB after. Hue-driven palettes look identical on screen and in export.

Save vector SVG

import processing.svg.*;

void keyPressed() {
  if (key == 's') {
    beginRecord(SVG, "output.svg");
    at.render();
    endRecord();
    println("SVG saved!");
  }
}

Common keyboard shortcuts

Render typography on top of a photograph — place the image in the sketch's data/ folder.

AlgorithmicTypography at;
PImage bg;

void setup() {
  size(800, 800);
  bg = loadImage("background.png");
  bg.resize(width, height);

  at = new AlgorithmicTypography(this);
  at.loadConfiguration("config.json");
  at.setAutoRender(false);
  at.initialize();
}

void draw() {
  image(bg, 0, 0);          // draw photo first
  at.renderAt(0, 0, width, height); // overlay grid
}

Different photo behind each grid cell. Place photo-01.png … photo-16.png in data/

// setup(): load photos into PImage[] photos
for (int i = 1; i <= 16; i++) {
  PImage img = loadImage("photo-"+nf(i,2)+".png");
  if (img != null && img.width > 0)
    photos[photoCount++] = img;
}

// draw(): tile photos, then overlay glyphs
float cw = (float)width/cols, ch = (float)height/rows;
for (int gx=0; gx<cols; gx++)
 for (int gy=0; gy<rows; gy++) {
   int idx = (gy*cols+gx) % photoCount;
   image(photos[idx], gx*cw, gy*ch, cw, ch);
 }
at.renderAt(0, 0, width, height);

See MultiPhoto example for centre-crop & 3-stage tracking.

Designer-oriented glyph geometry access

import algorithmic.typography.render.GlyphExtractor;
import java.util.List;

GlyphExtractor g = new GlyphExtractor(this, "Helvetica", 72);
g.setFlatness(0.3); // curve resolution

// Fluent GlyphBuilder (v0.2.3)
GlyphExtractor.of('A', 400)
  .fillPoints(500)
  .hatch(45, 8)
  .colourByPosition()
  .hueRange(180, 270)
  .draw(this, x, y);

v0.2.3 rows highlighted in accent colour.
See Page 6 for v0.2.5 additions: boolean ops, path utilities & Type DNA.
Bottom two rows: v0.2.5 word-support String overloads — pass a word wherever a char was accepted.

CellMotion Types

AWT Area boolean algebra on native font outlines. Both PShape (draw with shape()) and PVector[] (physics / custom render) return variants.

import algorithmic.typography.render.*;

GlyphExtractor g = new GlyphExtractor(this, "Helvetica", 72);

// PShape overloads — ready to draw with shape()
PShape u = g.union('O', 'C', 400);
PShape i = g.intersect('B', 'E', 400);
PShape s = g.subtract('A', 'V', 400);
shape(u, x, y);

// PVector[] overloads — for physics / custom draw
PVector[] uc = g.getUnionContour('O', 'C', 400);
PVector[] ic = g.getIntersectContour('B', 'E', 400);
PVector[] sc = g.getSubtractContour('A', 'V', 400);

// Arc-length-resampled dashed outline
float[][] dash = g.getDashedOutline('O', 400, 10, 5);
for (float[] seg : dash)
  line(seg[0], seg[1], seg[2], seg[3]);

Config-driven: add "glyphOutline": {"style":"dashedOnly", …} to config.json — AT renders outlines automatically. Four styles: OUTLINE_NONE, OUTLINE_SOLID, OUTLINE_DASHED, OUTLINE_DASHED_ONLY (fill suppressed). See GlyphOutline: O cycles all 4; ←/→=char; S=save.

// Unit tangent direction at arc-length t ∈ [0,1]
PVector tan = g.getTangent('A', 400, 0.25f);
float angle   = atan2(tan.y, tan.x);

// Orient 48 ornaments along an outline
PVector[] path = g.getOuterContour('O', 600);
for (int k = 0; k < 48; k++) {
  float t   = (float) k / 48;
  PVector pos = /* samplePath(path, t) */;
  PVector dir = g.getTangent('O', 600, t);
  pushMatrix(); translate(pos.x, pos.y);
  rotate(atan2(dir.y, dir.x));
  text("›", 0, 0); popMatrix();
}

// Extra tessellation density for deformation
PVector[] dense = g.subdivide('O', 400, 6);

// Lay a string along any contour
PVector[] outer = g.getOuterContour('O', 600);
g.textOnPath("Around the letterform", outer, 24);

See TextOnPath: mode 1 text on outer contour; mode 2 tangent-oriented ornaments; SPACE cycles chars, T cycles text, S saves.

Font outlines drive the animation. Switch typefaces and the animation changes character automatically.

import algorithmic.typography.render.*;

GlyphExtractor g =
  new GlyphExtractor(this, "Garamond", 600);

// Individual metrics
float   axis   = g.getStressAxis('A', 600);  // °
PVector centre = g.getOpticalCentroid('A', 600);
float   ratio  = g.getCounterRatio('O', 600);  // 0–1
float   weight = g.getStrokeWeight('A', 600); // px

// Aggregate into a reusable profile
TypeDNAProfile dna =
  g.buildTypeDNAProfile('A', 600);

// One-call preset — returns this for chaining
at.applyTypeDNA(dna).initialize();

// JSON round-trip — save & share presets
saveJSONObject(dna.toJSON(), "garamond.json");
TypeDNAProfile p =
  TypeDNAProfile.fromJSON(
    loadJSONObject("garamond.json"));
at.applyTypeDNA(p).initialize();

applyTypeDNA maps the profile: