立体感を出す方法(基礎)

はじめに

　このページでは、以下の作品をベースとして立体感を出す方法について説明します。

#つぶやきProcessing

def setup():size(500,500);background(-9)
R=random
def F():t=R(7);r=R(200);return r*cos(t)+250,r*sin(t)+250
def draw():
for i in [0]*3:x1,y1=F();x2,y2=F();stroke(9);line(x1+1,y1+1,x2+1,y2+1);stroke(156+R(99),210,99);line(x1,y1,x2,y2)#dailycodingchallenge pic.twitter.com/KkWWyOUZ3N

— Koji Saito (@KojiSaito) June 25, 2020

この作品は、藁や松葉のような細い植物のようなものが 重なっていく様子をモチーフとして作成しました。

　こちらの作品も全プログラムリストを 1 ツィートに収める、 つぶやき Processing という活動にて発表しているので、 ソースコードが圧縮されています。

そのため、まずは圧縮前のソースコードを示し、 その後、線状の物体に立体感を与える工夫について説明します。

ソースコード

　清書したソースコードは以下の通りです：

def setup():
    size(500,500)
    background(-9)
    
def getRandomPositionInCircle():
    t=random(7)
    r=random(200)
    return r*cos(t)+250,r*sin(t)+250

def draw():
    for i in range(3):
        x1,y1=getRandomPositionInCircle()
        x2,y2=getRandomPositionInCircle()
        
        # shadow
        stroke(9)
        line(x1+1,y1+1,x2+1,y2+1)
        
        # body
        stroke(156+random(99),210,99)
        line(x1,y1,x2,y2)

　簡単なプログラムなので、読めば分かると思いますが、ざっと解説します。 関数 getRandomPositionInCircle は、座標 (250,250) を中心とする 半径 200 の円内のランダムな座標をひとつ返します。 この関数を 2 回呼び出すことにより、直線の始点 (x1,y1) と 終点 (x2,y2) を決めています。

立体感を出す方法

　このプログラムでは立体感を出すために影を描いています。 具体的には、座標 (x1,y1) と (x2,y2) とを結ぶ直線 L に対し、 その右下に濃い灰色の線を描いています。

影が本体 L の上に描かれるとまずいので、 まず影部分を line(x1+1,y1+1,x2+1,y2+1) として描き、 次に色を設定して直線 L を描いています。

　今回はプログラムを圧縮する関係上、 影の色を stroke(9) として単色の灰色 (輝度 9/255 の灰色）として描いていまうが、 これだけでも随分と立体感が出てきます。

興味のある人は影部分の描画処理をコメントアウトして プログラムを実行してみて下さい。

発展

　現実世界を良く観察すれば、 実際には α 値も指定して半透明の色を置くべきなのかもしれません。 また、影 (shadow) ではなく、陰 (shade) を描くという方法もあるかもしれません。 この場合は、ランダムで決めている色を変数に保存しておき、 それらを用いて少し輝度の下がった色を陰の色として使用するといった方法が考えられます。

　このあたりは絵を描く場合と同様であり、 プログラムによる表現だからといって何か特別なことがあるわけではありません。 自分が絵の具で描く場合はどうするかーという視点に立つと理解がすすむと思います。