本文へスキップ

アスキーアニメ工房

ASCII Animation Workbench

動画・GIF・コマ単位の編集・動く文字・自動生成エフェクトから文字グリッドのアニメを作り、テキストフレーム・ANSI・asciicast v2・アニメGIF・単一ファイルのHTMLプレーヤーで書き出します。

これは変換器ではなく作業台です。文書はフレームごとに間隔の付いた文字格子の並びで、埋め方が四つあります。動画やGIFを入れる、前のフレームを透かしながら自分で描く、バナーを動かす、自動生成の効果を使う。書き出し方も四つあり、本物の動くGIFと、ネットワークをまったく使わずに再生する単一のHTMLファイルがそこに入ります。

🔒 ブラウザの中だけで動きますasciiartanimationvideoterminal
フレームをどこから取るか

Andy Sloane の donut.c(2006)。z バッファーを持つトーラスに、表面の法線と固定した光源との内積で陰影をつけます。

同じ種からは必ず同じフレームが出るので、結果をそのまま再現して書き出し直せます。

1枚中 1枚目のフレーム

1枚、0.1秒、メモリは約 7.5 KB

書き出し
























MP4 や WebM にしたいときは、GIF を保存してGIF を動画にに渡してください。あちらはすでに WebCodecs でエンコードし、H.264 を MP4 に、VP9 を WebM に多重化します。ここにもうひとつエンコーダを書けば、その劣化した写しになるだけです。APNG の書き出しはありません。PNG 書き出しの上に acTL・fcTL・fdAT のチャンクが要り、作っていないからです。
フレーム数は 600枚、格子は合わせて 240万マスを上限にしています。色を載せると約 230 MB が同時にメモリへ乗る計算です。この大きさなら 600枚まで入ります。超えるとスマートフォンのタブはメッセージひとつ出さずに落とされます。断られるほうがましです。
asciicast v2 は JSON 行形式です。最初にヘッダーのオブジェクトが 1 行、そのあとはフレームごとに [時刻, "o", データ] の配列が 1 行ずつ続きます。時刻はフレーム間隔ではなく先頭からの絶対秒で、フレームごとにカーソルを先頭へ戻して下を消すので短いフレームが長いフレームの尾を残さず、行末は CRLF です。端末の生出力で改行だけを使うと、あの階段状の崩れが出ます。公開されている仕様を読んでここで実装しました。
メモリはすべてフレーム数 × 格子の大きさに出ていきます。だから両方に上限を置き、その値を見つけさせるのではなく画面に書いています。変換はワーカーで動き、中止がきちんとループまで届くので、300 フレームの仕事がタブを固めることも、止めたあとで回り続けることもありません。

使い方

  1. ファイルの大きさではなくフレームの余裕を見てください

    ここでの費用はすべてフレーム数×格子の升目数で、いま選んでいる幅で何フレーム入るかが画面に出ています。出力の幅を80字から160字に広げると、持てるフレーム数は4分の1になります。上限があるのは、無ければスマートフォンのタブが何のメッセージもなく落とされるからです。

  2. 書き出す前に間隔を決めてください

    フレームは自分の間隔を持っていて、どの書き出しもそれを読みます。ですからプレビューで見た速さが、GIFとasciicastの速さです。一定の速さにするなら1フレームを決めて「すべてのフレームに適用」を押し、ある場面で溜めたいならそのフレームだけ長くしておいてください。

  3. 行き先で書き出しを選んでください

    asciinemaに上げる人や、ターミナルで再生する人にはasciicast v2です。チャットやREADMEにはGIFです。どこかに埋め込むならHTMLの再生器で、フレームまで中に入ったファイル一つ、CDNは使いません。他のプログラムが読むならテキストのフレームです。

よくある質問

asciicast v2とは何で、なぜGIFだけでは足りないのですか

asciinemaがターミナルを記録する形式です。JSON Lines形式で、ヘッダーのオブジェクトが1行、そのあとフレームごとに [時刻, "o", データ] の配列が続きます。最後までテキストのままなので、GIFが数メガバイトのところ数キロバイトで済み、見る人が画面の文字を選んでコピーできます。公開された仕様を見て実装しました。ターミナルの記録を再生できない場所、つまりほとんどの場所ではGIFが正しい答えです。

自動生成の効果は自作ですか

コードは自分で書きました。手法はもっと古いもので、ページに出典を書いてあります。回るドーナツはアンディ・スローンのdonut.cの方式で、手前の面が勝つようにzバッファを置き、面の法線と固定光源の内積で明るさの段階を選びます。炎はファビアン・サングラールがまとめたデモシーンの効果です。プラズマ、雨、サインスクローラーは特定の作者がいない伝承の効果で、そう書いてあります。どの効果もフレーム番号と種の純粋な関数なので、同じ種ならいつも同じアニメーションになります。

時間のかかる変換を止められますか

止められますし、実際に止まります。変換はフレームのあいだごとに確認するワーカーで動くので、取り消すと結果を隠すのではなく作業そのものが終わります。スマートフォンでは、この違いがファンがもう1分回るかどうかです。

ここから渡せます

次の一手

このツールが出したものをそのまま受け取れる道具です。

画像をアスキーアートに

Image to ASCII

写真を指定した幅と文字集合で、アスキーまたは色付きANSIの文字絵に変えます。

ブラウザの中だけで動きます

点字アート

Braille Art

写真をUnicodeの点字セルに変換します。1文字あたり2×4の点が入るので明暗ランプの8倍の解像度になり、ディザリング方式を選べます。

ブラウザの中だけで動きます

テキストアートを画像に

Text Art to Image

等幅のテキストアートを、フォント・セル寸法・色・背景・透過の有無を指定してPNGやSVGに描きます。等幅が保たれない場所に投稿しても形が崩れません。

ブラウザの中だけで動きます

動画をGIFに

Video to GIF

クリップをフレームレート・大きさ・パレットを決めて動くGIFかWebPにします。

ブラウザの中だけで動きます

今日の運勢(干支・星座)

Daily Fortune by Zodiac Animal & Star Sign

その日の日辰と干支や星座に伝わる気質を突き合わせて一日分の文を組みます(日付を種にしているので読み込み直しても引き直せず、日付が変わるまで同じ文です)。

ブラウザの中だけで動きます

相性占い(干支と日干)

Zodiac Compatibility (궁합)

二人の生年月日から干支と日の天干を取り、三合・六合・冲・怨嗔・刑・破・害のどの関係か、二つの日干の五行が相生か相剋かを、伝統的な読みとともに示します。

ブラウザの中だけで動きます