23
19

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-01-03

はじめに

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

実行画面

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

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を楽しみましょう!

23
19
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
23
19

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?