創造工学でやるシェーダーコード

創造工学.c

/// <summary>
/// 1. はじめてのフラグメントシェーダー
/// </summary>
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // (R, G, B, A) = (1, 0, 0, 1)を各ピクセルに対して代入する
    // 例えば描画領域が 1280x720　個ある場合、1フレームで1280 x 720回この処理が呼ばれる
    fragColor = vec4(1.0, 0.0, 0.0, 1.0);
}


/// <summary>
/// 2. 画面の正規化をする
/// </summary>
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // fragColorは出力する色(R, G, B, A)、fragCoordは座標(x, y)
    // iResolution.xyは画面の幅を表す2次元ベクトル
    // 左下(0,0) ~ 右上(1,1) になるように正規化
    // vec2 uv = vec2(fragCoord.x / iResolution.x, fragCoord.y / iResolution.y);
    vec2 uv = fragCoord / iResolution.xy;
    
    // fragColor = vec4(uv.x, uv.y, 0.0, 1.0)
    // (R, G, B ,A) = (uv.x, uv.y, 0.0, 1.0)
    fragColor = vec4(uv, 0.0, 1.0);
}


/// <summary>
/// 3. 時間経過を取得する
/// </summary>
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // fragColorは出力する色(RGBA)、fragCoordは座標
    // 画面の正規化をする, 画面左下が(0,0)で右上が(1,1)となるようにする
    // 左下(0,0) ~ 右上(1,1) になるように正規化
    // vec2 uv = vec2(fragCoord.x / iResolution.x, fragCoord.y / iResolution.y);
    vec2 uv = fragCoord/iResolution.xy;
    
    // abs(sin(iTime))  =>  |sin(t)|
    // iTimeは経過秒数, absは絶対値, sinはサイン関数
    // (R, G, B, A) = (uv.x, uv.y, abs(sin(iTime)), 1.0)
    fragColor = vec4(uv.x, uv.y , abs(sin(iTime)), 1.0);
}


/// <summary>
/// 4. 経過時間を使った作品の練習
/// </summary>
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // fragColorは出力する色(RGBA)、fragCoordは座標
    // 画面の正規化をする, 画面左下が(0,0)で右上が(1,1)となるようにする
    // 左下(0,0) ~ 右上(1,1) になるように正規化
    // vec2 uv = vec2(fragCoord.x / iResolution.x, fragCoord.y / iResolution.y);
    vec2 uv = fragCoord/iResolution.xy;
    
    // (R, G, B, A) = (?, 0, 0, 1)
    // Rが0~1を周期的に繰り返している
    // abs(x)は絶対値、sin(x)はサイン関数、uv.xはx座標、iTimeは経過秒数
    // 足し算は「1.0 + 2.0」のように「+」を使う
    // 「3. 時間経過を取得する」のコードの「abs(sin(iTime))」を参考にすると良い |sin(t)|
    fragColor = vec4(??????????, 0 , 0, 1.0);
}


/// <summary>
/// 5. 経過時間を使った作品の練習　その2
/// </summary>
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // fragColorは出力する色(RGBA)、fragCoordは座標
    // 画面の正規化をする, 画面左下が(0,0)で右上が(1,1)となるようにする
    // 左下(0,0) ~ 右上(1,1) になるように正規化
    // vec2 uv = vec2(fragCoord.x / iResolution.x, fragCoord.y / iResolution.y);
    vec2 uv = fragCoord/iResolution.xy;
    
    // 「4. 経過時間を使った作品の練習」を参考にすると良い　|sin(x+t)|
    // 4の時よりも波の周期が短い
    // 掛け算は「10.0 * 2.0」のように「*」を使う
    float col = ??????????????;
    
    // (R, G, B, A) = (col, col, col, 1)
    fragColor = vec4(col, col, col, 1);
}


/// <summary>
/// ６. Step関数を使った作品
/// </summary>
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // fragColorは出力する色(RGBA)、fragCoordは座標
    // 画面の正規化をする, 画面左下が(0,0)で右上が(1,1)となるようにする
    // 左下(0,0) ~ 右上(1,1) になるように正規化
    // vec2 uv = vec2(fragCoord.x / iResolution.x, fragCoord.y / iResolution.y);
    vec2 uv = fragCoord/iResolution.xy;
    
    // 「5. 経過時間を使った作品の練習　その2」のcolに対してstep関数を適応する |sin(40(x - t))|
    // step(x, y)はxがyより大きい時は0, yがx以上の時は1を返す関数
    // 例. step(1, 0.5) = 0
    float col = ???????????????;
    
    fragColor = vec4(col, col, col, 1);
}



/// <summary>
/// 7. 距離関数を使った作品
/// </summary>
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // 左下(0,0) ~ 右上(1,1) になるように正規化
    vec2 uv = fragCoord/iResolution.xy;
    
    // 画面中央からの距離を求める
    // dは 0 ~ 1/√2の値
    float d = distance(vec2(0.5, 0.5), uv);
    
    // 距離を色として出力
    // (R, G, B, A) = (d, d, d, 1)
    fragColor = vec4(d, d, d, 1);
}



/// <summary>
/// ８. 今までの知識と距離関数を使った作品
/// </summary>
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // 左下(0,0) ~ 右上(1,1) になるように正規化
    vec2 uv = fragCoord/iResolution.xy;
    
    // 画面中央からの距離を求める
    // dは 0 ~ 1/√2の値
    float d = distance(vec2(0.5, 0.5), uv);
    
    // 「６. Step関数を使った作品」と「7. 距離関数を使った作品」の知識を利用する
    // 6ではux.x(x座標)を利用していたものを、dを利用したものに置き換える
    float color = ???????????;
    
    // 距離を色として出力
    // (R, G, B, A) = (color, color, color, 1)
    fragColor = vec4(color, color, color, 1);
}


/// <summary>
/// ９.ボロノイ図
/// </summary>
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = fragCoord/iResolution.xy;
    
    // 適当にランダムな母点を用意
    vec2[5] points = vec2[](
	vec2(0.14, 0.17),
	vec2(0.83, abs(cos(iTime))),
	vec2(abs(sin(iTime)), 0.23),
	vec2(0.5 * cos(-iTime) + 0.5, 0.5 * sin(-iTime) + 0.5),
	vec2(0.5 * cos(iTime) + 0.5, 0.5 * sin(iTime) + 0.5)
    );
    
    // 1. 各母点から距離を全て求める
    // 2. 一番距離が近い母点を見つける
    ???????
    ???????
    ???????
    ???????
    ???????
    
    // 3. 色に反映
    fragColor = vec4(???, ???, ???, 1);
}

ShaderToyで使うコード達です