じわじわ広がる星型模様シェル芸

はじめに

この記事は、じわじわ広がる星型模様と、それをつくるシェル芸について解説します。

じわじわ広がる星型模様シェル芸とは何か？

これ。

https://t.co/6kIaYqQ0EQ pic.twitter.com/mXzyKEokhy

— シェル芸bot (@minyoruminyon) January 6, 2020

 トゲがたくさんある星型が、中心からじわじわとたくさん生み出されて外側へ広がっていくアニメです。 imagemagick と opy を使っています。 さて、実はこれ、直角回転4コマアニメなんですよ。 # 直角回転4コマアニメとは何か？ 直角回転4コマアニメっていうのはさっき考えた名前なんですけど、 「一つの画像を90°ずつ回転した4枚の画像をループしているだけなのに、一見そうは見えないアニメ」 のことです。 一つの画像を90°ずつ回転した4枚の画像をループすると、普通どうなるかと言うと、 まず正方形画像をこんな風に作って

$ convert logo: -scale 200x200! a.png

90°ずつ回転した4枚の画像にして

$ convert logo: -scale 200x200! -write a.png -rotate 90 -write b.png -rotate 90 -write c.png -rotate 90 d.png

ループアニメにすると

$ convert logo: -scale 200x200! \( +clone -rotate 90 \) \( +clone -rotate 90 \) \( +clone -rotate 90 \) -loop 0 /images/x.gif

こんなふうになりますね。
これは見るからに「一つの画像を90°ずつ回転した4枚の画像をループしているだけ」です。
いっぽう、今回作ろうとしている

これは、一見そうは見えませんよね（見えたらすいません）？
というわけで、これは直角回転4コマアニメなんです。

作り方

作ってみましょう。
コマンドはこうです。

seq 500|opy '[F1*5,math.pi*7/6*F1]'|opy '[300+F1*math.cos(F2),300+F1*math.sin(F2)]'|tr " \\n" ", "|xargs -I@ convert xc:white[600x600] -fill none -stroke black -strokewidth 1 -draw 'polyline @' \( +clone -rotate 90 \) \( +clone -rotate 90 \) \( +clone -rotate 90 \) /images/x.gif

これで /images/x.gif にアニメが書き込まれます。

コマンド解説

コマンドの後ろのほう、さっきの imagemagick のロゴを回転させたときのコマンドと同じ

\( +clone -rotate 90 \) \( +clone -rotate 90 \) \( +clone -rotate 90 \)

というくだりがありますね。
これは、イメージシーケンスの最後にある画像をコピーして90°回転してイメージシーケンスの最後に置くという処理を3回やっています。
つまりこれの前にある1枚の画像を90°ずつ回転して並べているわけです。
で、最後に /image/x.gif に4コマアニメとして書き込んでいます。
元になった1枚の画像は、

seq 500|opy '[F1*5,math.pi*7/6*F1]'|opy '[300+F1*math.cos(F2),300+F1*math.sin(F2)]'|tr " \\n" ", "|xargs -I@ convert xc:white[600x600] -fill none -stroke black -st。rokewidth 1 -draw 'polyline @' x.png

こういう画像です。
この画像の意味を理解するために、ひとつステップを踏みましょう。
1個めの opy の引数を変えます。
math.pi*7/6*F1 というところを、 math.pi*2/5*F1 に変えてみます。

$ seq 500|opy '[F1*5,math.pi*2/5*F1]'|opy '[300+F1*math.cos(F2),300+F1*math.sin(F2)]'|tr " \\n" ", "|xargs -I@ convert xc:white[600x600] -fill none -stroke black -strokewidth 1 -draw 'polyline @' x.png

こうなります。
これは何をしているかというと、seq 500で1から500の整数を出して、
次のopy '[F1*5, math.pi*2/5*F1]'で、1列目に5倍、2列目に2π/5倍の数値を出します。
その次のopy '[300+F1*math.cos(F2),300+F1*math.sin(F2)]'で
直行座標系で(300, 300)の点を中心とした極座標にしています。
動径が5ずつ、偏角が2π/5ずつ増えていく点の列になります。
そして残りのtr " \\n" ", "|xargs -I@ convert xc:white[600x600] -fill none -stroke black -strokewidth 1 -draw 'polyline @' x.png
で、点の列を折れ線で結んで x.png に書き込みます。
偏角が2π/5ずつ増えるので、正五角形が徐々に膨らんでいくような渦巻きになるわけです。
math.pi*2/5*F1 としたところを、 math.pi*7/6*F1に戻すと、

こういう十二角形が徐々に膨らんでいくような渦巻きになって、

こうなります。
で、頂点が一つ進むたびに、7π/6ずつ回転しながら中心から離れていっているので、
ある頂点P(n)に注目すると、逆に頂点を3個さかのぼったP(n-3)は-21π/6の方向、
つまり2周逆回りして、90°進んだ方向にあります。
で、P(n-3)はP(n)よりもちょっと中心に近くにあります。
画像を90°回転させると、P(n-3)があった方向の、P(n-3)があったところよりも
ちょっと中心から遠いところに、P(n)が回ってくることになります。
これを4回繰り返すと、十二角形渦巻きの、一回り外側へ進みます。
そういうわけで4コマのループでじわじわ広がる模様に見えるようになります。
めでたしめでたし。

まとめ

opyとimagemagickを使ったシェル芸で、直角回転4コマアニメの一種である、
じわじわ広がる星型模様を作ることができました。

所感

この記事を書き始める時点では、自分でもなんでじわじわ広がっているように見えているのか
わかってなかったんですけど、書きながら「そうか3つもどった頂点が90°進んでるんだ」
っていうのがわかって良かったです。