Wobbly Egg

let displacement

let velocity

let eggWhite

let eggYolk

​

function preload() {

  eggWhite = loadModel('egg-half.obj', () => {}, () => {})

  eggYolk = loadModel('egg-devilled.obj', () => {}, () => {})

}

​

function setup() {

  createCanvas(600, 600, WEBGL)

  displacement = createVector(0, 0, 0)

  velocity = createVector(0, 0, 0)

}

​

function draw() {

  noStroke()

  background('#edc385')

  pointLight(100, 100, 100, width/2, -height/2, 100)

  pointLight(50, 50, 50, width/3, -height/3, 200)

  directionalLight(128, 128, 128, 1, 0, -1)

  const dt = deltaTime/1000

  if (dt > 0 && dt < 0.5) {

    const dMouse = createVector(

      mouseX - pmouseX,

      mouseY - pmouseY,

    ).div(dt).mult(0.2)

    const k_spring = 250

    const c_damper = 5

    const mass = 1

    const f = displacement.copy().mult(-k_spring).add(

      velocity.copy().mult(-c_damper)

    ).add(dMouse.copy().mult(10))

    const accel = f.copy().div(mass)

    velocity.add(accel.copy().mult(dt))

    displacement.add(velocity.copy().mult(dt))

  }

  const tangentVec = displacement.magSq() < 1e-4

    ? createVector(1, 0, 0)

    : displacement.copy().normalize()

  const biTangentVec = createVector(0, 0, 1)

  const normalVec = tangentVec.cross(biTangentVec)

  const toTangentSpace = new DOMMatrixReadOnly([

    tangentVec.x, tangentVec.y, tangentVec.z, 0,

    normalVec.x, normalVec.y, normalVec.z, 0,

    biTangentVec.x, biTangentVec.y, biTangentVec.z, 0,

    0, 0, 0, 1,

  ])

  const tangentMag = 1 + displacement.mag() * 0.0025

  const scaleMatrix = new DOMMatrixReadOnly([

    tangentMag, 0, 0, 0,

    0, 1/tangentMag, 0, 0,

    0, 0, 1, 0,

    0, 0, 0, 1,

  ])

  const transform = new DOMMatrixReadOnly()

    .multiply(toTangentSpace)

    .multiply(scaleMatrix)

    .multiply(toTangentSpace.inverse())

    .translate(displacement.x, displacement.y, displacement.z)

  push()

  applyMatrix(...transform.toFloat32Array())

  rotateZ(PI * 0.8)

  rotateY(PI * 0.7)

  rotateX(PI * -0.2)

  scale(120)

  push()

  fill(255)

  specularMaterial(255)

  shininess(100)

  ambientMaterial(255)

  ambientLight('#948979')

  model(eggWhite)

  pop()

  push()

  ambientMaterial('#ede185')

  specularMaterial(20)

  shininess(1)

  ambientLight('#9c8665')

  model(eggYolk)

  pop()

  pop()

  // sphere(20)

  // push()

  // translate(displacement.x, displacement.y, displacement.z)

  // sphere(20)

  // pop()

}