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

2024年11月19日

URLをコピーしました！

ワタタク

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

この記事を書いた人

ワタタク

プロフィール

クリエイティブコーディング初心者が、アーティストとして活躍するまでの上達の過程を発信
コンセプトは「クリエイティブコーディング1万時間の歩き方」
参考にしてもらえるブログにするため、Processingを独学で勉強して共有中

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

【Processing】resetShader()について

resetShader()について

resetShaderは「シェーダーをリセットする」という意味
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); // 画像を画面の右半分に表示する（シェーダー効果がリセットされた状態）
}