【夏休みの自由研究】「シェーダー」の世界（第1回）

const vert = `
attribute vec3 aPosition;
attribute vec2 aTexCoord; 
varying vec2 vTexCoord;  

void main() {
  vTexCoord = aTexCoord;
  vec4 positionVec4 = vec4(aPosition, 1.0);
  positionVec4.xy = positionVec4.xy * 2.0 - 1.0;
  gl_Position = positionVec4;
}
`;

const frag = `
// 📍魔法のインク「フラグメントシェーダー」  
// ⬇️ ここを書きかえて色で模様（もよう）をつくっていくよ
  precision mediump float;
  uniform float u_time;
  uniform vec2 u_resolution; 
  varying vec2 vTexCoord;

  void main() {
    // 👨‍🔬実験：色を変えてみてね〜
    // 赤色
    float r = 1.0; 
    // 緑色
    float g = 0.0;
    // 青色
    float b = 0.0;

    // 透明度
    float a = 1.0;

    //  光の三原色（RGB）と透明度（A）vec4(R, G, B, A)
    gl_FragColor = vec4(r, g, b, a); 
  }
// ⬆️ここまで

`;


// 👇ここから下はJavaScript（p5.js）
let myShader;

function setup() {
  // WEBGLモードでキャンバスを作るよ
  createCanvas(windowWidth, windowHeight, WEBGL);
  myShader = createShader(vert, frag);
}

function draw() {
  // ❶ 「今からこの魔法（シェーダー）を使うよ！」という宣言
  shader(myShader);

  // ❷ 魔法に「今、何秒たったか？」の手紙を送る
  myShader.setUniform("u_time", millis() / 1000.0);

  // ❸ 魔法に「画面の大きさ」を教えてあげる
  myShader.setUniform("u_resolution", [width, height]);

  // ❹ 魔法をぬるための「大きな紙」を広げる
  rect(-width / 2, -height / 2, width, height);
}

// 画面のサイズが変わっても大丈夫なようにするおまじない
function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

// ⬇️ 
precision mediump float;
uniform float u_time;
uniform vec2 u_resolution;
varying vec2 vTexCoord;

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 = vTexCoord * 2.0 - 1.0;
    uv.x *= u_resolution.x / u_resolution.y;
    vec2 uv0 = uv; 
    vec3 finalColor = vec3(0.0);

    for (float i = 0.0; i < 4.0; i++) {
        uv = fract(uv * 1.5) - 0.5;  
        vec3 col = palette(length(uv0) + i*0.4 + u_time*0.4);
        float d = length(uv) * exp(-length(uv0)); 
        d = sin(d * 8.0 + u_time) / 8.0;
        d = abs(d);
        d = pow(0.01 / d, 1.2); 
        finalColor += col * d;
    }
    gl_FragColor = vec4(finalColor, 1.0);
}
// ⬆️