【Processing】中心に集まるなにか。curveVertexを使って線を引いてみた。

Processing

こんにちは、たやち(tayati369)です。

日々ちょっとずつProcessingでコーディングしています。

前回は「ネオン感溢れるカワイイTile」に挑戦した記事を書いておりますので、よければそちらも御覧ください。

今回は、スライムにインスピレーションを得て、中心にだんだんと集まってくるスライムのようなものを表現してみようと思い作りました。

beginShape()、curveVertex()、endShape()を利用することで滑らかな線を引くとともに、noiseによってランダムな形を作り上げています。

簡単な内容となりますが、考えていたことが形にできるようになってきているのではとほんの少しだけ成長を感じています。

では、Processingのイメージとコードを公開しておきます。

イメージ

サンプルコード

import time

n = 3

def setup():
    pixelDensity(displayDensity())
    size(600, 600)
    colorMode(HSB, 360, 100, 100, 100)
    background(0, 0, 0, 100)
    noLoop()
    
def draw():
    global cnt, a
    # noStroke()
    for i in range(0, 4 * n, 1):
        beginShape()
        r = 100
        x = width/2 + r * cos(radians(map(i, 0, 4 * n, -180, 180)))
        y = height/2 + r * sin(radians(map(i, 0, 4 * n, -180, 180)))
        nx = noise(i, x/10)
        ny = noise(i, y/10)
        fill(random(260, 360)*nx*ny, 100, 100, 100)
        if 0 <= i <= n - 1:
            curveVertex((-200+(x + i * width/2)/2) * nx, y/2)
            curveVertex((i * width/2), 0)
            curveVertex(x, y)
            curveVertex((300 + i * width/2), 0)
            curveVertex((x + 300 + i * width/2)/2 * nx, y/2)
        elif   n - 1 < i <= n * 2 -1:
            curveVertex(width/2, (y + (i - n) * height/2)/2*ny)
            curveVertex(width, (i - n) * height/2)
            curveVertex(x, y)
            curveVertex(width, (300 + (i - n) * height/2))
            curveVertex(width/2, (y + 300 + (i - n) * height/2)/2*ny)
        elif  n * 2 - 1 < i <= n * 3 - 1:
            curveVertex((x + 300 + (i - n*2) * width/2)/2 * nx, height/2)
            curveVertex((300 + (i - n*2) * width/2), height)
            curveVertex(x, y)
            curveVertex(((i - n*2) * width/2), height)
            curveVertex(((x + (i - n*2) * width/2)/2) * nx, height/2)
        else:
            curveVertex(width/2, (y + 300 + (i - n*3) * height/2)/2 * ny)
            curveVertex(0, (300 + (i - n*3) * height/2-200))
            curveVertex(x, y)
            curveVertex(0, ((i - n*3) * height/2 - 200))
            curveVertex(width/2, (x + (i - n*3) * height/2)/2 * ny)
        endShape()
   save('img'+dt()+'.jpg')

def dt():
    dt = str(time.time())
    return dt

最後に

curvevertex()関数を完全に理解しているわけではないので、完全に思い描いていた形にするということが出来ないのが課題だなと感じました。

curvevertexをマスターすることができれば、ぬめぬめした滑らかな動きのある作品を自由自在に作れるようになるのではないかと想像しているので、今後理解を深めていきたいと思います。

作品を作るためのインスピレーションをどこから作るかも今後の課題です。これからジェネラティブアーティストの方や、Processing/P5.jsなどを使っている方の作品を見て、目を養うことも必要だなと感じています。

ではでは、最後までご覧いただきありがとうございます。

さようなら〜〜〜。

なにかあればTwitterまで。

コメント

  1. […] 前回は「中心に集まるなにか。curveVertexを使って線を引いてみた。」に挑戦した記事を書いておりますので、よければそちらも御覧ください。 […]

タイトルとURLをコピーしました