📊 文字による視覚表現の発見

docker pull や npm install 時に、プログレスバーやスピナーの視覚的な表現として変わった記号が使用されることがある。

# docker pull でよく見るプログレスバー
Pulling fs layer  ████████████████████████████████████████ 100%
Downloading       ⠋ ⠙ ⠹ ⠸ ⠼ ⠴ ⠦ ⠧ ⠇ ⠏

# npm install のスピナー
npm WARN deprecated   ⠋ Installing packages...
                      ⠙ Building dependencies...
                      ⠹ Resolving peer dependencies...

# 進捗表示の例
Progress: [████████████████████████████████████████] 100%
Loading:  [▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░░░░░░░░░░░░░] 50%

このような表現で使われている記号の正体が気になって調べてみたところ、ChatGPT が視覚表現に使用される様々な記号について詳しく教えてくれた。

視覚表現に使用される記号とコード

■ ボックス描画文字

グリフ 説明 コード
┌ Box Drawings Light Down and Right U+250C
┐ Box Drawings Light Down and Left U+2510
└ Box Drawings Light Up and Right U+2514
┘ Box Drawings Light Up and Left U+2518
─ Box Drawings Light Horizontal U+2500
│ Box Drawings Light Vertical U+2502
├ Box Drawings Light Vertical and Right U+251C
┤ Box Drawings Light Vertical and Left U+2524
┬ Box Drawings Light Down and Horizontal U+252C
┴ Box Drawings Light Up and Horizontal U+2534
┼ Box Drawings Light Vertical and Horizontal U+253C

■ ブロック要素・シェード

グリフ 説明 コード
█ Full Block（全塊） U+2588
▀ Upper Half Block U+2580
▄ Lower Half Block U+2584
▌ Left Half Block U+258C
▐ Right Half Block U+2590
░ Light Shade U+2591
▒ Medium Shade U+2592
▓ Dark Shade U+2593

■ 矢印・方向記号

グリフ 説明 コード
← Leftwards Arrow U+2190
↑ Upwards Arrow U+2191
→ Rightwards Arrow U+2192
↓ Downwards Arrow U+2193
↔ Left-Right Arrow U+2194
↕ Up-Down Arrow U+2195
⇐ Leftwards Double Arrow U+21D0
⇒ Rightwards Double Arrow U+21D2
⇑ Upwards Double Arrow U+21D1
⇓ Downwards Double Arrow U+21D3

■ スピナー・進捗表示用グリフ

グリフ 説明 コード
⠋ Braille Spinner Frame 1 U+280B
⠙ Braille Spinner Frame 2 U+2819
⠹ Braille Spinner Frame 3 U+2839
⠸ Braille Spinner Frame 4 U+2838
⠼ Braille Spinner Frame 5 U+283C
⠴ Braille Spinner Frame 6 U+2834
⠦ Braille Spinner Frame 7 U+2826
⠧ Braille Spinner Frame 8 U+2827
⠇ Braille Spinner Frame 9 U+2807
⠏ Braille Spinner Frame 10 U+280F
◐ Circle Spinner Frame 1 U+25D0
◓ Circle Spinner Frame 2 U+25D3
◑ Circle Spinner Frame 3 U+25D1
◒ Circle Spinner Frame 4 U+25D2

■ 幾何学的形状

グリフ 説明 コード
▲ Black Up-Pointing Triangle U+25B2
△ White Up-Pointing Triangle U+25B3
▼ Black Down-Pointing Triangle U+25BC
▽ White Down-Pointing Triangle U+25BD
■ Black Square U+25A0
□ White Square U+25A1
● Black Circle U+25CF
○ White Circle U+25CB
◎ Bullseye U+25CE
◆ Black Diamond U+25C6
◇ White Diamond U+25C7

■ その他の記号

グリフ 説明 コード
✓ Check Mark（チェック） U+2713
✔ Heavy Check Mark（太いチェック） U+2714
✗ Ballot X（バロット×） U+2717
✘ Heavy Ballot X（太いバロット×） U+2718
★ Black Star U+2605
☆ White Star U+2606
✰ Shadowed White Star U+2730
♪ Eighth Note U+266A
♫ Beamed Eighth Notes U+266B
♩ Quarter Note U+2669
♬ Beamed Sixteenth Notes U+266C
☀ Black Sun with Rays U+2600
☁ Cloud U+2601
☂ Umbrella U+2602
☃ Snowman U+2603
♠ Black Spade Suit U+2660
♥ Black Heart Suit U+2665
♦ Black Diamond Suit U+2666
♣ Black Club Suit U+2663

💡 点字図形（Braille Pattern）という文字

これらの記号は、実際にCLIのツールなどで、ちょっとした洒落のような感じで使われているのを見たことがある。

この中にある、 Braille Spinner Frame という記号は、多分docker pull のときにプログレスバーとして出力されているものだと思う。

調べてみたところ、これはいわゆる 点字図形(Braille Pattern) であり、視覚障害を持つ人が、触覚によって文章や単語を認識するためのもの。

言われてみれば確かにテキストで表現できるのは便利というか、まさに必要とされそうではあるので、Unicodeに定義されているのは納得。

これは、2x3と2x4のものがあり、そのすべての位置の点の有り無しの組み合わせの数だけ、パターンが用意されている。

つまり、半角1文字で、2x4の8個のドットを視覚的に表現できるということだ。

🖼️ 点字図形による画像変換実験

試しに、ChatGPTに画像をリサイズしてあれこれ前処理をしてからピクセルを読んで、点字表現で出力するコードを書かせてみたらすぐできた。

高解像度版（80x40文字）

こちらはMLやCV界隈では有名な画像(lenna)の (80, 40) 文字サイズ。

ドットの解像度は、 (80*2, 40*4) –> (160, 160) ということになる

このくらいの解像度があれば、だいたい何の画像かわかる。

⣿⣿⣿⠋⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⣿⣿⣿⣿⣿⣿⣿⣿⣏⡩⢩⠉⢉⣭⠽⢭⣭⣿⣿⣻⢽⣭⣭⡉⣉⠏⣿⠿⢽⣿⣿⣿⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠛⠉⠉⠉
⣿⣿⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⣿⢷⠘⠃⠁⠢⠀⠒⠊⠋⠈⠉⠉⠉⠙⠛⠷⣦⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠋⠀⠀⠀⠀⠀
⣿⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣴⠀⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⣾⣿⣻⣆⢬⣄⣤⣷⢠⡠⠀⠀⠀⠀⠀⠀⠀⠙⠻⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣿⣿⣿⣿⣿⣿⣿⡿⠛⠀⠀⠀⠀⠀⠀⠀
⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣴⣿⠀⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⣿⣿⢽⢏⣿⣿⣿⣟⣠⢁⡬⠀⠀⠀⠀⠀⠀⠀⠀⠈⠛⣿⣿⣿⣿⠀⠀⠀⢰⣦⠀⠀⠀⠀⠀⠀⠀⣰⣿⣿⣿⣿⣿⣿⣿⠟⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣴⣿⣿⠀⠀⠀⢐⣿⣿⣿⣿⣿⣿⣿⣿⣿⢿⣾⣿⣿⣽⢟⠍⠈⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⣿⣿⣿⠀⠀⠀⢸⣿⣧⠀⠀⠀⠀⠀⣰⣿⣿⣿⣿⣿⣿⣿⠏⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣴⣿⣿⣿⠀⠀⠀⠈⣿⣿⣿⣿⣿⣿⣿⣿⢫⣿⣿⣿⣯⢲⡏⠀⠠⣂⠀⠄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠻⣿⡄⠀⠀⢸⣿⣿⣧⡀⠀⠀⣴⣿⣿⣿⣿⣿⣿⡿⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⣿⣿⣿⣿⠀⠀⠀⠘⣿⣿⣿⣿⣿⣿⣿⡿⢸⣿⣿⣿⡟⡇⢄⢅⣤⠜⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻⡇⠀⠀⢸⣿⣿⠟⠁⠀⠈⣿⣿⣿⣿⣿⣿⡟⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⣰⣿⣿⣿⣿⣿⠂⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⠃⣼⣿⣿⣻⠲⣏⣓⠟⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠃⠀⠀⠸⠛⠁⠀⠀⠀⠀⣿⣿⣿⣿⣿⡟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣲
⠀⠀⠀⠀⠀⠀⠀⣠⣿⣿⣿⣿⣿⣿⠁⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⠀⢹⣿⣿⢿⡶⡿⠋⢀⠄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⣿⡿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣴⠏
⠀⠀⠀⠀⠀⠀⢠⣿⣿⣿⣿⣿⣿⣿⠃⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⠀⠐⢻⣿⣿⠟⠠⡢⠀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⠀⣼⣿⣿⣿⡿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣜⠿⠀
⠀⠀⠀⠀⠀⢠⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⠀⠀⢀⣿⢩⢄⠞⡀⠠⢈⠄⣀⡠⣀⠀⢄⡀⠀⠀⢀⢀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⡴⢀⣿⣿⣿⣿⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠠⣿⠃⠀
⠀⠀⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⠀⠀⡤⢾⣷⠋⡠⢞⡡⣁⡔⣴⣿⣽⣶⣷⣿⣿⣿⢟⠕⠀⠀⠀⠀⠀⠀⢀⣤⣶⠿⠋⣠⣿⣿⣿⣿⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⣾⡟⠀⠀
⠀⠀⠀⠀⢰⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⡄⠀⠢⡽⡉⣽⣋⡷⣤⣺⣾⣿⣿⣿⣽⣻⣿⠿⠍⠁⠀⠀⠀⠀⠀⣠⣶⢿⡈⠁⢀⣴⣿⣿⣿⣿⡟⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠐⣾⡿⠀⠀⠀
⠀⠀⠀⠀⠐⣿⣿⣿⣿⣿⣿⣿⣿⣿⡄⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀⣽⣿⡽⣻⣫⣿⣿⣿⣿⣿⣿⣿⡿⡯⠋⠀⠀⠀⠀⠀⠀⠀⠘⣿⣯⠃⣴⣿⣿⣿⣿⣿⣿⣽⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢁⣿⠁⠀⠀⠀
⠀⠀⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⣿⣿⡇⠀⠀⠀⣿⣿⣿⣿⣿⣿⢿⣿⡄⣰⣿⢟⣷⣾⣿⣿⣿⣿⣿⣏⣿⢟⠝⠐⠀⠀⠀⠀⠀⠀⠀⠀⠀⢿⣿⡆⣿⣿⣿⣿⣿⣿⠇⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣶⡟⠀⠀⠀⠀
⠀⠀⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⣿⣿⡇⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⣿⣝⢼⣍⣥⣿⣿⣿⣿⣿⣿⣿⣿⡯⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⣷⢿⣿⣿⣿⣿⡿⠔⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣼⣿⠁⠀⠀⠀⠀
⠀⠀⠀⠀⠀⢻⣿⣿⣿⣿⣿⣿⣿⣿⡇⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⠛⢳⣦⣽⣾⣿⣿⣿⣿⣿⣿⣿⡫⠁⠀⢀⣔⣉⣲⢦⡄⠀⠀⠀⠀⣤⣞⣿⣿⢸⣿⣿⣿⣿⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠠⣾⣷⣿⡏⠀⠀⠀⠀⠀
⠀⠠⠀⠀⠀⣺⣿⣿⣿⣿⣿⣿⣿⣿⡇⠀⠀⠀⣿⣿⣿⣿⣿⡏⠥⢀⣼⣿⣿⣿⣿⣿⣿⣿⣿⣿⡓⠀⠀⣴⣿⣿⣿⠙⡷⣤⠀⠀⡰⣿⠟⣿⣿⣿⢸⣿⣿⣿⡿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠐⠄⠛⠉⠉⠁⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠻⣿⣿⣿⣿⣿⣿⣿⣿⡇⠀⠀⠀⣿⣿⣿⡿⣟⢇⣡⣾⢿⣿⣿⣿⣿⣿⣿⣿⣿⣯⠁⢀⡞⠁⠉⠫⠅⠄⠈⠛⠀⠀⠉⠭⣴⣿⣿⣿⠈⣿⣿⣿⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⢰⣿⣿⣿⣿⣿⣿⣿⣿⡇⠀⠀⠀⣾⣿⣿⣛⣺⣿⣿⣿⣿⣿⣿⣾⣯⢿⣿⣿⢯⠁⣠⣿⠄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⣿⣿⣿⡀⣿⣿⡿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⣾⣿⣿⣿⣿⣿⣿⣿⣿⡇⠀⠀⠀⢹⡟⡿⣟⡿⣽⣿⣟⢿⣿⣿⣿⣿⢪⣻⡿⠍⣠⣿⣿⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠐⣿⣿⣿⡇⢹⣿⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⣿⣿⡇⠀⠀⠀⣺⣟⣾⣿⣿⣿⣳⣿⣟⣿⣿⣟⢿⣾⡟⠙⣠⣿⣿⣿⡃⠀⠀⠀⠀⠀⢰⣀⣀⠀⠀⠀⣼⣿⣿⣿⣇⢸⣿⠀⠀⠀⠀⠀⠀⠀⠐⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⣿⣿⡇⠀⠀⠀⢸⣿⣿⣿⣷⣯⣿⣿⣼⣿⣝⣿⡾⢟⡧⣰⣿⣿⣿⣿⠅⠀⠀⠀⠀⠀⠀⠈⠉⠁⠀⠀⣿⣿⣿⣿⣿⠸⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⣿⣿⡇⠀⠀⠀⢼⡿⣵⣿⣿⣿⣿⣿⡷⣿⡿⡛⢀⡾⣵⣿⣿⣿⣿⣿⡆⠀⠀⠀⣀⣀⣀⣀⣀⣀⡴⣰⣿⣿⣿⣿⣿⢠⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⢀⣠⣿⣿⣿⣿⣿⣿⣿⣿⣿⡇⠀⠀⠀⢝⣽⣳⣿⣿⣿⡏⢿⡻⣿⠏⢂⠞⣵⣿⣿⣿⣿⣿⣿⣷⣦⡀⠀⠁⠩⢉⠉⣀⠀⢀⣿⣿⣿⣿⣿⣿⡌⠀⠀⠀⠀⠀⠀⠀⢀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⣤⣴⣶⣿
⠀⠀⠀⢸⣿⣿⣿⡿⠿⣿⣿⣿⣿⣿⡇⠀⠀⠀⢸⣧⣿⣿⣿⣿⣿⡯⣯⡞⢷⣀⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣇⠀⠀⠀⠀⠉⠀⢀⣿⣿⣿⣿⣿⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⣼⠀⠀⠀⠀⠀⠀⠀⢀⣠⣶⣿⣿⣿⣿⣿⣿
⣴⡆⠀⢐⣿⣿⣿⠀⠀⢿⣿⣿⣿⣿⡇⠀⠀⠀⣸⢿⢿⣿⣿⣿⣿⣿⡾⣳⢸⡿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠦⠄⠀⠀⠀⠠⠼⣿⣿⣿⣿⣿⣿⣿⡇⣴⣦⣤⣀⡀⠀⢴⣾⠀⠀⠀⠀⠀⣤⣶⣿⣿⣿⣿⣿⣿⣿⣻⣿
⣿⣦⣤⣾⣿⣿⣿⠀⠀⠘⣿⣿⣿⣿⣷⠀⠀⠀⢵⣿⣿⣿⣿⣿⢿⡮⣿⡾⣷⢿⢮⢿⣿⣿⣿⣿⣿⣿⣿⣿⣦⠁⠀⠀⠀⠀⠀⠀⠀⠉⠛⢿⣿⣿⣿⠀⠫⠙⢿⢿⣿⣿⡿⣿⠀⠀⠀⣠⣾⣿⣿⣿⣿⣿⣿⣿⣿⣾⣿⣿
⣿⣿⣿⣿⣿⣿⣿⡄⠀⣠⣷⣯⠻⣿⣿⠀⠀⠀⠈⢿⣿⣿⣭⣿⣿⣿⣿⣿⣿⡝⢯⢯⣿⣿⣿⣿⣿⣿⣿⣿⡯⠊⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⢻⣿⣿⠀⠀⠀⠈⢈⢿⣿⠃⠏⠀⠀⢠⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⡟⠀⢹⠿⣿⣿⣗⠀⠀⣿⣿⣿⠆⢸⣿⠀⠀⠀⠨⣽⣿⣿⣿⢿⣿⣿⣿⣿⣿⣟⢸⡿⣿⣿⣿⣿⣿⣿⢿⣿⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻⣿⠀⠀⠀⠀⢀⣼⡟⠀⠀⠀⢀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣇⠀⣸⣰⣿⣿⣿⡦⠀⢻⣿⣿⡇⠘⣿⠀⠀⠀⠠⣿⣿⣿⣿⣽⣿⣿⣿⣿⣿⢗⣜⠣⢽⣿⣿⣿⣿⣛⢾⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⡟⠀⠀⠀⠀⠈⣿⠃⠀⠀⠀⣼⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣧⡀⣠⣿⣿⡇⠀⣿⠀⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡗⣯⠿⣿⣷⣿⣿⣿⣷⣿⠇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⣄⣀⠀⠀⠀⠉⠀⠀⠀⢠⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣧⠀⣿⠀⠀⠀⢐⣿⣿⣿⣿⣿⣿⣿⣿⣿⡽⣷⣿⣷⣿⣿⣿⣿⣿⣾⡿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⣶⣷⣀⠐⠀⠀⣼⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⠋⠀⣿⣿⣿⠀⢿⠀⠀⠀⢸⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣽⢯⣿⣿⣿⣿⣿⣿⣿⠅⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻⣿⣿⣿⣿⡇⠀⣀⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⠃⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣛⠈⠹⠧⣤⣿⣿⣷⠀⢸⡀⠀⠀⢸⣿⣿⣿⣿⣿⣿⣿⣿⣿⣻⣯⣿⣿⣿⣿⣿⣿⠿⠛⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⣿⣿⣿⣿⣷⣴⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠀⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣟⡟⠀⣤⣀⣾⣿⣿⣿⠀⠈⡇⠀⠀⣾⣿⣿⣿⣿⣿⣿⣿⡿⣟⣷⣿⣿⣿⣿⣿⣿⡿⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢿⣿⣿⡿⣿⢛⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠃⠀⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⡁⠀⠉⠉⠙⣿⣿⣿⠀⣴⡇⠀⠀⢹⣿⣿⣿⣿⣷⣿⣿⣿⣏⣿⣿⣿⣿⣿⣿⣿⣳⣴⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⠉⠀⢀⣼⣿⣿⣿⣿⣿⣿⣿⡿⠋⠉⠀⢀⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⠄⠀⠀⣦⠉⣿⣿⣷⣿⡁⠀⠀⢸⣿⣿⣿⣻⣟⣿⣿⣯⣿⣿⣿⣿⣿⣿⣿⣯⣙⣵⠀⠀⠀⠀⠀⠀⢀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠊⣀⢤⣾⣿⣿⣿⣿⣿⠿⠿⠛⠀⠀⠀⠀⣼⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⡯⠀⣦⡴⠟⠒⢿⠏⣿⣿⡇⠀⠀⢘⢙⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣁⣽⡛⠀⠀⠀⠀⠀⠀⠀⣷⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠹⠮⠻⠿⠿⠛⠋⠁⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣷⣀⣀⣀⣀⣀⣀⣾⣿⣿⣇⣀⣀⣐⣌⣏⣿⣿⣿⣿⣿⣟⣟⣏⣿⣿⣿⣶⣿⣿⣿⣀⣀⣀⣀⣀⣀⣀⣀⣹⣖⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣿⣿⣿⣿⣿⣿⣿

低解像度版（16x8文字）

りんご

こちらは、x.comでポストできる (16, 8) サイズ。 (128文字)

⣿⣿⣿⣿⣿⣿⣿⣿⡿⠛⠉⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⠁⣀⣴⣿⣿⣿⣿⣿
⣿⣿⡿⠋⠁⠀⠈⠉⠉⠁⠀⠀⠈⢙⣿⣿
⣿⡟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⣿⣿⣿
⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⣿⣿
⣿⣷⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⣿
⣿⣿⣧⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⣿⣿
⣿⣿⣿⣷⣄⣀⣀⣤⣤⣄⣀⣀⣴⣿⣿⣿

これはこれであまり見ない面白い出力だが、複雑な画像は解像度が低すぎて潰れてしまう。

kaspa

絶賛大安売り中のkaspaのロゴはいい感じに出力できた。

⠀⠀⠀⣠⣶⣾⣿⣿⣿⣿⣶⣦⣀⠀⠀⠀
⠀⣠⣾⣿⣿⣿⣿⣿⡿⠿⣿⣿⣿⣷⡄⠀
⣼⣿⣿⣿⡟⠈⠛⢿⡇⠀⢹⣿⣿⣿⣿⡄
⣿⣿⣿⣿⣿⣶⣄⠀⠙⠀⢸⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⠟⠋⠀⣠⠀⢸⣿⣿⣿⣿⡿
⠹⣿⣿⣿⣧⣀⣴⣿⡇⠀⣸⣿⣿⣿⣿⠃
⠀⠈⠻⣿⣿⣿⣿⣿⣷⣶⣿⣿⣿⠟⠁⠀
⠀⠀⠀⠈⠻⠿⣿⣿⣿⡿⠿⠛⠁⠀⠀⠀

🔧 画像を点字に変換するツール

実際に画像を点字図形に変換できるツールを作成した。Braille Pattern Generatorでブラウザ上で直接画像をアップロードして点字図形に変換することができる。

このツールでは、ブラウザのみの機能で、画像から点字テキストを生成できる。

APIなどでサーバーと通信するようなことをしてないので、どんな恥ずかしい画像でも点字に変換することが可能となっている。

点字画像を出力するスクリプト

他にもいくつかの画像で点字図形変換を試してみたんだけど、いろいろやってるうちに、シェルスクリプト形式でターミナルに点字を出力するという方法を思いついた。

点字画像スクリプト集

軽量化のために文字列を圧縮しているんだけど、そのせいで異様に怪しいスクリプトになってしまっている。

実行すると点字画像がターミナルに出力されるという、だけなんだけど、普通はこんな怪しげなプログラムは実行しないほうが良い。

📊 データ効率について考えてみる

ちなみにこれは1文字あたり8箇所にそれぞれ点が有るか無いかのパターンを表現できるということなので、8bits。

ちょうど1byteということになる。

80*40 = 3200文字 で、(160px,160px) の画像を表現できるが、

160px * 160px / 8bits = 3200bytes なので、情報量は単なる白黒ビットマップと同じだった。

それに、普通にUTF-8 とかだと、1文字で数バイト必要になるのでビットマップよりもデカくなる。

見え方がちょっとおもろいだけの、効率の悪いデータ表現であることがわかった。

でもターミナルで荒い白黒画像を表示できるのは便利かもしれん。