見出し画像

ジェネラティブアート作成時の頭のなか #AltEdu2022 11 日目

@KojiSaito

　今日の #AltEdu2022 のお題は「『デジタル』を感じるコード」とのこと。

これも難しい。僭越ながらなかなか良いお題であると思う。デジタルといえば数字か、それともドットかワイヤーフレームか…など、様々な考えが想起される。

　このような時、私は Google の画像検索をよく活用する。「デジタル」という検索キーワードを入れて、画像検索すると様々な絵を見せてくれる。どうやら、黒い背景に青色（水色）で幾何学図形や文字・図などを描くのがデジタルのイメージらしい。

　その他のものとしては、近代的な都市を空撮した背景に、白色等で、これまた同様に幾何学図形や文字・図を描くものがある。こちらも地となる写真は青系のものが多いようだ。

　ここ最近は背景が黒っぽい作品が続いたので、今日は背景が明るい青色のものを作ろうと思う。とは言っても、つぶやきProcessing で実写のような空撮画像をつくるのも難しい。ただ、空なら作れる。

ということで、過去に作った空模様を元として、それに幾何学的な図形を上乗せする方向で作品を作ってみようと思う。

　まずはこの作品を静止画版に変更して、少し空に緑色を足す。これは、画像検索した時に出てくる空撮画像がなんとなく、もう少し緑成分が多いように感じたからだ。静止画版を作るにあたり、100 という数値を 99 にしたり、255 という数値を -1 に置き換えるなど、#つぶやきProcessing を意識した文字数削減も同時行う：

size(550,280);noStroke()
C=circle
background(99,190,255)
for i in range(15000):x=i%150;y=100-i/150;t=noise(x*.01,y*.02);x*=4;y*=3;t=pow(t,8)*8;fill(99,t*30);C(x,y,9);fill(-1,t*255);C(x-20,y-15,9)

　あとはこの背景に幾何学的な模様をのせてゆく。

size(550,280);noStroke()
C=circle
background(99,190,255)
for i in range(15000):x=i%150;y=100-i/150;t=noise(x*.01,y*.02);x*=4;y*=3;t=pow(t,8)*8;fill(99,t*30);C(x,y,9);fill(-1,t*255);C(x-20,y-15,9)

noFill();stroke(-1)
for i in range(50):
    square(random(550),random(190)+50,random(5)+5)

　こんな感じなのかな？と思いつつ、雲の影部分が暗すぎるし、背景としての青空が明るすぎる。なので、この部分の調整を行う：

size(550,280);noStroke()
C=circle
background(80,170,230)
for i in range(15000):x=i%150;y=100-i/150;t=noise(x*.01,y*.02);x*=4;y*=3;t=pow(t,8)*8;fill(150,t*30);C(x,y,9);fill(-1,t*255);C(x-20,y-15,9)

noFill();stroke(-1)
for i in range(50):
    square(random(550),random(190)+50,random(5)+5)

うん。良い感じになってきた。あとは正方形の散らばり具合が微妙なので、それを調整する。乱数なので当たり前であるが、集中してしまう部分が出ている。この辺りをどうするか。横方向は間隔を明けつつ描画したらどうだろうか？ついでに雲も白すぎるので調整する：

　正方形がちょっと見づらいので、ランダムに太さを変えるコードを追加してみる：

size(550,280);noStroke()
C=circle
background(80,170,230)
for i in range(15000):x=i%150;y=100-i/150;t=noise(x*.01,y*.02);x*=4;y*=3;t=pow(t,8)*8;fill(150,t*30);C(x,y,9);fill(230,t*255);C(x-20,y-15,9)

noFill();stroke(-1)
x=0
for i in range(50):
    x+=random(20)+10
    strokeWeight(random(1)+1)
    square(x,random(190)+50,random(7)+5)

　…デジタルを感じる画像かどうかは微妙であるが、絵としてはなんとなく良い感じなので、今日はこの作品を #つぶやきProcessing として発表したいと思う。インデントを削除しつつ、random 関数が多く使われているので、それを変数 R に代入し使用することとする：

size(550,280);noStroke()
C=circle
background(80,170,230)
for i in range(15000):x=i%150;y=100-i/150;t=noise(x*.01,y*.02);x*=4;y*=3;t=pow(t,8)*8;fill(150,t*30);C(x,y,9);fill(230,t*255);C(x-20,y-15,9)
noFill();stroke(-1)
R=random
x=0
for i in range(50):x+=R(20)+10;strokeWeight(R(1)+1);square(x,R(190)+50,R(7)+5)

　タグを含めて 61 文字超過である。150 という値が何箇所かで使用されているので、変数 K に 150 を代入しておき、K で置き換える。最初のループは 15000 以上繰り返しを実施すれば十分なので、ここも K*K で置き換える。

size(550,280);noStroke()
C=circle
background(80,170,230)
K=150
for i in range(K*K):x=i%K;y=100-i/K;t=noise(x*.01,y*.02);x*=4;y*=3;t=pow(t,8)*8;fill(K,t*30);C(x,y,9);fill(230,t*255);C(x-20,y-15,9)
noFill();stroke(-1)
R=random
x=0
for i in range(50):x+=R(20)+10;strokeWeight(R(1)+1);square(x,R(190)+50,R(7)+5)

まだまだ文字数が多い。

　仕方がないので、雲の描画部分を簡略化する。このアルゴリズムでは、雲の影部分を先に描き、少しずらして明るい部分を描いている。この方法により雲の厚みを表現しているのだが、それをやめて、1 つの円の描画のみで簡易的に厚みを表現んすることにする。

具体的には円を描く時に乱数で明るさを変動させ、それにより厚みをシミュレーションしようというものである。ちなみに、影部分の処理は下のコードでコメントされている部分なので、もし雲の描画に興味のある人は参考にして欲しい：

size(550,280);noStroke()
C=circle
background(80,170,230)
K=150
R=random
for i in range(K*K):
    x=i%K;y=100-i/K;t=noise(x*.01,y*.02);x*=4;y*=3;t=pow(t,8)*8;
    #fill (K,t*30);C(x,y,9);
    fill(R(10)+220,t*255);C(x-20,y-15,9)
noFill();stroke(-1)
x=0
for i in range(50):
    x+=R(20)+10;
    strokeWeight(R(1)+1);
    square(x,R(190)+50,R(7)+5)

　乱数での変動は気休め程度かもしれない。なので、文字数削減のため、この処理はやめよう（削除する）。あと x*=4 と y*=3 も、最早それぞれの変数は 1 箇所でしか使用されていないので、使用部分にて直接計算するよう変更する。これでもまだ文字数超過してるので、仕方がないので strokeWeight 部分を削除する。

size(550,280);noStroke()
C=circle
background(80,170,230)
K=150
R=random
for i in range(K*K):x=i%K;y=100-i/K;t=noise(x*.01,y*.02);t=pow(t,8)*8;fill(220,t*200);C(x*4-20,y*3-15,9)
noFill();stroke(-1);x=0
for i in range(50):x+=R(20)+10;square(x,R(190)+50,R(7)+5)

　なんだか微妙な絵になってしまったが、仕方がない。まだ 10 文字多いので、さらにコードを見直す。今や circle 関数は 1 箇所でしか使用されていないので、変数 C への代入をやめる。100 と書かれている部分を 99 にする（これで 1 文字削減できる）。10 と書かれている部分も 9 にする。circle 関数における x と y 座標のシフトは重ね描きのための処理なので、もはや不要。なので削除する。ここまで頑張って、ようやく 280 文字に収めることができた（やれやれ）。

　無事 #つぶやきProcessing 化することはできたけれども、やはり絵としては strokeWeight で線の太さを変動させている方が魅力的である…と思う。雲の影も有ったほうがよいし。

というわけで、この記事のタイトル画像はそちらを用いることとして、今日の note は終わりにしようと思う。

この記事が気に入ったらサポートをしてみませんか？