Textmode Overlay 作成者: humanbydefinition

動くウェブをテキストのように。

[Textmode Overlay] は、ブラウザ向けのリアルタイム ASCII アート生成ツールであり、動画をテキストに変えるエフェクトです。対応する動画または canvas を選ぶと、それが生き生きとした、完全に整列された文字のグリッドへと変わります。輝度による陰影と輪郭線を組み合わせ、色とフォントを選び、視覚エフェクトを重ね、構図が決まったらフレームを書き出せます。

元のメディアは下にそのまま残るので、効果のブレンド、一時停止、リセット、差し替え、削除をいつでも行えます。

textmode.js で作られています。

─── 試してみる

ページが対応する canvas または HTML5 動画を公開していれば、どこでも [Textmode Overlay] を使えます:

▸ YouTube の再生をライブな ASCII ビデオアートに
▸ Twitch の配信や VOD を textmode で再解釈
▸ Vimeo などのウェブ動画プレーヤーをスタイライズ
▸ ブラウザゲーム、デモ、WebGL の canvas を変換
▸ 音楽やオーディオのビジュアライザーにテキストアートの見た目を追加
▸ p5.js、Three.js、ジェネラティブアート、クリエイティブコーディングのスケッチを探求
▸ 自分のウェブサイトで canvas や動画要素を試す

保護されたメディア、クロスオリジンのメディア、サンドボックス内のメディアは利用できない場合があります。[Textmode Overlay] はアクセスできないフレームを明示し、ページを妨げることなくサンプリングエラーを報告します。

─── オーバーレイを作成

canvas または動画が表示されているページを開きます。

ツールバー:
1 [Textmode Overlay] のツールバーアイコンをクリック
2 「select media」を選択
3 利用可能なターゲットをプレビュー
4 ターゲットをクリック

コンテキストメニュー:
1 ページ上の任意の場所、または動画を直接右クリック
2 「Open Textmode Overlay」を選択
3 オーバーレイパネルで「select media」を選択
4 ハイライトされた canvas または動画をクリック

メディアの選択をキャンセルしたいときは、いつでも Esc を押してください。

─── 光・輪郭・その両方で描く

輝度パスと輪郭パスは独立して有効にでき、結果を形作る 3 つの方法が得られます:

▸ 輝度のみ
▹ カスタムのグリフランプを通して明るさの値を変換

▸ 輪郭のみ
▹ 検出したエッジを文字によるグラフィックな線として描画

▸ 組み合わせ
▹ 輝度ベースの ASCII 陰影に輪郭を重ねる

輪郭のしきい値と色感度を微調整し、どちらのパスも反転でき、その文字とセルにサンプリングした色または固定色を選べます。

─── スタイルを自分好みに

▸ 不透明度コントロールで結果をブレンド
▸ 文字サイズを細密なディテールから粗いピクセルまで設定
▸ 陰影に使うグリフランプを選んで編集
▸ 同梱の textmode フォントを順に切り替え
▸ 対応する TTF または OTF フォントをコンピューターからアップロード
▸ 元の色をサンプリングするか、文字・セル・背景の固定色をアルファ透過付きで選択
▸ 見たいページの部分からパネルをドラッグして離す
▸ メディアを選び直さずに実験をリセットしてやり直す

─── ライブエフェクトスタックを組む

CRT、スキャンライン、ブルーム、フィルムグレイン、ピクセレート、色収差、ポスタライズ、しきい値、ビネット、グレースケール、セピア、色相・コントラスト・彩度のコントロールなど、16 種類の後処理フィルターから選べます。

各エフェクトは、ソースの再生中でも切り替え、並べ替え、展開、調整できます。スタックの順序を変えると、まったく異なる結果が得られることもあります。

─── フレームを保存

▸ TXT
▹ 作品をプレーンな文字グリッドとしてコピー

▸ SVG
▹ textmode の結果をどの拡大率でもシャープに保つ

▸ PNG
▹ ロスレスの画像を書き出す

▸ JPG
▹ 軽量なラスター画像を書き出す

─── ワークフローを記憶

直近のオーバーレイプリセットはドメインごとに個別に記憶されます。パネルの位置も記憶され、カスタムフォントは削除するまでブラウザ管理の拡張機能ストレージにローカル保存されます。

─── 既定でプライベート

アカウント、クラウドレンダラー、トラッキング、広告、リモートでのメディア処理はありません。拡張機能は要求されたときだけオーバーレイを作成し、変換、設定、フォント、書き出しをブラウザ内に保ちます。

使用する権限:
▸ activeTab
▹ 拡張機能を呼び出した後にのみページへアクセス

▸ scripting
▹ ページ内のオーバーレイツールを開始

▸ storage
▹ ローカル設定とカスタムフォントのメタデータを保持

▸ unlimitedStorage
▹ 対応するカスタムフォントファイルをローカルに保持

▸ contextMenus
▹ 「Open Textmode Overlay」の右クリックアクションを追加

─── 互換性

同一オリジン、ネスト、srcdoc、動的に追加された iframe に対応しています。クロスオリジンまたは不透明なサンドボックス内の iframe のメディアは対象にできません。汚染された canvas（tainted canvas）、DRM 動画、その他の保護されたソースも、通常のブラウザのセキュリティ規則によりピクセルのサンプリングを妨げる場合があります。