Shader #6 : 正方形

Shadertoy

www.shadertoy.com

ソースコード

Image

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // 正方形の中心
    vec2 center = iResolution.xy * 0.5;
    
    // 正方形の大きさ
    float size = 0.30 * iResolution.y;
    
    // ピクセルの座標
    vec2 pixel = fragCoord.xy;
    
    // ピクセルから中心までの差分ベクトル
    vec2 diff = pixel - center;
    
    // X軸,Y軸ごとに正方形内かを判定
    float insideX = step(abs(diff.x), size);
    float insideY = step(abs(diff.y), size);
    
    // 正方形内かを判定
    float inside = insideX * insideY;
    
    // ピクセルの色を設定
    fragColor = vec4(inside, inside, inside, 1.0);
}

解説

    // 正方形の中心
    vec2 center = iResolution.xy * 0.5;
    
    // 正方形の大きさ
    float size = 0.30 * iResolution.y;
    
    // ピクセルの座標
    vec2 pixel = fragCoord.xy;
    
    // ピクセルから中心までの差分ベクトル
    vec2 diff = pixel - center;

• ほぼコメントのまま
• 正方形の中心 = 画面の中心
• 正方形の大きさ = 画面解像度の30%
  • ここでは中心から辺までの距離

    // X軸,Y軸ごとに正方形内かを判定
    float insideX = step(abs(diff.x), size);
    float insideY = step(abs(diff.y), size);

    // 正方形内かを判定
    float inside = insideX * insideY;

• abs関数 : 引数の絶対値を返す
• abs(diff.x) = 中心点からピクセルまでのx軸の距離
• insideX = X軸上の距離がsize以下なら1
• insideY = Y軸上の距離がsize以下なら1
• inside = insideX, insideYとも1なら1 = 正方形内なら1

    // ピクセルの色を設定
    fragColor = vec4(inside, inside, inside, 1.0);

• 描画色の決定