Genuary 5: Destroy a Square

const axisAngleRotation = `

mat4 axisAngleRotation(vec3 axis, float angle) {

    axis = normalize(axis);

    float s = sin(angle);

    float c = cos(angle);

    float oc = 1.0 - c;

    return mat4(oc * axis.x * axis.x + c,           oc * axis.x * axis.y - axis.z * s,  oc * axis.z * axis.x + axis.y * s,  0.0,

                oc * axis.x * axis.y + axis.z * s,  oc * axis.y * axis.y + c,           oc * axis.y * axis.z - axis.x * s,  0.0,

                oc * axis.z * axis.x - axis.y * s,  oc * axis.y * axis.z + axis.x * s,  oc * axis.z * axis.z + c,           0.0,

                0.0,                                0.0,                                0.0,                                1.0);

}

`

​

const shaderSource = () => {

  const vert = `

  attribute vec3 aPosition;

  attribute vec3 aNormal;

  attribute vec2 aTexCoord;

​

  uniform mat4 uModelViewMatrix;

  uniform mat4 uProjectionMatrix;

  uniform mat3 uNormalMatrix;

​

  uniform float time;

​

  varying vec2 vTexCoord;

  varying vec3 vNormal;

  varying vec3 vPosition;

​

  ${axisAngleRotation}

​

  vec3 adjustNormal(

    vec3 origNormal,

    vec3 displacementNormal,

    vec3 noDisplacementNormal

  ) {

    // Find the rotation induced by the displacement

    float angle = acos(dot(displacementNormal, noDisplacementNormal));

    vec3 rawAxis = cross(displacementNormal, noDisplacementNormal);

    if (length(rawAxis) < 0.01) {

      return origNormal;

    }

    vec3 axis = normalize(rawAxis);

    mat4 rotation = axisAngleRotation(axis, angle);

​

    // Apply the rotation to the original normal

    vec3 normal = (rotation * vec4(origNormal, 0.)).xyz;

    return normal;

  }

​

  void main(void) {

    vec4 objSpacePosition = vec4(aPosition, 1.0);

    ${AutoDiff.gen((ad) => {

      const position = ad.vec3Param('objSpacePosition.xyz')

      const x = position.x()

      const y = position.y()

      const z = position.z()

      const position3 = ad.vec3(x, y, z)

      const time = ad.param('time')

      const speedX = 1.5

      const speedY = 2.8

​

      const smoothstep = (edge0, edge1, x) => {

        const t = x.sub(edge0).div(edge1.sub(edge0)).clamp(0, 1)

        return t.mult(t).mult(t.mult(-2).add(3))

      }

​

      const rotateY = (pos, angle) => {

        const sa = ad.sin(angle)

        const ca = ad.cos(angle)

        return ad.vec3(

          pos.x().mult(ca).add(pos.z().mult(sa)),

          pos.y(),

          pos.x().mult(sa.neg()).add(pos.z().mult(ca)),

        )

      }

​

      const rotateX = (pos, angle) => {

        const sa = ad.sin(angle)

        const ca = ad.cos(angle)

        return ad.vec3(

          pos.x(),

          pos.y().mult(ca).sub(pos.z().mult(sa)),

          pos.y().mult(sa).add(pos.z().mult(ca)),

        )

      }

​

      const twistProgressY = smoothstep(

        ad.val(0),

        ad.val(1),

        ad

          .sin(

            time.mult(0.001).sub(y.mult(1.8))

              .add(Math.PI * 1.2)

          )

          .add(

            ad.sin(time.mult(0.00025).add(Math.PI * 1.2))

          )

          .add(1.5)

          .div(3)

      )

      const twistProgressX = smoothstep(

        ad.val(0),

        ad.val(1),

        ad

          .sin(

            time.mult(0.001).sub(y.mult(1.8))

              .add(Math.PI * 1.8)

          )

          .add(

            ad.sin(time.mult(0.0005).add(Math.PI * 1.8))

          )

          .add(1.5)

          .div(3)

      )

​

      // Add a twist to the spoon

      let twisted = position

      twisted = rotateY(

        twisted,

        twistProgressY.mult(Math.PI * 2)

      )

      const xOff = ad.vec3(0, ad.sin(time.mult(0.0001)).mult(0.1), -0.1)

      twisted = rotateX(

        twisted.add(xOff),

        twistProgressX.mult(Math.PI)

      ).sub(xOff)

      const twistOffset = twisted.sub(position)

​

​

      // Output the combined offset for the current vertex, plus its derivatives

      // with respect to its original position, which lets us fix its normal

      // after we displace it

      const offset = twistOffset

      offset.output('offset')

      offset.outputDeriv('dodx', x)

      offset.outputDeriv('dody', y)

      offset.outputDeriv('dodz', z)

    })}

    objSpacePosition.xyz += offset;

    vec3 slopeX = dodx + dody + vec3(1.0, 1.0, 0.0);

    vec3 slopeYZ = dodz + vec3(0.0, 0.0, 1.0);

    vec3 displacementNormal = normalize(cross(slopeX, slopeYZ));

    vec3 noDisplacementNormal = normalize(vec3(1.,-1.,0.));

    vec3 normal = adjustNormal(

      aNormal,

      displacementNormal,

      noDisplacementNormal

    );

​

    vec4 worldSpacePosition = uModelViewMatrix * objSpacePosition;

    gl_Position = uProjectionMatrix * worldSpacePosition;

    vTexCoord = aTexCoord;

    vPosition = worldSpacePosition.xyz;

    vNormal = uNormalMatrix * normal;

  }

  `

  const frag = `

  precision mediump float;

  varying vec2 vTexCoord;

  varying vec3 vNormal;

  varying vec3 vPosition;

  uniform sampler2D sphereMap;

  uniform sampler2D roughSphereMap;

  uniform sampler2D texture;

​

  ${axisAngleRotation}

​

  const float PI = ${Math.PI.toFixed(10)};

​

  float map(float val, float inA, float inB, float outA, float outB) {

    return (val - inA) / (inB - inA) * (outB - outA) + outA;

  }

​

  vec4 sampleBackground(vec3 normal, sampler2D bg) {

    // x = rho sin(phi) cos(theta)

    // y = rho cos(phi)

    // z = rho sin(phi) sin(theta)

    // rho = 1 after normalization

    float phi = acos(normal.y);

    float sinPhi = sin(phi);

    float theta =

      abs(sinPhi) > 0.0001

        ? acos(normal.x / sinPhi)

        : 0.;

    vec2 coord = vec2(

      map(theta, 0., PI, 0., 1.),

      map(phi, 0., PI, 1., 0.)

    );

    return texture2D(bg, coord);

  }

​

  vec4 remapShadows(vec4 color) {

    float factor = 4.;

    return vec4(

      pow(color.x, factor),

      pow(color.y, factor),

      pow(color.z, factor),

      color.w

    );

  }

​

  float fresnel(vec3 direction, vec3 normal, bool invert) {

      vec3 halfDirection = normalize( normal + direction );

      float cosine = dot( halfDirection, direction );

      float product = max( cosine, 0.0 );

      float factor = invert ? 1.0 - pow( product, 5.0 ) : pow( product, 5.0 );

      return factor;

  }

​

  void main() {

    vec3 normal = normalize(vNormal);

    if (normal.z < 0.) {

      normal.z *= -1.;

    }

​

    vec3 toSurface = normalize(vPosition);

    vec3 reflectedDir = normalize(reflect(toSurface, normal));

​

    vec4 baseColor = vec4(0.8, 0.88, 0.95, 1.);

    vec4 diffuseColor = sampleBackground(normal, roughSphereMap);

    vec4 reflectionColor = remapShadows(sampleBackground(reflectedDir, sphereMap));

​

    float fresnelStrength = 0.1;

    float reflectionStrength = 0.5;

    float reflectionAmount = reflectionStrength + fresnelStrength * fresnel(toSurface, normal, false);

    vec4 mixedColor = baseColor * diffuseColor + reflectionAmount * reflectionColor;

​

    mat4 rotation = axisAngleRotation(normalize(vec3(0., 0.5, 0.25)), 0.5);

    vec3 hueShifted = (rotation * vec4(mixedColor.rgb, 0.)).xyz;

    gl_FragColor = vec4(abs(hueShifted), 1.);

  }

  `

  return [vert, frag]

}

​

let reflection

let sphereMap

let irradianceMap

let irradiance

let texture

let webglCanvas

let gradient

let subdivPlane

function preload() {

  sphereMap = loadImage('office_spheremap.jpg')

}

​

function setup() {

  createCanvas(600, 600, WEBGL);

  // Calculate the direct light coming from each direction of the sphere map

  const smallWidth = 200

  irradianceMap = createGraphics(smallWidth, Math.floor(smallWidth * (sphereMap.height / sphereMap.width)), WEBGL)

  irradiance = irradianceMap.createShader(irradianceVert, irradianceFrag)

  irradianceMap.shader(irradiance)

  irradiance.setUniform('environmentMap', sphereMap)

  irradianceMap.noStroke()

  irradianceMap.rectMode(irradianceMap.CENTER)

  irradianceMap.rect(0, 0, irradianceMap.width, irradianceMap.height)

  // Set up the main shader that does the twisting + reflection

  reflection = createShader(...shaderSource())

  subdivPlane = makePlane(60);

}

​

function draw() {

  background(255)

  orbitControl()

  shader(reflection)

  reflection.setUniform('sphereMap', sphereMap)

  reflection.setUniform('roughSphereMap', irradianceMap)

  reflection.setUniform('time', millis())

  noStroke()

  const r = 400;

  scale(r);

  model(subdivPlane)

}