【Processing】resetShader()の使い方【画面に適用されているシェーダー効果を解除し、元の状態に戻す】

【Processing】resetShader()の使い方【画面に適用されているシェーダー効果を解除し、元の状態に戻す】
  • URLをコピーしました!
ワタタク

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

この記事を書いた人

ワタタク(Watataku)
  • クリエイティブコーダー / アーティスト
  • 「人の心に寄り添う、機能するアート」を探究しています
  • アートとテクノロジーが、社会や個人のウェルビーイングにどう貢献できるかに、関心があります

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

目次

【Processing】resetShader()について

resetShader()について
  • resetShaderは「シェーダーをリセットする」という意味
  • resetShader()は画面に適用されているシェーダー効果を解除し、元の状態に戻す

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

このシェーダーは、画像のエッジを検出して白黒で表示する。

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

glslに書いたこと。

#ifdef GL_ES
precision mediump float;
#endif

uniform sampler2D texture;
uniform vec2 resolution;

void main() {
    vec2 st = gl_FragCoord.xy / resolution.xy; // ピクセル位置を[0,1]の範囲に正規化
    vec4 color = texture2D(texture, st); // テクスチャから現在のピクセル色を取得

    // 周囲のピクセルを取得してエッジを計算
    vec3 edges = vec3(0.0);
    float offset = 1.0 / resolution.x;
    
    edges += texture2D(texture, st + vec2(-offset, -offset)).rgb * -1.0;
    edges += texture2D(texture, st + vec2(0.0, -offset)).rgb * -2.0;
    edges += texture2D(texture, st + vec2(offset, -offset)).rgb * -1.0;
    edges += texture2D(texture, st + vec2(-offset, 0.0)).rgb * -2.0;
    edges += texture2D(texture, st + vec2(offset, 0.0)).rgb * 2.0;
    edges += texture2D(texture, st + vec2(-offset, offset)).rgb * -1.0;
    edges += texture2D(texture, st + vec2(0.0, offset)).rgb * 2.0;
    edges += texture2D(texture, st + vec2(offset, offset)).rgb * -1.0;

    float edgeDetection = length(edges);
    vec3 finalColor = vec3(edgeDetection);

    gl_FragColor = vec4(finalColor, 1.0); // エッジを描画
}
PShader edges;  // シェーダーの準備
PImage img;     // 画像の準備

void setup() {
  size(800, 400, P2D); // 画面のサイズを800x400ピクセルに設定、P2Dレンダラーを使用
  img = loadImage("deer.jpg"); // "deer.jpg"という名前の画像を読み込む
  img.resize(400, 400); // 読み込んだ画像を400x400ピクセルにリサイズする
  edges = loadShader("edges.glsl"); // "edges.glsl"という名前のシェーダーファイルを読み込む
}

void draw() {
  shader(edges); // edgesシェーダーを適用する
  image(img, 0, 0); // 画像を画面の左半分に表示する(シェーダー効果が適用された状態)
  resetShader(); // シェーダー効果をリセットする
  image(img, width/2, 0); // 画像を画面の右半分に表示する(シェーダー効果がリセットされた状態)
}

【Processing】resetShader()を使ってみた感想

「リアルタイムグラフィックスの数学 ― GLSLではじめるシェーダプログラミング」という本の内容をProcessingで実行することは可能なんじゃないかという気づきを得れた。

ワタタク

それでは今日もレッツワクワクコーディング。

ワタタク(Watataku)
クリエイティブコーダー/アーティスト
AIと共に、「人の心に寄り添う、機能するアート」を探究しています。

ここは、その思索と創造の全記録を記す、思考の実験室(アトリエ)です。

僕の創作の源泉は、人生経験そのものです。
不当な出来事や、精神的な支配の中で、私の心は何度も粉々に砕け散りました。しかし、その一つ一つの破片をどのようにすれば鮮やかな絵の具にできるかを考え、ゆっくり心のパレットに色を整えていきました。その、長い、長い、自身との対話の果てに「人の役に立つアートを作りたい」という考え方にたどり着きました。

かつて、僕の武器は、アコースティックギター弾き語りと、カメラでした。
オリジナルソングの演奏でお客様投票1位となった「物語の力」。
世界20カ国の旅で培った、多様な「視点」。

今、僕は、それら全ての経験を、「コード」という、新しい言語で、世界に問いかけています。

このブログでは、作品の制作過程や、日々の発見、そして、僕自身の上達の軌跡を記録していきます。

僕の旅が、あなたの日常を、ほんの少しでも豊かにするための、光になることを願って。

クリエイティブコーディングロード運営者 ワタタク
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次