Support React.js

WebGL

Live Editor

function Canvas() {
        const gl = useGL({
                frag: `
                #version 300 es
                precision mediump float;
                uniform vec2 iResolution;
                uniform float iTime;
                uniform float ellipseRadius;
                uniform float ellipseXCoord;
                uniform float ellipseYCoord;
                uniform float ellipseStroke;
                out vec4 fragColor;
                #define PI 3.141592
                #define M(X, Y, A) mat2(1. / X, 0, 0, 1. / Y) * mat2(cos(A), -sin(A), sin(A), cos(A))
                #define circle(p) length(p) - ellipseRadius
                #define ellipse(p, A) circle(M(ellipseXCoord, ellipseYCoord, A) * p)
                #define onion(p, A) d = min(d, abs(ellipse(p, A)) - ellipseStroke)
                void main() {
                        vec2 uv = fract(gl_FragCoord.xy / iResolution);
                        vec2 p = uv * 2.4 - 1.2;
                        p.x *= iResolution.x / iResolution.y;
                        float d = circle(p);
                        onion(p, PI / 2. + iTime);
                        onion(p, PI / 6. + iTime);
                        onion(p, -PI / 6. + iTime);
                        if (d < 0.)
                                fragColor = vec4(96. / 255., 219. / 255., 251. / 255., 0.8);
                }
                `,
                resize() {
                        resize(gl)
                },
        })
        gl.uniform(
                useControls({
                        ellipseRadius: { min: 0, value: 0.2, max: 0.4 },
                        ellipseXCoord: { min: 0, value: 2.2, max: 4.4 },
                        ellipseYCoord: { min: 0, value: 5.4, max: 10.8 },
                        ellipseStroke: { min: 0, value: 0.01, max: 0.02 },
                })
        )
        return <canvas ref={gl.ref} />
}

Result

Loading...