はじめに

この本を参考に、ターミナルでAtomが動くバチクソかっこいいサンプルをDenoに移植しました。

こんな感じで動きます。

ページをめくるたびに失神するほどかっこいいので、みんなで読んで失神しよう。

実行してみる

denoはURLを渡すだけで直接実行できます。
何はともあれ実行してみてください。

deno run --unstable https://gist.githubusercontent.com/zakuroishikuro/dc92d9d6a873e24f40ace683df177245/raw/6b48afbcd41d228ab52e6b4b8f802292a9abce0d/atom.ts

画面の大きさを取得するDeno.consoleSizeを使うために--unstableフラグが必要。
画面をデカくすればするほどカッコいいよ。
Ctrl+cで終了してね。

元のソースはこれ。

どうやって動かしてるの？

画面全体に文字列を出力して、消して、また出力してるだけ。
消すってなんだよ！？

普通の文字とは違う特殊な文字(エスケープシーケンス)を出力すると、何も表示されず不思議なことが起きます。
ここで使ってるのは二つ。

"\x1b[2J": 画面全体を消去
"\x1b[1:1H": カーソルを左上に移動

他にもいろいろあります。一覧はこちら。

もっと詳しく知りたい人はこちら。歴史的経緯も分かってめちゃくちゃ面白い。

で、JavaScriptで文字列を出力するといったらconsole.logなんだけど
これ使うと最後に常に改行されるので、改行せずに文字列を出力する関数を作っておく。
文字列をUint8Arrayに変換して標準出力(Deno.stdout)にブチ込む。

print(str)

const encoder = new TextEncoder();

/** console.logだと毎回改行されて困るので、改行せず文字列を出力する関数 */
async function print(str: string) {
  const bytes = encoder.encode(str);
  await Deno.stdout.write(bytes);
}

これでprint("\x1b[2J")すれば改行せずに画面を消せる。
ちなみにRubyでは改行するのがputs関数で、改行しないのがprint関数なのでそれに倣う。

sleep関数でn秒ディレイする

ループ内で待つ処理を挟むために、awaitでn秒待つsleep関数を作りました。
setIntervalでやってもいいんだけど、元のイカすソースに似せたかった。

sleep(n)

/** n秒待つ関数 (await忘れずに) */
function sleep(sec: number) {
  return new Promise((res) => {
    setTimeout(() => res(null), sec * 1000);
  });
}

これでawait sleep(1)すれば処理が1秒中断されます。
Denoではトップレベルawaitが有効なのでasyncするために関数の中で実行しなくて済む。

サブキャラクターレンダリング

半角文字は縦に長い。
半角1文字をタテに2ドットあると見立ててコンマやコロンなどを駆使し1文字で2ドット分の情報を描画する手法。
こういうとき以外で使うかは知らない。

ドット	サブ
□ □	[ ]
■ □	[']
□ ■	[,]
■ ■	[;]

点字使ったらもっとすごそう

ソース全体

肝心の処理部分。
複素数が必要だったのでSkypackからmathjsをimportしてる。

// deno run --unstable https://raw.githubusercontent.com/zakuroishikuro/sharin/main/asobu/atom.ts
//
// original source code:
// https://github.com/mame/trance-book/blob/master/8-1/subcharacter-rendering-demo.rb
//
// from:
//   あなたの知らない超絶技巧プログラミングの世界 by 遠藤侑介
//   8-1-2 アスキーアートの生成（1）：サブキャラクターレンダリング

import { complex, multiply } from "https://cdn.skypack.dev/mathjs";

/** n秒待つ関数 (await忘れずに) */
function sleep(sec: number) {
  return new Promise((res) => {
    setTimeout(() => res(null), sec * 1000);
  });
}

const encoder = new TextEncoder();

/** console.logだと毎回改行されて困るので、改行せず文字列を出力する関数 */
async function print(str: string) {
  const bytes = encoder.encode(str);
  await Deno.stdout.write(bytes);
}

// コンソールの大きさを取得。--unstalbeフラグが必要。
const {rows} = Deno.consoleSize(Deno.stdout.rid)

const S = rows; // 描画領域のの
const A = S / 2.1; // 長径
const B = S / 8.0; // 短径

print("\x1b[2J"); // 画面クリア

let n = 0;
while (true) {
  // バッファ
  const s = [...Array(S)].map(() => [..." ".repeat(S * 2)]);

  [...Array(100)].forEach((_, i) => {
    // 楕円の媒介変数表示
    const t = Math.PI * 2 * (i + n) / 100;
    const e = complex(A * Math.cos(t), B * Math.sin(t));

    // 楕円を 3 つ描く
    [-1, 0, 1].forEach((j) => {
      // 楕円を傾ける
      const e2 = multiply(
        e,
        complex({ r: 1.0, phi: Math.PI * 2 / 3 * j + n / 500 }),
      );

      // ドットを置く
      const x = Math.floor(e2.re * 2 + S);
      const y = Math.floor(e2.im * 2 + S);

      const row = s[Math.floor(y / 2)];
      if (i === 99) {
        [row[x - 1], row[x]] = "()";
      } else if (y % 2 == 0) {
        row[x] = row[x] == " " || row[x] == "'" ? "'" : ";";
      } else {
        row[x] = row[x] == " " || row[x] == "," ? "," : ";";
      }
    });
  });

  print("\x1b[1;1H" + s.map((row) => row.join("")).join("\n"));
  await sleep(0.03);

  n++;
}

移植しただけの自分にはたいして解説できねぇ。すまねぇ。
ソースコードとにらめっこして解読してほしい。ごめんなさい。

おしり。