Shader #9 : 市松模様

f:id:zonu_a0:20210609010635p:plain

Shadertoy

www.shadertoy.com

ソースコード

Image

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // ピクセルの座標
    vec2 pixel = fragCoord.xy;
    
    // 1マスの大きさ
    float squareSize = 0.1 * iResolution.y;
    
    // 左下からいくつめのマスか
    float squareX = floor(pixel.x / squareSize);
    float squareY = floor(pixel.y / squareSize);
    
    //  x+yが奇数になるマスを白くする
    float white = fract((squareX + squareY) / 2.0) * 2.0;
    
    // ピクセルの色を設定
    fragColor = vec4(white, white, white, 1.0);
}

解説

    // ピクセルの座標
    vec2 pixel = fragCoord.xy;
    // 1マスの大きさ
    float squareSize = 0.1 * iResolution.y;
    
    // 左下からいくつめのマスか
    float squareX = floor(pixel.x / squareSize);
    float squareY = floor(pixel.y / squareSize);
    
    //  x+yが奇数になるマスを白くする
    float white = fract((squareX + squareY) / 2.0) * 2.0;

f:id:zonu_a0:20210609044025p:plain

  • 上図のように正方形の領域に分割し、(x+y)が奇数か偶数かで白黒を塗り分ける
  • floor関数 : 引数の小数部を切り捨てた整数を返す
  • fract関数 : 引数の小数部を返す
    • 1.0 を渡すと 0.0 を返す
  • fract(整数 / 2.0)
    • 整数が奇数の場合 : 0.5
    • 整数が偶数の場合 : 0.0
    • この結果を2倍することで、奇数は1.0、偶数は0.0となる
    // ピクセルの色を設定
    fragColor = vec4(white, white, white, 1.0);
  • 描画色の決定