<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);
    const canvas = createCanvas(windowWidth, windowHeight, WEBGL);
    rectMode(CENTER);
    noStroke();
    fill(1);
    program = createShader(vert, frag);
}

function draw() {
    shader(program);
    background(0);
    // Setting the resolution uniform 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.14159265358979323846

uniform vec2 res;
uniform float time;

vec3 rotate(vec3 p, float angle, vec3 axis) {
  float s = sin(angle);
  float c = cos(angle);
  float oc = 1.0 - c;
  vec3 n = normalize(axis);
  return p * c + cross(n, p) * s + n * dot(n, p) * oc;
}

float sdBox( vec3 p, vec3 b )
{
  vec3 q = abs(p) - b;
  return length(max(q,0.0)) + min(max(q.x,max(q.y,q.z)),0.0);
}

float SDF(vec3 p) {
    p += vec3(sin(time * PI / 5.0) * 0.2, 0.0, 0.0); // translation
    p = rotate(p, time * PI / 5.0, vec3(1.0)); // rotation
    return sdBox(p, vec3(0.2, 0.15, 0.1));
}

void main(void) {
    float minSide = min(res.x, res.y);
    vec2 crd = (gl_FragCoord.xy - res * 0.5) / minSide;  // Normalized screen coordinates

    // Calculate the distance to the sphere for the fragment position
    float d = SDF(vec3(crd, 0.0));
    vec3 color = vec3(d + sin(d * 400.0) * 0.01);

    // Mix the color to visualize the distance to the sphere
    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);
}`;