<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></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() {
  const lightPos = [12, 12, -2];
  
  shader(program);
  background(0);
  program.setUniform('res',[width,height]);
  program.setUniform('time', frameCount / 60);
  program.setUniform('lightPos', lightPos);
  rect(0,0,width,height);
}


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

#extension GL_OES_standard_derivatives : enable
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 vec3 lightPos;
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;
}

// Signed distance function for an octahedron
float sdOctahedron(vec3 p, float s) {
    p.x -= sin(time * PI / 3.0) * 0.125 + 0.25; 
    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) {
  
    p.x += sin(time * PI / 3.0) * 0.125 + 0.25; 
    return length(p) - s;
}

float SDF(vec3 p) {
  return min(sdOctahedron(p, 0.2), sdSphere(p, 0.2));
}

vec3 getNormal(vec3 P) {  
  vec3 N;
  vec2 h = vec2(0.001, 0.0);
  N.x = SDF(P + h.xyy) - SDF(P - h.xyy);
  N.y = SDF(P + h.yxy) - SDF(P - h.yxy);
  N.z = SDF(P + h.yyx) - SDF(P - h.yyx);
  return normalize(N);
}

float raymarch(vec3 eye, vec3 rayDir) {
    float dist = 0.0;
    float threshold = 0.001;
    for(int i = 0 ; i < 32 ; ++i) {
        float d = SDF(eye + rayDir * dist);
        if(d < threshold) { return dist; }
        dist += d;
    }
    return -1.0;
}

float diffuse(vec3 l, vec3 n) {
  return max(0.0, dot(l, n));
}

void main(void)
{
  vec2 crd = (gl_FragCoord.xy - res * 0.5) / min(res.x, res.y);
  
  vec3 eye = vec3(0.0, 0.0, -2.5);
  vec3 rayDir = normalize(vec3(crd, 0.0) - eye);
  float dist = raymarch(eye, rayDir);
  
  vec4 color = vec4(vec3(0.01), 1.0);
  if (dist >= 0.0) {
      vec3 P = eye + rayDir * dist;
      vec3 L = normalize(lightPos - P);
      vec3 N = getNormal(P);
      vec3 baseColor = sdSphere(P, 0.2) < sdOctahedron(P, 0.2) ? vec3(0.3, 0.6, 1.0) : vec3(1.0, 0.4, 0.5);
      vec3 Cd = diffuse(L, N) * baseColor;
      color = vec4(Cd, 1.0);
  }
  color.rgb = pow(color.rgb, vec3(1.0 / 2.2));
  gl_FragColor = color;
}`;