電光掲示板シェル芸 その１

# 電光掲示板シェル芸とは？
![営業中.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143996/9d1250c8-027a-a2bf-18ab-04f81adfe56c.png)
電光掲示板シェル芸は、こういう電光掲示板風の文字列や画像を生成するシェル芸です。
シェル芸botでの実行例↓
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/SH4iQKh784">https://t.co/SH4iQKh784</a> <a href="https://t.co/SbW7d8HduJ">pic.twitter.com/SbW7d8HduJ</a></p>&mdash; シェル芸bot (@minyoruminyon) <a href="https://twitter.com/minyoruminyon/status/1138102156211310592?ref_src=twsrc%5Etfw">June 10, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
電光掲示板シェル芸を、コマンドを実行しながら理解していきましょう。
前提として、imagemagickとtextimgがインストールされていること。
imagemagickだけでもできなくはないですが、textimgを使うと楽です。
# シンプルな電光掲示板シェル芸
「あ」一文字を、黒地に赤の電光掲示板で表示してみましょう。

```bash
$ textimg あ|convert - -trim -compress none pbm:-|tail -n +3|tr -d ' '|sed 'y/01/🍎🌑/'
🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
🌑🌑🌑🌑🌑🌑🍎🍎🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
🌑🌑🌑🌑🌑🌑🍎🍎🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
🌑🌑🌑🍎🍎🍎🍎🍎🍎🌑🍎🌑🌑🍎🌑🍎🌑🌑
🌑🌑🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🌑🌑
🌑🌑🌑🌑🌑🌑🍎🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
🌑🌑🌑🌑🌑🌑🍎🍎🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
🌑🌑🌑🌑🌑🌑🍎🍎🍎🍎🍎🍎🍎🌑🌑🌑🌑🌑
🌑🌑🌑🌑🍎🍎🍎🍎🍎🌑🌑🍎🍎🍎🍎🌑🌑🌑
🌑🌑🌑🍎🍎🍎🍎🌑🌑🌑🌑🍎🍎🌑🍎🍎🌑🌑
🌑🌑🍎🍎🌑🌑🍎🍎🌑🌑🌑🍎🌑🌑🌑🍎🍎🌑
🌑🍎🍎🌑🌑🌑🍎🍎🌑🌑🍎🍎🌑🌑🌑🍎🍎🌑
🌑🍎🍎🌑🌑🌑🍎🌑🌑🍎🍎🌑🌑🌑🌑🍎🍎🌑
🌑🍎🌑🌑🌑🌑🍎🍎🌑🍎🍎🌑🌑🌑🌑🌑🍎🌑
🌑🍎🍎🌑🌑🌑🍎🍎🍎🍎🌑🌑🌑🌑🌑🍎🍎🌑
🌑🍎🍎🌑🌑🌑🍎🍎🍎🌑🌑🌑🌑🌑🍎🍎🌑🌑
🌑🌑🍎🍎🍎🍎🍎🍎🌑🌑🌑🌑🍎🍎🍎🌑🌑🌑
🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🍎🍎🍎🌑🌑🌑🌑
🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
```
動作原理を説明していきます。
まず textimg で「あ」の画像を作ります。

```bash
$ textimg あ -o/images/0.png
```
![0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143996/9d666bfe-b6d8-2266-de15-18e17b416b54.png)

画像を imagemagick(convert) に渡して、周縁の余白をトリムして、無圧縮pbmフォーマットで出力します。

```bash
$ textimg あ|convert - -trim -compress none pbm:-
P1
18 19
1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 
1 1 1 1 1 1 0 0 1 1 1 1 1 1 1 1 1 1 
1 1 1 1 1 1 0 0 1 1 1 1 1 1 1 1 1 1 
1 1 1 0 0 0 0 0 0 1 0 1 1 0 1 0 1 1 
1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 
1 1 1 1 1 1 0 1 1 1 1 1 1 1 1 1 1 1 
1 1 1 1 1 1 0 0 1 1 1 1 1 1 1 1 1 1 
1 1 1 1 1 1 0 0 0 0 0 0 0 1 1 1 1 1 
1 1 1 1 0 0 0 0 0 1 1 0 0 0 0 1 1 1 
1 1 1 0 0 0 0 1 1 1 1 0 0 1 0 0 1 1 
1 1 0 0 1 1 0 0 1 1 1 0 1 1 1 0 0 1 
1 0 0 1 1 1 0 0 1 1 0 0 1 1 1 0 0 1 
1 0 0 1 1 1 0 1 1 0 0 1 1 1 1 0 0 1 
1 0 1 1 1 1 0 0 1 0 0 1 1 1 1 1 0 1 
1 0 0 1 1 1 0 0 0 0 1 1 1 1 1 0 0 1 
1 0 0 1 1 1 0 0 0 1 1 1 1 1 0 0 1 1 
1 1 0 0 0 0 0 0 1 1 1 1 0 0 0 1 1 1 
1 1 1 1 1 1 1 1 1 1 1 0 0 0 1 1 1 1 
1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 
```
1行目の P1 は無圧縮PBMであることを示しています。
2行目の 18 19 は、画像サイズが 18x19 であることを示してます。
あとは各ピクセルの色情報で、1が黒、0が白です。
色情報部分だけを抜き出して少し整形します。

```bash
$ textimg あ|convert - -trim -compress none pbm:-|tail -n +3|tr -d ' '
111111111111111111
111111001111111111
111111001111111111
111000000101101011
110000000000000011
111111011111111111
111111001111111111
111111000000011111
111100000110000111
111000011110010011
110011001110111001
100111001100111001
100111011001111001
101111001001111101
100111000011111001
100111000111110011
110000001111000111
111111111110001111
111111111111111111
```
tailコマンドで最初の2行を除去、trコマンドでスペースを除去しました。
1と0を色表示用の文字で置換します。

```bash
$ textimg あ|convert - -trim -compress none pbm:-|tail -n +3|tr -d ' '|sed 'y/01/🍎🌑/'
🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
🌑🌑🌑🌑🌑🌑🍎🍎🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
🌑🌑🌑🌑🌑🌑🍎🍎🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
🌑🌑🌑🍎🍎🍎🍎🍎🍎🌑🍎🌑🌑🍎🌑🍎🌑🌑
🌑🌑🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🌑🌑
🌑🌑🌑🌑🌑🌑🍎🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
🌑🌑🌑🌑🌑🌑🍎🍎🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
🌑🌑🌑🌑🌑🌑🍎🍎🍎🍎🍎🍎🍎🌑🌑🌑🌑🌑
🌑🌑🌑🌑🍎🍎🍎🍎🍎🌑🌑🍎🍎🍎🍎🌑🌑🌑
🌑🌑🌑🍎🍎🍎🍎🌑🌑🌑🌑🍎🍎🌑🍎🍎🌑🌑
🌑🌑🍎🍎🌑🌑🍎🍎🌑🌑🌑🍎🌑🌑🌑🍎🍎🌑
🌑🍎🍎🌑🌑🌑🍎🍎🌑🌑🍎🍎🌑🌑🌑🍎🍎🌑
🌑🍎🍎🌑🌑🌑🍎🌑🌑🍎🍎🌑🌑🌑🌑🍎🍎🌑
🌑🍎🌑🌑🌑🌑🍎🍎🌑🍎🍎🌑🌑🌑🌑🌑🍎🌑
🌑🍎🍎🌑🌑🌑🍎🍎🍎🍎🌑🌑🌑🌑🌑🍎🍎🌑
🌑🍎🍎🌑🌑🌑🍎🍎🍎🌑🌑🌑🌑🌑🍎🍎🌑🌑
🌑🌑🍎🍎🍎🍎🍎🍎🌑🌑🌑🌑🍎🍎🍎🌑🌑🌑
🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🍎🍎🍎🌑🌑🌑🌑
🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
```
これで文字列としては完成です。
環境によっては文字幅が違って崩れているかもしれません。
twitterのシェル芸botでは文字数制限で途中で切れてしまいます。
これらの問題は、もう一度textimgに入れて画像にすることで回避できます。

```bash
$ textimg あ|convert - -trim -compress none pbm:-|tail -n +3|tr -d ' '|sed 'y/01/🍎🌑/'|textimg -s
```
![t.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143996/f479d652-f0d7-cfec-7c3d-0ffc6b0ea204.png)
# 色の変更
上のサンプルでは背景色に🌑（新月）、文字色に🍎（りんご）を使用していますが、別の絵文字を使うことで色を変更することができます。

```bash
$ textimg あお|convert - -trim -compress none pbm:-|tail -n +3|tr -d ' '|sed 'y/01/🍈⚪/'|textimg -s
```
![t.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143996/3f641f99-7bab-2954-628b-40f9ec1cadf7.png)

```bash
$ textimg -z -F40 💩|convert - -trim -compress none pbm:-|tail -n +3|tr -d ' '|sed 'y/01/💩🌕/'|textimg -s -F10
```
![t.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143996/759bc4c5-de06-bba2-8ad5-f17238f75151.png)

# thresholdで線をきれいに
線がガタガタしているのが気になるなら、pbm出力の前にthresholdをかけるときれいになる場合があります。

```bash
$ textimg あ|convert - -trim -threshold 50% -compress none pbm:-|tail -n +3|tr -d ' '|sed 'y/01/🍎🌑/'|textimg -s
```
![t.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143996/27561ab2-3d59-0fe0-cb4b-bb8c95908cdd.png)

-threshold 50% とするとこのようになりました。
値を変えると、線の太さを変えることができます。
10%

```bash
$ textimg あ|convert - -trim -threshold 10% -compress none pbm:-|tail -n +3|tr -d ' '|sed 'y/01/🍎🌑/'|textimg -s
```
![t.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143996/c0f9cb5a-bb47-e3f3-f48b-040e54d35a91.png)

70%

```bash
$ textimg あ|convert - -trim -threshold 70% -compress none pbm:-|tail -n +3|tr -d ' '|sed 'y/01/🍎🌑/'|textimg -s
```
![t.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143996/b20565a2-2be7-4f51-6241-bb160e5b5d73.png)

# dtimgコマンド
dtimg は以上の操作を一発でやってくれるコマンドです。
https://github.com/jiro4989/scripts/blob/master/bin/dtimg

```bash
$ dtimg あ -b 🌑 -g 🍎 -R -F 20 -t 20
🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
🌑🌑🌑🌑🌑🌑🌑🍎🍎🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
🌑🌑🌑🌑🌑🌑🍎🍎🍎🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
🌑🌑🌑🌑🌑🌑🍎🍎🍎🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
🌑🌑🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🌑🌑
🌑🌑🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🌑🌑
🌑🌑🌑🌑🌑🌑🍎🍎🍎🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
🌑🌑🌑🌑🌑🌑🍎🍎🍎🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
🌑🌑🌑🌑🌑🌑🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🌑🌑🌑🌑
🌑🌑🌑🌑🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🌑🌑🌑
🌑🌑🌑🍎🍎🍎🍎🍎🍎🌑🌑🌑🍎🍎🍎🍎🍎🍎🌑🌑
🌑🌑🍎🍎🍎🍎🍎🍎🍎🌑🌑🍎🍎🍎🌑🍎🍎🍎🌑🌑
🌑🌑🍎🍎🍎🌑🍎🍎🍎🌑🌑🍎🍎🍎🌑🌑🍎🍎🌑🌑
🌑🌑🍎🍎🌑🌑🍎🍎🍎🌑🍎🍎🍎🌑🌑🌑🍎🍎🍎🌑
🌑🍎🍎🍎🌑🌑🍎🍎🍎🍎🍎🍎🌑🌑🌑🌑🍎🍎🌑🌑
🌑🌑🍎🍎🌑🌑🍎🍎🍎🍎🍎🍎🌑🌑🌑🍎🍎🍎🌑🌑
🌑🌑🍎🍎🍎🍎🍎🍎🍎🍎🍎🌑🌑🌑🍎🍎🍎🍎🌑🌑
🌑🌑🍎🍎🍎🍎🍎🍎🍎🌑🌑🌑🍎🍎🍎🍎🍎🌑🌑🌑
🌑🌑🌑🍎🍎🍎🍎🌑🌑🌑🌑🍎🍎🍎🍎🍎🌑🌑🌑🌑
🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🍎🍎🌑🌑🌑🌑🌑🌑
🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
```
シェル芸botにも入っているので活用しましょう。
次回、駅の電光掲示板再現に続きます。