第3回クリエイティブ・コーディング：シェーダーの魔法

/**
 * クリエイティブ・コーディング 第2回 実践編
 * 「1ファイルで完結！シェーダー召喚テンプレート」
 */

// --- 1. 頂点シェーダー (Vertex Shader) ---
// 画面の座標をそのままフラグメントシェーダーに渡す「おまじない」。
// 最小限の構成。varyingを使わず、キャンバスの設営だけに集中します。
const vert = `
precision highp float;
attribute vec3 aPosition;

void main() {
  vec4 positionVec4 = vec4(aPosition, 1.0);
  // p5.jsの平面を画面いっぱいに広げる
  positionVec4.xy = positionVec4.xy * 2.0 - 1.0;
  gl_Position = positionVec4;
}`;

// --- 2. フラグメントシェーダー (Fragment Shader) ---
// ★ここを書き換える！
const frag = `
precision highp float;
uniform vec2 uResolution;
uniform float uTime;

void main() {
  // 【ここがポイント】
  // gl_FragCoord（ピクセル位置）から -1.0 〜 1.0 の座標を作ります。
  // 短い方の辺を基準にするため min() を使ってアスペクト比を補正します。
  vec2 uv = (gl_FragCoord.xy * 2.0 - uResolution.xy) / min(uResolution.x, uResolution.y);

  vec3 col = 0.5 + 0.5 * cos(uTime + uv.xyx + vec3(0, 2, 4));
  
  gl_FragColor = vec4(col, 1.0);
}`;
// ★ここまで

let myShader;

function setup() {
  // WEBGLモード。pixelDensity(1)を入れると計算がズレにくくなります。
  createCanvas(windowWidth, windowHeight, WEBGL);
  pixelDensity(1); 
  
  myShader = createShader(vert, frag);
  noStroke();
}

function draw() {
  shader(myShader);

  // シェーダーに現在の「画面サイズ」と「時間」を教えてあげる
  myShader.setUniform('uResolution', [width, height]);
  myShader.setUniform('uTime', millis() / 1000.0);

  // キャンバスとなる四角形。中心原点なのでこの範囲で画面全体を覆います。
  rect(-width / 2, -height / 2, width, height);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

// --- 2. フラグメントシェーダー (Fragment Shader) ---
const frag = `
precision highp float;
uniform vec2 uResolution;
uniform float uTime;

vec3 palette(float t) {
    vec3 a = vec3(0.5, 0.5, 0.5);
    vec3 b = vec3(0.5, 0.5, 0.5);
    vec3 c = vec3(1.0, 1.0, 1.0);
    vec3 d = vec3(0.000, 0.333, 0.667);
    return a + b * cos(6.28318 * (c * t + d));
}

void main() {
    vec2 uv = (gl_FragCoord.xy * 2.0 - uResolution.xy) / min(uResolution.x, uResolution.y);

    vec2 uv0 = uv;
    vec3 finalColor = vec3(0.0);

    for (int i = 0; i < 4; i++) {
        float fi = float(i); 
        uv = fract(uv * 1.5) - 0.5;
        float d = length(uv) * exp(-length(uv0));
        vec3 col = palette(length(uv0) + fi * 0.4 + uTime * 0.4);
        d = sin(d * 8.0 + uTime) / 8.0;
        d = abs(d);
        d = pow(0.01 / d, 1.2);
        finalColor += col * d;
    }
    gl_FragColor = vec4(finalColor, 1.0);
}`;