Glyphloop

Glyphloop

ループが完璧につながるジェネレーティブ ASCII アニメーションを作成するためのブラウザースタジオ兼ヘッドレスツールキットです。フローフィールド、波の干渉、形状が変化するノイズブロブ、マトリックスの雨、回転する 3D 図形、カスタム数式、パラメトリック曲面を作成できます。画像、動画、テキストの上にエフェクトを重ね、その色を引き継ぎ、PNG、GIF、MP4、自己完結型のウェブ埋め込み、ターミナルプレーヤーにエクスポートできます。

パッケージの CLI または MCP サーバーを通じて、AI エージェントからヘッドレスで利用することもできます。エージェントは、数式文字列を使って独自のアニメーションや 3D 図形を定義することもできます。AGENTS.md をご覧ください。

Glyphloop = グリフ + シームレスなループ。

アカウント不要のホスト版スタジオをお試しください。またはライブサンプルをご覧ください。

ローカルスタジオ

npm ci
npm run dev        # opens on http://localhost:5199

Node.js 20 以降が必要です。MP4 エクスポートで WebCodecs を使用するため、Chrome を推奨します。それ以外のワークフローは最新のブラウザーで動作します。

CLI と MCP

このパッケージでは、1 つの glyphloop 実行ファイルから 2 つのコマンドを利用できます。

npx glyphloop@beta render --preset flowfield-hero --out hero
npx glyphloop@beta mcp

ソースをチェックアウトした場合、対応する開発用コマンドは次のとおりです。

npm run render -- --preset flowfield-hero --out hero
npm run mcp

render は、組み込みプリセット名、プリセットの JSON ファイル、またはインライン JSON を受け付けます。コマンドの概要全体は node bin/glyphloop.js --help を実行して確認できます。

使い方

1. エフェクトのソースを選び、パラメーターをリアルタイムで調整します。または、画像や動画をエディターにドラッグ＆ドロップして、色をそのまま保ちながら独自のデザインを ASCII 化します。
2. スタイルを設定します。文字ランプ（または独自の文字を入力）、ガンマ、反転、モノクロ、または 2 色のグラデーションを指定します。
3. グリッドの列数、セルサイズ、アスペクト比、再生時間、FPS を設定します。インポートしたメディアは元のアスペクト比で表示され、ラスター形式でのエクスポートでは元のピクセル寸法に合わせることができます。
4. エクスポート：
   • PNG - 現在のフレームを 1～3 倍のスケールでエクスポートします。
   • GIF / MP4 - アニメーションを 1 回再生する分、フレームごとに決定論的にレンダリングします（フレームは一切欠落しません）。生成された動きはシームレスにループします。
   • ウェブ埋め込み（zip） - frames.json（RLE 圧縮された文字フレーム）+ player.js（prefers-reduced-motion に対応する、依存関係のない小型プレーヤー）+ デモ用の index.html。2 つのファイルを任意のサイトに配置し、<div data-ascii-player></div> を追加します。
   • ターミナル（zip） - frames.ans + play.sh。bash play.sh を実行すると、ターミナルでアニメーションがループ再生されます。

エディターには 6 種類のスタータープリセットが含まれています。プリセットは localStorage に保存することも、ヘッダーバーから JSON としてダウンロード／読み込むこともできます。共有プリセットは /studio/?preset=flowfield-hero で開けます。

インポートしたメディアはブラウザー内にとどまり、Glyphloop がアップロードすることはありません。ベータ版の安定性を確保するため、画像は 25 MiB およびデコード後 4,000 万メガピクセル、動画は 100 MiB および先頭 20 秒まで、プリセットファイルは 10 MiB に制限されています。非常に大規模なレンダリング処理は、スケール、列数、FPS、または再生時間を減らすよう案内して拒否されます。

ホスト版ウェブサイトと Studio は、許可リストに含まれる匿名の製品イベントを少数、ファーストパーティの Cloudflare エンドポイントに送信します。クリエイティブの入力や出力は一切含まれません。ソースをチェックアウトした環境、CLI、MCP サーバーからは分析データを送信しません。ホスト版のプライバシーに関するお知らせをご覧ください。

ソースカラーと画像パレット

インポートしたメディアに色を付ける方法は 2 種類あり、それぞれ異なります。

• カラー モード：source は、各グリッドセルで画像または動画をサンプリングするため、各グリフはその下にある色を保ちます。マルチカラーのアートワークの色を保ち、動画の色の変化にもフレームごとに追従します。
• 画像からインクと背景色を設定すると、小規模な代表パレットが抽出され、「インク」「インク 2」「背景色」の各コントロールに設定されます。モノクロまたはグラデーションを選ぶと、ソースのすべての色をそのまま残す代わりに、選んだ色を使ってレンダリングします。

つまり、ソースモードは画像のカラーマップを保ち、パレット機能は画像を参考にして、Glyphloop の色を調整します。Studio の画像パレットを元に戻す操作では、パレット抽出前に設定されていたインクと背景色が正確に復元されます。

生成されたループがシームレスな理由

Glyphloop に組み込まれたソースと周期表現は、フレームごとの状態を持たない時間の純粋関数です。すべてのノイズは、追加の 2 つのノイズ次元上の円に沿ってサンプリングされ（src/core/noise.ts:loopCoords）、すべての正弦波の位相はループごとに 2π の整数倍だけ進むため、フレーム N はフレーム 0 に正確に戻ります。エクスポートでは、t=0 から round(fps × duration) フレームをレンダリングし、t=duration はレンダリングしません（フレーム 0 がループの折り返し地点です）。

インポートした動画は、自動的に完全なループになるわけではありません。Glyphloop はクリップの 1 周分をアニメーションの長さ全体にわたってサンプリングし、その後、最初から再生を繰り返します。Claude のクラゲの例のように、元の動画がすでにループするように設計されている場合、またはインポートしたベースが静止画像の場合にのみ、合成結果はシームレスになります。

開発

npm test           # vitest unit tests (noise periodicity, mapper, RLE, ZIP, ANSI, sources)
npm run build      # typecheck + production build
npm run build:site # typecheck + production website and Studio build

アーキテクチャ：Source → FieldFrame (brightness grid) → AsciiMapper → CanvasRenderer → exporters。

ライセンス、出力、ブランド

エディター、レンダラー、CLI、MCP サーバー、エクスポーター、プリセット、生成される埋め込みプレーヤーを含む Glyphloop のソフトウェアは、MIT ライセンスの下で利用できます。

Glyphloop は、インポートしたコンテンツやエクスポートしたアニメーションの所有権を主張しません。ソース素材に適用される権利に従う限り、エクスポートしたアニメーションを商用利用できます。出典表記は不要です。

Glyphloop の名称とビジュアルアイデンティティは、MIT ライセンスの対象ではありません。デモおよびマーケティング用メディアには、別途ラベルが付けられています。TRADEMARKS.md と LICENSES/ASSETS.md をご覧ください。

ベータ期間中、イシューや具体的なフィードバックを歓迎します。CONTRIBUTING.md と SECURITY.md をご覧ください。