Shader #8 : 正六角形
Shadertoy
ソースコード
Image
void mainImage( out vec4 fragColor, in vec2 fragCoord ) { // 画面の中心 vec2 center = iResolution.xy * 0.5; // ピクセルの座標 vec2 pixel = fragCoord.xy; // 正六角形の高さ float height = 0.7 * iResolution.y; // √3 float sqrt3 = sqrt(3.0); // 正六角形の幅 float width = height * (2.0 / sqrt3); // centerを原点としたピクセル座標 vec2 diff = pixel - center; // 正六角形の各辺の内側か判定 float insideA = step(diff.x + diff.y / sqrt3, width / 2.0); float insideB = step(-diff.x + diff.y / sqrt3, width / 2.0); float insideC = step(pixel.y, center.y + height / 2.0); float insideD = step(diff.x - diff.y / sqrt3, width / 2.0); float insideE = step(-diff.x - diff.y / sqrt3, width / 2.0); float insideF = step(center.y - height / 2.0, pixel.y); // 正六角形内かを判定 float inside = insideA * insideB * insideC * insideD * insideE * insideF; // ピクセルの色を設定 fragColor = vec4(inside, inside, inside, 1.0); }
解説
// 画面の中心 vec2 center = iResolution.xy * 0.5; // ピクセルの座標 vec2 pixel = fragCoord.xy; // 正六角形の高さ float height = 0.7 * iResolution.y; // √3 float sqrt3 = sqrt(3.0); // 正六角形の幅 float width = height * (2.0 / sqrt3); // centerを原点としたピクセル座標 vec2 diff = pixel - center;
- ここは #7 と同じ
Shader #7 : 正三角形 - zonu's memo
// 正六角形の各辺の内側か判定 float insideA = step(diff.x + diff.y / sqrt3, width / 2.0); float insideB = step(-diff.x + diff.y / sqrt3, width / 2.0); float insideC = step(pixel.y, center.y + height / 2.0); float insideD = step(diff.x - diff.y / sqrt3, width / 2.0); float insideE = step(-diff.x - diff.y / sqrt3, width / 2.0); float insideF = step(center.y - height / 2.0, pixel.y); // 正六角形内かを判定 float inside = insideA * insideB * insideC * insideD * insideE * insideF;
- 正六角形は正三角形の組み合わせ
- なので、正六角形の斜めの辺(A,B,D,E)の角度は、正三角形の斜めの辺の角度と同じ
- insideA, insideBは #7 : 正三角形 と同じなので、解説はそちらを参照
- insideD, insideEは、A,Cをx軸対称にしただけ
- なので、正六角形の斜めの辺(A,B,D,E)の角度は、正三角形の斜めの辺の角度と同じ
- insideC = ピクセルが直線Cより下にあるか
- insideF = ピクセルが直線Fより下にあるか
- inside = 6つの直線内判定をかけあわせることで、正六角形範囲内のピクセルのみ1になる
// ピクセルの色を設定 fragColor = vec4(inside, inside, inside, 1.0);
- ピクセルの描画色の決定