ワタタク今回の記事の目的はProcessingの「shader()」を理解し、自分なりに使ってみること。
この記事を書いた人
上達の研究家 / アーティスト
「才能」ではなく「論理（システム）」で、人の心を動かす機能するアートを探究中
【文系・36歳・未経験】から独学でクリエイティブコーディングに挑戦し、独自の思考法で以下の実績を達成
- 開始1年8ヶ月目までに公募6つに挑戦し、3つ入選（勝率50%）
- 開始1年9ヶ月目に、虎ノ門ヒルズ ステーションタワー49階 スカイガーデン＆プールのために制作した作品が展示される
目次
【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を使って自分の作風をつくりたい。
ワタタクそれでは今日もレッツワクワクコーディング。
