ProcessingでGLSLシェーダーを始めるサンプルコード(Java, Pythonどちらでも)

はじめに

プログラミング初心者の方でも簡単に始められるツールProcessing（プロセッシング）で、フラグメントシェーダーを実行できます。JavaでもPythonでも書けます。

実行画面

左がJavaのコード、右がPythonのコードです。

Javaで書きたいとき

実装

まずはシェーダーの中身を書いたプログラムをdataフォルダの中に置きます。

data/FragmentShader.glsl

uniform vec2 resolution;
uniform float time;

void main() {
    vec2 uv = -1. + 2. * gl_FragCoord.xy / resolution.xy;
    gl_FragColor = vec4(
                        abs( sin( cos( time + 3. * uv.y ) * 2. * uv.x + time)),
                        abs( cos( sin( time + 2. * uv.x ) * 3. * uv.y + time)),
                        1.0,
                        1.0);
}

Processing本体プログラムには以下のように書きます。FragmentShader.glslとファイル名を指定するだけでdataフォルダの中を探しに行ってくれます。

PShader sd;

void setup() {
  size(600, 600, P2D);
  sd = loadShader("FragmentShader.glsl");
}

void draw() {
  sd.set("time", millis() / 1000.0);
  sd.set("resolution", (float)width, (float)height);  
  shader(sd);
  rect(0, 0, width, height);
}

Pythonで書きたいとき

Pythonモードのインストール

デフォルトでは右上の言語設定がJavaしか選択できませんが、
簡単にPythonモードを追加することができます。

(こちらのリンクが画像付きで分かりやすいです)
https://pycarnival.com/processingpy1/

実装

同じようにdataフォルダの中にJavaの時と全く同じシェーダーファイルを置いて

data/FragmentShader.glsl

uniform vec2 resolution;
uniform float time;

void main() {
    vec2 uv = -1. + 2. * gl_FragCoord.xy / resolution.xy;
    gl_FragColor = vec4(
                        abs( sin( cos( time + 3. * uv.y ) * 2. * uv.x + time)),
                        abs( cos( sin( time + 2. * uv.x ) * 3. * uv.y + time)),
                        1.0,
                        1.0);
}

Processing本体プログラムには以下のように書きます。
global sdを変数を宣言しておくことで、setup関数でもdraw関数でも、同じシェーダーオブジェクトを参照することができます。

def setup():
    global sd
    size(600, 600, P2D)
    sd = loadShader("FragmentShader.glsl")

def draw():
    global sd
    sd.set("time", millis() / 1000.0)
    sd.set("resolution", float(width), float(height))  
    shader(sd)
    rect(0, 0, width, height)

以上、ProcessingでJavaでもPythonでもGLSLを楽しみましょう！