ワタタク
今回の記事の目的はProcessingの「shader()
」を理解し、自分なりに使ってみること。
目次
【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); // キャンバス全体に四角形を描画
}
【Processing】shader()を使ってみた感想
僕は写真が好きで、画像編集をしたいのでglslを学びたいと思い始めた。
Processingとglslを使って自分の作風をつくりたい。
それでは今日もレッツワクワクコーディング。