見出し画像

Processing.pyでアート #9 TricoloredVortex

Twitterで反応拡散方程式?というもので作ったらしいアートが流れてきて、私もやってみたいなぁと作ってみたもの。

最近シェーダーを触っていたので、せっかくなのでシェーダーで挑戦。画面のR, G, B値を反応拡散方程式に入れて解きます。

反応拡散系としてはかなりシンプルで、三色が交わると渦になります。

マウスで線を引く部分をProcessingで、反応拡散方程式を解く部分をGLSLで書きました。
ProcessingとGLSLがそれぞれの得意分野を担当してるので、コードはかなりシンプル。

まずProcessingのコードがこちら。

def setup():
    size(400, 400, P2D)
    colorMode(HSB, 360, 100, 100,100)
    background(0)

    global sh, c
    sh = loadShader("shader.frag")
    c = 0
        
def draw():
    filter(sh)
    if mousePressed:
        noFill()
        strokeWeight(20)
        stroke(c%360, 100, 100)
        line(mouseX, mouseY, pmouseX, pmouseY)
    

def mouseReleased():
    global c
    c+=120

shader.fragに書いたGLSLがこちら。
驚きの短さ。ベクトル演算が各成分に適用されるのが強みですね。

uniform vec2 resolution;
uniform sampler2D texture;

float dx = 1.5/resolution.x;
float dy = 1.5/resolution.y;
float C = 0.2;
float S = 0.05;

void main() {
  vec2 uv = gl_FragCoord.xy / resolution;

  vec4 p0 = texture2D(texture, uv);
  vec4 p1 = texture2D(texture, fract(uv + vec2(+dx, 0)));
  vec4 p2 = texture2D(texture, fract(uv + vec2(-dx, 0)));
  vec4 p3 = texture2D(texture, fract(uv + vec2(0, +dy)));
  vec4 p4 = texture2D(texture, fract(uv + vec2(0, -dy)));

  gl_FragColor = p0 + C*(p1+p2+p3+p4-4*p0) + S*(p0-p0.gbra);
}

方程式の係数C, Sの値を変えてみたり、Processingであらかじめ書いておいた模様を変化させるのも楽しい。


この記事が気に入ったらサポートをしてみませんか?