GLSLでひし形タイリング

GLSLでひし形タイリングを実装します。

以前にGLSLで二等辺三角形タイリングを実装しました。二等辺三角形タイリングをよく見るとひし形のタイリングが見えてくると思います。このことから、ひし形タイリングも二等辺三角形タイリングをベースに実装しています。
https://zenn.dev/aadebdeb/articles/86e08518bb3c1a

vec2 diamondTiling(vec2 p, float width, float height, out vec2 index) {
    float h = 0.5 * height;
    vec2 q = p;
    float skew = 0.5 * width / h;
    q.x -= q.y * skew;
    index = vec2(2.0 * floor(q.x / width), floor(q.y / h));
    q = vec2(mod(q.x, width), mod(q.y, h));
    if (q.x / width + q.y / h >= 1.0) {
        q.x -= 0.5 * width;
        index.y += 1;
    } else {
        q.y += h;
    }
    q.x += mod(q.y, h) * skew;
    return q;
}

vec2 p = v_texcoord * resolution / min(resolution.x, resolution.y) * 10.0;
vec2 index;
vec2 q = diamondTiling(p, 2, 1, index);
gl_FragColor = vec4(q, 0.0, 1.0);

gl_FragColor = vec4(random(index), 1.0);