mo49
8/21/2019 - 9:08 AM

00_Mondrian.md

00_Mondrian.md
content_copyfile_download
  • Rendered
  • Source

http://glslsandbox.com/e#56814.0

An excercise from https://thebookofshaders.com/07/?lan=jp https://github.com/michaelbromley/shader-playground/blob/master/mondrian.glsl

GLSLでモンドリアン風 | Superpeachman
こっちのほうがわかりやすいか

原点と面積を渡す関数か、
左下と右上を渡す関数か。

矩形全般の描き方
GLSLのstep()を使っての矩形の描き方

Mondrian.frag
content_copyfile_download
#ifdef GL_ES
precision mediump float;
#endif

float rectangle(in vec2 st, in vec2 origin, in vec2 dimensions) {
    vec2 bl = step(origin, st); // 0 or 1 のvec2
    float pct = bl.x * bl.y;
    vec2 tr = step(1.0 - origin - dimensions, 1.0 - st); // 0 or 1 のvec2
    pct *= tr.x * tr.y; // 全部閾値を越えていたら1
    return pct;
}

void main(){
    vec2 st = gl_FragCoord.xy/iResolution.xy;
    vec3 color = vec3(0.0);
    color += rectangle(st, vec2(0.0, 0.0), vec2(0.2, 0.65));
    color += rectangle(st, vec2(0.22, 0.0), vec2(0.5, 0.1));
    color.b += rectangle(st, vec2(0.74, 0.0), vec2(0.2, 0.1));
    color.b += rectangle(st, vec2(0.96, 0.0), vec2(0.04, 0.1));
    color += rectangle(st, vec2(0.22, 0.12), vec2(0.5, 0.53));
    color += rectangle(st, vec2(0.74, 0.12), vec2(0.2, 0.53));
    color += rectangle(st, vec2(0.96, 0.12), vec2(0.04, 0.53));
    color.r += rectangle(st, vec2(0.0, 0.67), vec2(0.07, 0.17));
    color.r += rectangle(st, vec2(0.09, 0.67), vec2(0.11, 0.17));
    color += rectangle(st, vec2(0.22, 0.67), vec2(0.5, 0.17));
    color += rectangle(st, vec2(0.74, 0.67), vec2(0.2, 0.17));
    color.rg += vec2(rectangle(st, vec2(0.96, 0.67), vec2(0.04, 0.17)));
    color.r += rectangle(st, vec2(0.0, 0.86), vec2(0.07, 0.17));
    color.r += rectangle(st, vec2(0.09, 0.86), vec2(0.11, 0.17));
    color += rectangle(st, vec2(0.22, 0.86), vec2(0.5, 0.17));
    color += rectangle(st, vec2(0.74, 0.86), vec2(0.2, 0.17));
    color.rg += vec2(rectangle(st, vec2(0.96, 0.86), vec2(0.04, 0.17)));

    gl_FragColor = vec4(color, 1.0);
}