猫バスを作る（2020.03.31）

2020/06/06 in つぶやきPROCESSING
python processing プログラミングジェネラティブアートアニメ
3 min read

Table of Content

はじめに

　このページでは、「猫バス」をイメージして作った作品の解説を行っていきます。まずは「猫バス」として作った作品を以下に示します：

#つぶやきProcessing 猫バス
def setup():size(500,500);noStroke()
C=circle
def draw():
clear();f=frameCount*.1;x=noise(f);y=noise(f+1);v=noise(f,1)*.1;
for i in range(30):fill(255,200-i*5);s=(x+x*i*.1)*80+120;t=(y+v*i)*120+250;r=10+i*5;C(s,t,r);C(s+40+2*i,t,r*.9)
filter(BLUR,3) pic.twitter.com/fJ5K1TWTSg
— Koji Saito (@KojiSaito) March 31, 2020

　ここで言う猫バスとは、もちろんジブリ映画のトトロにでてくる、あの猫バスです。どうでしょうか？颯爽と走る猫バスが見えてきたのであれば、嬉しいです。

解説

まずは 1 灯から

　この作品は、次の「懐中電灯」という作品の発展型です。

#つぶやきProcessing #昼休みCoding 懐中電灯
def setup():size(500,500);noStroke()
def draw():
clear();f=frameCount*.1;x=noise(f);y=noise(f+.2)
u=noise(f,.3)*.1;v=noise(.4,.5,f)*.1;
for i in range(30):fill(255,200-i*5);circle((x+u*i)*80+120,(y+v*i)*120+250,10+i*5)
filter(BLUR,3) pic.twitter.com/phodm2tBT3
— Koji Saito (@KojiSaito) March 31, 2020

　清書したソースコードを以下に示します：

def setup():
    size(500,500)
    noStroke()

def draw():
    clear()
    f=frameCount*.1

    # 光の初期値＝懐中電灯の位置
    x=noise(f); y=noise(f+.2)

    # lifht shaft の方向
    u=noise(f,.3)*.1; v=noise(.4,.5,f)*.1;

    # 描画処理
    for i in range(30):
        fill(255,200-i*5)
        circle((x+u*i)*80+120,(y+v*i)*120+250,10+i*5)
    filter(BLUR,3)

おおよその処理はソースコード中のコメントで分かるかと思いますが、要は、適当に位置 (x,y) を決めて、同様に適当に決めた方向 (u,v) に向けて、円を描いていきます。

このとき、ライトシャフトの先の方（ループカウンタである変数 i が大きい方）では、できるだけ透明度を高く（＝不透明度である α 値を少なく）するように処理しています（fill 関数の第 2 引数である 200-i*5 の部分）。

また同様に、ライトシャフトの先の方ではより大きな円を描くように、半径（＝circle 関数の第 3 引数）も i の値が大きくなれば比例して大きくなるよう 10+i*5 として計算しています。

猫バスへ

　以上が基本的な処理で、猫バスはこれを 2 つ描画しています。

def setup():
    size(500,500)
    noStroke()

C=circle

def draw():
    clear()
    f=frameCount*.1

    x=noise(f); y=noise(f+1)

    v=noise(f,1)*.1;
    for i in range(30):
        fill(255,200-i*5)
        s=(x+x*i*.1)*80+120
        t=(y+v*i)*120+250
        r=10+i*5
        C(s,t,r) # 左側のライトシャフト
        C(s+40+2*i,t,r*.9) # 右側のライトシャフト
 filter(BLUR,3)

1 灯だけの処理よりも、 2 つのライトシャフトを描画するにはより多くの文字数が必要となります。

そのため、猫バスのソースコードは文字数削減のため工夫をしています。

まず、2 つのライトシャフトの縦方向（y 軸方向）の描画は同じ位置になるので、猫バス版でも変数 v は基本的には同じです。実際の処理では、ノイズの値が異なりますが、ライトシャフトの y 軸方向の増減に関与するという意味では同じです。

実際にライトシャフトを描画する部分では、変数 t を用いてその値を決定しています。懐中電灯版と異なるのは、微調整をした結果だったと思います。

　横方向はライトシャフトの位置により、ずらしていかなければなりません。そのため、s という変数を左側のライトシャフトの位置として定義し、右側の位置はそれを少しずらした s+40+2*i という式にて横方向の位置を決めています。

基本的には右側のライトシャフトは左側のものより 40 ピクセル並行移動したものですが、単に描画する円の中心を並行移動するだけだとライトがある場所に集中するような表現になってしまいますので、ライトシャフトの先になればなるほど左側にずれるような工夫をしています。

この +2*i の効果を知りたい人は、C(s+40,t,r*.9) として実行してみて下さい。

　最後、右側のライトシャフトの方が少し奥にあるように表現するため、右側のライトシャフトに関する円の描画では、半径を 90% にするよう工夫しています（r*.9 の部分がそうです）。

　とまあ、懐中電灯から猫バスへの変化は、単に 2 つにしただけではなく、表現を考慮して、いくつか工夫をしていることが分かっていただけたかと思います。

このようなちょっとした工夫を追加すると、ぐっと表現力が上がるのもジェネラティブアートの面白いところだと思います。