<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js" integrity="sha512-3RlxD1bW34eFKPwj9gUXEWtdSMC59QqIqHnD8O/NoTwSJhgxRizdcFVQhUMFyTp5RwLTDL0Lbcqtl8b7bFAzog==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

body {margin:0px; padding:0px; overflow: hidden}

let program;

function setup() {
    pixelDensity(1);
    createCanvas(windowWidth, windowHeight, WEBGL);
    rectMode(CENTER);
    noStroke();
    fill(1);
    program = createShader(vert, frag);
}

function draw() {
    shader(program);
    background(0);
    // Set uniforms for the shader
    program.setUniform('res', [width, height]);
    program.setUniform('time', frameCount / 60);
    rect(0, 0, width, height);
}

const vert = `
#ifdef GL_ES
precision highp float;
precision highp int;
#endif

attribute vec3 aPosition;
uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;
uniform mat3 uNormalMatrix;

void main() {
    gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);
}`;

const frag = `
#ifdef GL_ES
precision highp float;
#endif

#define PI 3.14159265359

uniform vec2 res;
uniform float time;

// Signed distance function for an octahedron
float sdOctahedron(vec3 p, float s) {
    p = abs(p);
    float m = p.x + p.y + p.z - s;
    vec3 q;
    if (3.0 * p.x < m) q = p.xyz;
    else if (3.0 * p.y < m) q = p.yzx;
    else if (3.0 * p.z < m) q = p.zxy;
    else return m * 0.57735027; // 0.57735027 is approximately 1/sqrt(3)
    
    float k = clamp(0.5 * (q.z - q.y + s), 0.0, s);
    return length(vec3(q.x, q.y - s + k, q.z - k));
}

// Signed distance function for a sphere
float sdSphere(vec3 p, float s) {
    return length(p) - s;
}

float SDF(vec3 p) {
  float d = -sin(time * PI / 3.0) * 0.125 + 0.25; 
  return min(sdOctahedron(p - vec3(d, 0.0, 0.0), 0.2), sdSphere(p + vec3(d, 0.0, 0.0), 0.2));
}

void main(void) {
    float minSide = min(res.x, res.y);
    vec2 crd = (gl_FragCoord.xy - res * 0.5) / minSide;
    
    // Compute distance from the fragment to the shapes
    float d = SDF(vec3(crd, 0.0));
    vec3 color = vec3(abs(d));

    // Mix the color based on the distance to the shapes
    color = mix(color, vec3(1.0, 1.0, 0.0), 1.0 - smoothstep(0.0, 1.0 / minSide, abs(d)));
    
    gl_FragColor = vec4(color, 1.0);
}`;