1. トップ
  2. 新着ニュース
  3. IT
  4. IT総合

Windows Terminal Preview版でSixelグラフィックスを実際に表示させてみる

ASCII.jp / 2025年1月5日 10時0分

今回もWindows Terminal上でのSixelグラフィックスを解説

 前回は、Sixelグラフィックによる画像ファイルの表示とエスケープシーケンスを簡単に解説した。今回は、Windows TerminalのSixelグラフィックスをさらに細かく見ていくことにしよう。

Sixelグラフィックス
前回は、LibSixelやImage Magickを使った画像表示とエスケープシーケンスの簡単な解説をした

 まず、Sixelのエスケープシーケンスだが、正確には、以下のような書式を持つ。

CSI <アスペクト比> ";" <ゼロ描画> ";" <Xピクセルサイズ> ";" "q" <Sixelグラフィック文字> ST

・アスペクト比:Sixel描画ビットの縦横比 ・ゼロ描画:Sixel描画ビットの0を既定の背景色にするかどうか ・Xピクセルサイズ:Sixel描画ビットのX方向のピクセルサイズ ・Sixelグラフィック文字:前回参照、Sixelカラーレジスタ定義とカラーレジスタ指定、描画文字など

 ただし、Xピクセルサイズは無視され、常にSixelピクセルのX方向のサイズは1のままである。

 まず「アスペクト比」だが、指定する値とアスペクト値(縦横比)の関係は、以下の表のようになり、1:1から1:5までが指定できる。ここで指定するのは縦横比だが、3つ目のXビットサイズと掛け合わせることでY方向の物理ピクセルサイズに変換できる。ただし、Xピクセルサイズは常に1なので、アスペクト比がそのままYピクセルサイズとなる。

Sixelグラフィックス

 簡単に言えば、アスペクト比を指定することでY方向のピクセルサイズを1/2/3/5ドットと指定したのと同じになる。このとき、1文字に相当するSixelピクセルのサイズが変化する。

 次の「ゼロ描画」は、Sixelピクセルのゼロビットで現在の背景色を描画するか(=0または2)、現在の色を保持するか(=1)を指定する。

 Sixelグラフィックスでは、同一エスケープシーケンス内であれば、ゼロビットは現在の値を保持するが、異なるエスケープシーケンスによる描画では、この値を使ってゼロビットの描画方法を決定する。

 デフォルトは0で、現在の背景色で描画する。このため、異なるエスケープシーケンスでSixelグラフィックスを同一ライン上ですると、「?」文字で右側にある描画を消してしまう。これを防ぐには、「ゼロ描画」に1を指定したエスケープシーケンスを使う。

 Sixelのエスケープシーケンスを複数に分離しなければならないのは、その描画開始位置をカーソル位置を制御するエスケープシーケンス(CUP/Cursor Positionエスケープシーケンス:CSI <Y> ; <X> H)を、使って開始位置を変更する必要があるからだ。

 もちろん、「$」と「-」を使って、描画の右上から順にSixelを描画していくこともできる。しかし、この場合、描画ピクセルが右上から左下に順に描画するようにSixelピクセルの描画位置を並べ替える必要がある。

 Sixelグラフィックスのエスケープシーケンスでは、開始位置より左側、上側に描画できない。「$」はX方向で開始位置に戻るだけで、「-」は1つ下の行に移動することしかできない。つまり、上方、左側に移動する手段がない。

 なので、Sixelピクセルの描画座標から、一番近いカーソル位置を算出して、CUPエスケープシーケンスを使って、Sixelグラフィックの開始位置を指定する必要がある。

アスペクト比とSixel描画

 さて、具体的にアスペクト比を変えて描画してみよう。Sixelグラフィックスのエスケープシーケンスで、アスペクト比を指定すると、1ピクセルの縦方向が、1/2/3/5ドットとなる。これにともない、ターミナル上の文字との相対サイズが変化する。

Sixelグラフィックス

 アスペクト比が2:1(<アスペクト比>設定値としては0または1)の場合、ピクセルは縦2ドット、横1ドットとなり、1文字は10×10 Sixelピクセルに相当する。これは、フォントサイズに関係がない。つまり、フォントサイズが大きくなると、それに応じてSixelピクセルのサイズが追従して大きくなる。

 たとえば、アスペクト比5:1(設定値としては2)の場合、PowerShellで記述した以下のエスケープシーケンスで、縦5ドットのSixelグラフィックスを描画できる。

$aspect=2;write-host "`e[4;10HH`eP${aspect};1;0;q@ACGO_-??????@ACGO_`e\`e[5;10HH`e[6;10HH`e[6;12HH aspect=$aspect`n"

 このとき、横方向では1文字はSixelで10ピクセルに相当し、縦方向では4ピクセルに相当する。

Sixelグラフィックス
アスペクト比5:1の場合、Sixelの1つのピクセルは画面上では、横1×縦5ピクセルとなる。なお、Sixelのピクセルは、文字フォントのサイズに合わせて拡大、縮小し、常に同じPixelドット数が文字サイズに対応する

 同じくアスペクト比3:1(設定値としては3)の場合、

$aspect=3;write-host "`e[4;10HH`eP${aspect};1;0;q@ACGO_-??????@ACGO_-????????????@ACGO_`e\`e[5;10HH`e[6;10HHHH`e[6;15Haspect=$aspect`n"

Sixelグラフィックス
アスペクト比3:1の場合、Sixelの1つのピクセルは画面上では、横1×縦3ピクセルとなる

となる。このとき、1文字の縦方向は、6.666...ドットと整数ではなくなる。このため、写真ではHで上書きされたSixelグラフィックス右下のドットが小さく欠けている。

 アスペクト比1:1(設定値としては7)の場合には、1文字は、Sixelグラフィックスでは10×20ピクセルに相当する。エスケープシーケンスとしては、

$aspect=7;write-host "`e[4;10HH`eP${aspect};1;0;q@ACGO_-??????@ACGO_-????????????@ACGO_-??????????????????@ACGO_`e\`e[5;10HHHHH aspect=$aspect`n"

Sixelグラフィックス
アスペクト比1:1の場合、Sixelの1つのピクセルは画面上では、横1×縦1ピクセルとなる

となる。

 デフォルトのアスペクト比である2:1(設定値を省略または0を指定)の場合には、1文字は10×10ピクセルに相当する。エスケープシーケンスは、以下になる。

$aspect=0;write-host "`e[4;10HH`eP${aspect};1;0;q@ACGO_-??????@ACGO_-????????????@ACGO_-??????????????????@A`e\`e[5;10HHHHH aspect=$aspect`n"

Sixelグラフィックス
アスペクト比2:1の場合、Sixelの1つのピクセルは画面上では、横1×縦2ピクセルとなる。アスペクト比を指定しない場合のデフォルト値が2:1である

 アスペクト比を変えることで、Sixelの1ビットで描画できる縦方向ドットのサイズを変更できる。ただし、現状、1ピクセルの横方向のサイズを変更する方法はなく、Sixelを横方向に並べる必要がある。

 Sixelグラフィックスは、ターミナル内の任意の場所に点を打つグラフィックスとして考えるとちょっと面倒なところがある。とりあえずは、ユーザー定義文字のように1行内でSixelグラフィックスを描画するか、ツールやライブラリ(LibSixel)を使って、画像ファイルを表示させるか、といった使い方になるのではないか。

 かつてのBASICのように、線や矩形、円などを描画するには、それぞれプログラムを記述する必要がある。

この記事に関連するニュース

トピックスRSS

ランキング

記事ミッション中・・・

10秒滞在

記事にリアクションする

記事ミッション中・・・

10秒滞在

記事にリアクションする

デイリー: 参加する
ウィークリー: 参加する
マンスリー: 参加する
10秒滞在

記事にリアクションする

次の記事を探す

エラーが発生しました

ページを再読み込みして
ください