enpts/sho

これは何？

主な機能

• 01筆圧、角度、速度、一時停止を指定した点のリストでストロークを定義できます。
• 02筆の毛先、墨の減り、かすれ、墨だまりをシミュレートします。
• 03薄墨のにじみ方として、毛細管状と輪状の2種類を用意しています。
• 04ストロークの座標から決定的に描画でき、アニメーション表示と即時描画に対応します。
• 05StreamParserを使ってLLMの出力をストリーミングできます。
• 06依存関係はなく、スクリプト1本と紙の画像1枚で構成されています。

ユースケース

• Webページやデモ上で、毛筆の書き文字をアニメーション表示する。
• LLMに筆で文字や単語を書かせる視覚的な実験を行う。
• PNGとして書き出せる、決定的な毛筆画像を生成する。
• Canvasコードで筆の物理的な動きをどう近似できるかを調べる。

クイックスタート

1. 1

   sho.js と paper.webp を同じフォルダーにコピーします

2. 2

   HTML ページでスクリプトを読み込みます

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

   canvas 上にエンジンを作成し、ストロークをキューに追加します

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

使う前に知っておきたいこと

• !npm パッケージ版や ES module ビルドはなく、通常のスクリプトとして読み込みます。
• !Chrome でのみテスト済みで、canvas と DOM に対応したブラウザーが必要です。
• !開発初期のプロジェクトで、スター数（9）もコミュニティもまだ少数です。

トピック

よくある質問

sho とは？

点のリストから筆の動きを描き、毛先や墨、かすれの効果を再現するブラウザベースの毛筆エンジンです。 sho.jsは、ブラウザ上で動作するJavaScript製の毛筆エンジンです。筆の動きを点のリストで指定し、各点には位置、筆圧、筆の角度、速度、一時停止を設定できます。エンジンは紙のキャンバス上に、ストロークを1本ずつ描画します。

sho は無料で使えますか？ライセンスは？

sho は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

sho は今もメンテナンスされていますか？

活発にメンテナンス中。sho の最終コミットは 2026年11月5日 です。

sho は何に使えますか？

Webページやデモ上で、毛筆の書き文字をアニメーション表示する。 LLMに筆で文字や単語を書かせる視覚的な実験を行う。 PNGとして書き出せる、決定的な毛筆画像を生成する。 Canvasコードで筆の物理的な動きをどう近似できるかを調べる。

sho のインストール方法は？

sho.js と paper.webp を同じフォルダーにコピーします HTML ページでスクリプトを読み込みます: <script src="sho.js"></script> canvas 上にエンジンを作成し、ストロークをキューに追加します: const engine = new Sho.Engine(document.getElementById('paper'), { pxPerUnit: 1 });

sho はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/enpts/sho