Repolode
Submit
enpts

enpts/sho

A browser-based brush calligraphy engine that draws strokes from point lists, simulating bristles, ink, and dry-brush effects.

View on GitHub
Stars
12
Forks
0
Open issues
0
Last commit
2 days ago

What is it?

sho.js is a JavaScript brush calligraphy engine that runs in the browser. You describe each stroke as a list of points, where every point can set position, pressure, brush angle, speed and pause, and the engine renders them on a paper canvas one stroke at a time.

The engine simulates the physical behaviour of a brush: individual bristles, ink running out along a stroke, dry-brush streaks at higher speeds, ink pooling where the brush rests, and bleeding in pale ink. Techniques such as hooks and sweeps come from how the points are placed rather than from separate presets. Output is deterministic, so the same data and settings always produce the same picture.

It is designed to be fed incrementally, so an LLM's output can be drawn line by line as it streams in. The package is a single script plus one paper image with no dependencies, loaded as a global Sho object. A demo page and sample system prompts are included.

Key features

  • 01Strokes are defined as lists of points with pressure, angle, speed and pause.
  • 02Simulates bristles, ink depletion, dry-brush streaks and ink pooling.
  • 03Two bleed styles for pale ink: capillary and ring.
  • 04Deterministic rendering from stroke coordinates, animated or instant.
  • 05Streaming support via StreamParser for LLM output.
  • 06No dependencies; one script and one paper image.

Use cases

  • Animating handwritten calligraphy on a web page or in a demo.
  • Letting an LLM write characters or words with a brush as a visual experiment.
  • Generating deterministic calligraphy images for export as PNG.
  • Studying how brush physics can be approximated in canvas code.

Quick start

  1. 1

    Copy sho.js and paper.webp into the same folder

  2. 2

    Load the script in your HTML page

    <script src="sho.js"></script>
  3. 3

    Create an engine on a canvas and enqueue a stroke

    const engine = new Sho.Engine(document.getElementById('paper'), { pxPerUnit: 1 });

Things to know

  • No npm package or ES module build; it is loaded as a plain script.
  • Tested in Chrome only and needs a browser with canvas and DOM.
  • Early-stage project with few stars (9) and a small community.

Topics

#calligraphy#canvas#javascript#generative-art#brush-simulation#llm-streaming

FAQ

What is sho?
A browser-based brush calligraphy engine that draws strokes from point lists, simulating bristles, ink, and dry-brush effects. sho.js is a JavaScript brush calligraphy engine that runs in the browser. You describe each stroke as a list of points, where every point can set position, pressure, brush angle, speed and pause, and the engine renders them on a paper canvas one stroke at a time.
Is sho free to use? What license does it have?
sho is open source under the MIT license. Check the license terms before using it in commercial products.
Is sho still maintained?
Actively maintained. The last commit to sho was on Nov 5, 2026.
What can I use sho for?
Animating handwritten calligraphy on a web page or in a demo. Letting an LLM write characters or words with a brush as a visual experiment. Generating deterministic calligraphy images for export as PNG. Studying how brush physics can be approximated in canvas code.
How do I install sho?
Copy sho.js and paper.webp into the same folder Load the script in your HTML page: <script src="sho.js"></script> Create an engine on a canvas and enqueue a stroke: const engine = new Sho.Engine(document.getElementById('paper'), { pxPerUnit: 1 });
Where can I get sho?
The source code and installation instructions are on GitHub: https://github.com/enpts/sho

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects