円形領域に描画する方法

はじめに

 図形を丸型の領域に描く表現は、なんとなく柔らかな雰囲気になることもあり、 アニメのアイキャッチやゲームなど、さまざまなところで使われています。

このように、特定の領域にのみ描画をする場合、 リアルタイム CG ではステンシルバッファを、 画像合成の場合には乗算処理などを利用します。

ステンシルバッファの説明: マイクロソフトによるステンシルバッファの説明

乗算処理によるマスキング:

 こちらについては、そのものずばりを説明しているサイトが見つかりませんでした (良いサイトを知っている方はご連絡下さい)。 node base composition のテキストブックなどを読むと、 ここで言わんとしていることが分かるかと思いますが、 長くなるのでここでは省略します。

 このページで紹介する方法は、これらの方法とは全く異なる方法で制限もあります。 でも、以下のような作品程度であれば対応可能です。

提案手法の仕組み

 この作品のソースコード(清書版)は以下の通りです:

def D(x,y):
    t=5
    for i in range(5):
        strokeWeight(t)
        circle(x,y,(5-i)*28)
        t=int(random(5))+2

size(500,500)
fill(30,80,255)
stroke(-1)

for i in range(100):
    y=i/5
    D((i%5)*120-(y%2)*60,y*32)
    
# hollow out by circular region
noFill()
strokeWeight(120)
circle(250,250,590)

円形にくり抜いている処理は、最後から 3 行に書かれている

# hollow out by circular region
noFill()
strokeWeight(120)
circle(250,250,590)

という部分です。

 ここで何をやっているのかと言えば、 背景色と同じ白色の太い輪郭線をもった、塗りつぶしをしない円を描いているだけです。

つまり、円領域にのみ描画するのではなく、 円領域以外を背景色で塗りつぶしているだけです。 もっとも、単なる円周を太線で描いているだけなので、 この説明も厳密にいえば正確ではありません。

しかし、描画領域である 500 x 500 ピクセルにのみ着目すれば、 結果として「円領域以外を背景色で塗りつぶしている」こととなります。

利点と欠点

 この方法の利点は、単に円周を描くだけであるので ステンシルバッファや画像処理などのマスク処理機能が備わっていない環境でも 使用できるところです。

 一方、欠点としては太い輪郭線を描いているだけなので、 Processing にて複数の円領域を描く場合は、 画素の保存や保存した画素情報の描画など、 工夫をしなければなりません。

また、近接した円領域への描画も おそらく Processing では出来ないのではないかと思っています。

まとめ

 このように制限もある方法ですが、 それでも円領域に描画したかのような表現が可能となります。 使えるシーンは限られるとは思いますが、 Processing の表現力として、円領域への描画がある意味可能であることを 示していることにも他なりませんので、 この方法で十分に足りる場合には活用して頂ければ幸いです。