はじめに
このページでは和柄のひとつである亀甲模様を描いた以下の作品について説明します。
#つぶやきProcessing
— Koji Saito (@KojiSaito) July 22, 2020
R=range
W=strokeWeight
S=stroke
size(500,500)
noFill()
W(5)
S(250,100,55)
background(-9)
u=13;v=7.5
for i in R(8<<8):
y=i/100;x=(i%100-1)*26-(y%2)*u;y*=22.5;p=[x-u,y+v,x,y,x+u,y+v,x+u,y+22.5]
for i in R(3):line(*p[i*2:i*2+4])
W(150);S(-1);circle(250,250,600) pic.twitter.com/FP8S23kdb8
この時期は、いくつか和柄をテーマとして作品を作ったのですが、 大体、あるパターンを水平方向にずらしながら描画する、 という仕組みで構成されています。
擬似コードで書くと例えば次のようになります：
for y in range(...)
for x in range(...)
drawMain(...) # y が奇数行なら、ずらして描画処理
以下、この辺りの話を含めて解説していきます。
ソースコード
清書版のソースコードは以下の通りです：
size(500,500)
noFill()
strokeWeight(5)
stroke(250,100,55)
background(-9)
u=13
v=7.5
for i in range(100*100):
y=i/100
x=(i%100-1)*26-(y%2)*u
y*=22.5
p=[x-u,y+v,x,y,x+u,y+v,x+u,y+22.5]
for i in range(3):
line(*p[i*2:i*2+4])
# 県警領域のみを残す
strokeWeight(150)
stroke(255)
circle(250,250,600)
描画処理の主な部分 line 関数を呼んでいるところが まだ圧縮されています。
for i in range(3):
line(*p[i*2:i*2+4])
という部分は line 関数の引数として、p の要素を 2 つづつ 4 個分だけ描画する、という意味になります。 ループを開く（ループをアンロールさせてみると）
line(*p[0,4])
line(*p[2,6])
line(*p[4,8])
となります。 p の要素をみてみると、これは
# p=[x-u,y+v,x,y,x+u,y+v,x+u,y+22.5]
line(x-u,y+v,x, y ) # line(*p[0,4])
line(x, y, x+u,y+v ) # line(*p[2,6])
line(x+u,y+v,x+u,y+22.5) # line(*p[4,8])
というコードと等価であることが分かります。
亀甲模様は六角形により構成される模様です。 このプログラムでは、座標 (x,y) は六角形の一番上の頂点の座標を示しています。 六角形の頂点を、
上
左上 右上
左下 右下
下
と表現するとしましょう。
すると、最初の line 関数は上から左下へ線を引いていることが分かります。 次の line 関数は上から右上へ線を引き、 最後の line 関数は右上から右下へ線を引いていることが分かります。
つまり、
／＼
｜
という形を描いていることになります。
この図形を横に並べて書くと、
／＼／＼／＼／＼
｜ ｜ ｜ ｜
となり、六角形の下の部分以外が構成できることが分かると思います。
あとは冒頭で示したように、y 座標の値（これは描画の時の値ではなく、 y=0,1,2, … ,99 で示される値）に応じて、偶数・奇数で六角形の半分の大きさだけ ずらせば OK です。
その部分の処理を行っているのは、
x=(i%100-1)*26-(y%2)*u
であり、y%2 で y が奇数のときのみ x の値を u だけ減じています。
このずれた部分を組み合わせると六角形が完成となります。 あとは円形領域のみを描画する処理を実施して、 作品は完成です。
円形領域のみに描画する方法は、 円形領域に描画する方法 というページに解説を書きましたので、 こちらもあわせてご覧ください。
まとめ
このページでは、和柄の亀甲模様を描くプログラムについて説明しました。 亀甲模様は六角形の集合により構成される作品ですが、 つぶやき Processing で発表するため、 完全なる六角形を描画するのではなく、 六角形のパーツである、左上 - 上、上 - 右上、右上 - 右下、という 3 つの直線を描画し、 これらを組み合わせることで六角形の集合を構成するようにしている様子を説明しました。
@KojiSaito https://twitter.com/KojiSaito では、 様々な作品を つぶやき Processing で発表していますので、 もし良かったらフォローしてみて下さい