見出し画像

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

@KojiSaito

　今日の #AltEdu2022 のお題は、身の回りにあるものの色でコーディングしよう！ - とのこと。

というわけで、昆虫採集ならぬ色彩採集をしなければならない。さて、どれから色を採取しようか…と思っていると、テーブルに載っていた目覚まし時計が目に入った。ちなみにこの目覚まし時計は、felio の赤色のもので、ベルが上部に付いていない時計である。なかなか可愛らしいものなので、興味のある人は検索してみると良いと思う。

　早速、色チップの作成を行う：

size(500,500)
clear()
stroke(-1,90)
x=50
fill(200, 10,  0);rect(x, 60,70,30)
fill(220,150,  0);rect(x,100,70,30)
fill( 50, 10,  0);rect(x,140,70,30)
fill(230,140,  0);rect(x,180,70,30)
fill(240,240,220);rect(x,220,70,30)
fill(200,200,200);rect(x,260,70,30)

　この色チップが良い感じなので、右下に色採集の元となった目覚まし時計を模した放射状の線を描き、様子を見たくなった：

size(500,500)
clear()
stroke(90)
C=[[200,10,0],[220,150,0],[50,10,0],[230,140,0],[240,240,220],[200,200,200]]
for i in range(6):fill(*C[i]);rect(50,60+i*40,70,30)
a=190
b=150
strokeWeight(10)
for i in range(0,62,2):
    t=i*.1;stroke(*C[int(random(6))])
    p=a*cos(t)+390;q=a*sin(t)+400
    u=b*cos(t)+390;v=b*sin(t)+400
    line(p,q,u,v)

　なかなか良い感じである。しかし、焦げ茶色がちょっと暗すぎるか。少し修正して、様子をみる。円周状のものも乱数ではなく、ぐるりと色チップの色を巡った方が良さそうだ：

size(500,500)
clear()
stroke(90)
C=[[200,10,0],[220,150,0],[90,10,0],[230,140,0],[240,240,220],[200,200,200]]
for i in range(6):fill(*C[i]);rect(50,60+i*40,70,30)
a=190
b=150
strokeWeight(10)
for i in range(0,62,2):
    t=i*.1;stroke(*C[i/2%6])
    p=a*cos(t)+390;q=a*sin(t)+400
    u=b*cos(t)+390;v=b*sin(t)+400
    line(p,q,u,v)

　素晴らしい（自画自賛）。これを #つぶやきProcessing 化してみよう。tweet 欄に貼り付けてみると、80 文字以上も多いそうだ。なので、右下の円の中心を (390,400) から (390,390) へと変更して、同じ変数が利用利用できるようにする。また、変数 p,q,u,v は line 関数中にて使用されているだけなので、そこに展開する。

size(500,500)
clear()
stroke(90)
C=[[200,10,0],[220,150,0],[90,10,0],[230,140,0],[240,240,220],[200,200,200]]
for i in range(6):fill(*C[i]);rect(50,60+i*40,70,30)
a=190
b=150
K=390
strokeWeight(10)
for i in range(0,62,2):
    t=i*.1;stroke(*C[i/2%6])
    line(a*cos(t)+K,a*sin(t)+K,b*cos(t)+K,b*sin(t)+K)

良い感じになってきたが、まだまだ文字数削減しなければならないので、配列 C をすべて展開し、配列使用時には スライスを使うように変更する。stroke(90) の効果についても、あまり大きな影響を与えているわけではないので削除してしまう：　

size(500,500)
clear()
C=[200,10,0,220,150,0,90,10,0,230,140,0,240,240,220,200,200,200]
for i in range(6):fill(*C[i*3:i*3+3]);rect(50,60+i*40,70,30)
a=190
b=150
K=390
strokeWeight(10)
for i in range(0,62,2):
    t=i*.1;stroke(*C[i/2%6*3:i/2%6*3+3])
    line(a*cos(t)+K,a*sin(t)+K,b*cos(t)+K,b*sin(t)+K)

　うーん。この調子で頑張っていっても、280文字に収められる気がしない。仕方がないので、左側に表示している色チップはバッサリと削除してしまおう。もう表示しない。そうするとかなり文字数が減るが、表現も右下の円周状のものだけになってしまう。これはちょっと寂しい。

であれば、円周状の図形の描画処理を関数化し、それを呼んでいくつかの円弧を描くようにしたらどうだろうか？

C=[200,10,0,220,150,0,90,10,0,230,140,0,240,240,220,200,200,200]
def D(a,b,u,v):
  for i in range(124):
    t=i*.05;n=int(random(6))*3
    stroke(*C[n:n+3])
    line(a*cos(t)+u,a*sin(t)+v,b*cos(t)+u,b*sin(t)+v)
size(500,500)
clear()
strokeWeight(10)
D(390,360,590,390)
D(300,290,290,600)

　ちなみに、for ループの 124 という値であるが、まず 2π ≒ 6.28 の 0.1 ラジアン刻みということで for i in range(62) とし、i*0.1 を用いて円周上に線分を配置したが、間隔が大きい感じがしたので、その半分の 0.05 ラジアン刻みで描画するため 62×2 ということで 124 という値を用いている（124×0.05=6.2）。

　これを tweet 欄に貼り付けると、インデントを削除しても 26 文字オーバー。もうひと工夫しないといけない。コードを眺めてみると、200 と 220 という値が多いことに気がつく。これらを 2 つの数値の間をとって、変数　K の値 210 で近似してしまう。

tweet 欄に貼り付けるも、まだ文字が多い。こうなったら 230, 240 という値も変数 K の値（= 210）でエイヤっと（かなり乱暴ではあるが）近似してしまう（下のコードは読みやすいようにインデントを残してある）：

K=210
C=[K,10,0,K,150,0,90,10,0,K,140,0,K,K,K,K,K,K]
def D(a,b,u,v):
  for i in range(124):
    t=i*.05;n=int(random(6))*3
    stroke(*C[n:n+3])
    line(a*cos(t)+u,a*sin(t)+v,b*cos(t)+u,b*sin(t)+v)
size(500,500)
clear()
strokeWeight(10)
D(390,360,590,390)
D(300,290,290,600)

少々色が変わっているが、まあ良しとしよう。

　まだ文字数が多い。ジェネラティブアートの文脈からすると、偶発性などを内包すべきであると思うが、今の気分は #つぶやきProcessing 化の方が強い。なので、色指定部分を、色チップの色を巡回する、決定的な式に変更する。

K=210
C=[K,10,0,K,150,0,90,10,0,K,140,0,K,K,K,K,K,K]
def D(a,b,u,v):
  for i in range(124):
    t=i*.05;n=i%6*3
    stroke(*C[n:n+3])
    line(a*cos(t)+u,a*sin(t)+v,b*cos(t)+u,b*sin(t)+v)
size(500,500)
clear()
strokeWeight(10)
D(390,360,590,390)
D(300,290,290,600)

これでもまだ 3 文字超過しているので、最後に関数 D を呼び出している部分の第 3 引数を K で置き換える。この引数は円周の中心座標の X 座標を指定するものであり、290 から 210 へと変更すると、下の方に描かれている円弧の位置が少し左にずれる。ただ、大勢には変化がないだろうと判断し、このような変更を行う。

K=210
C=[K,10,0,K,150,0,90,10,0,K,140,0,K,K,K,K,K,K]
def D(a,b,u,v):
  for i in range(124):
    t=i*.05;n=i%6*3
    stroke(*C[n:n+3])
    line(a*cos(t)+u,a*sin(t)+v,b*cos(t)+u,b*sin(t)+v)
size(500,500)
clear()
strokeWeight(10)
D(390,360,590,390)
D(300,290,K,600)

むしろこちらの方が絵としては良くなったような気がする。

　まだ 1 文字多いので、cos(t) を変数 c に、sin(t) を変数 s に代入し、それを利用することにする。これで無事、#つぶやきProcessing ならびに #AltEdu2022 タグ込みで 280 文字に収めることができた。

K=210
C=[K,10,0,K,150,0,90,10,0,K,140,0,K,K,K,K,K,K]
def D(a,b,u,v):
  for i in range(124):
    t=i*.05;n=i%6*3;c=cos(t);s=sin(t)
    stroke(*C[n:n+3])
    line(a*c+u,a*s+v,b*c+u,b*s+v)
size(500,500)
clear()
strokeWeight(10)
D(390,360,590,390)
D(300,290,K,600)


いいなと思ったら応援しよう！