【Processing】shader()の使い方【絵をカラフルにしたり、動かしたりする】

2024年11月19日

URLをコピーしました！

ワタタク

今回の記事の目的はProcessingの「shader()」を理解し、自分なりに使ってみること。

この記事を書いた人

ワタタク

プロフィール

クリエイティブコーディングで制作した作品と、上達のためにやったこと・学習過程を発信
コンセプトは「クリエイティブコーディング1万時間の歩き方」
2024年にProcessingの構文のアウトプットを終え、2025年から作品制作開始（クリエイティブコーディングで作成した作品集）

記事内のProcessingのバージョンは4.3。

【Processing】shader()について

shader()について

Shaderは「影をつける人」という意味
shader()は、絵をカラフルにしたり、動かしたりする
- 例えば水が波打っているように見せたり、光がピカピカ光るように見せることができるみたい
  - glslの勉強が必要

【Processing】shader()の使い方【画像とコード】

画面全体に時間とともに変わる輝く効果。

応用することで、水が波打ってるように見えるのもできそうではある。

glslに書いたこと。

// glow.glsl
#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif

uniform vec2 resolution;
uniform float time;

void main() {
  vec2 st = gl_FragCoord.xy / resolution;
  vec3 color = vec3(0.0);
  float glow = sin(time * 2.0 + st.x * 10.0) * 0.5 + 0.5;
  color = vec3(glow, glow, glow);

  gl_FragColor = vec4(color, 1.0);
}

PShader shader;  // Shaderオブジェクトを作成

void setup() {
  size(640, 480, P2D);  // キャンバスのサイズを設定し、2Dモードを有効にする
  shader = loadShader("glow.glsl");  // "glow.glsl"という名前のシェーダーファイルを読み込む
  shader.set("resolution", float(width), float(height));  // シェーダーにキャンバスの解像度を設定
}

void draw() {
  shader.set("time", millis() / 1000.0);  // シェーダーに経過時間を秒単位で設定
  shader(shader);  // 読み込んだシェーダーを適用
  rect(0, 0, width, height);  // キャンバス全体に四角形を描画
}