shrimpc.at

Inspired from picklecat

Wanna understand more how it works? Go to:

http://shrimpc.at?debug

Tools used

• three.js
• cannon.js for physics
• tween.js to animate the arms
• pixi.js for the postprocessing

threejs-modern-app was used as a starter-kit, to glue all those libraries together, also as a component organizer, three.js boilerplate concealer and asset loader.

Highlights

• Simulate quadratic drag force in cannon.js! [link to code]

class CannonSuperBody extends CANNON.Body {
  // Fd = - Constant * getMagnitude(velocity)**2 * normalize(velocity)
  applyDrag(coefficient) {
    const speed = this.velocity.length()

    const dragMagnitude = coefficient * speed ** 2

    const drag = this.velocity.clone()
    drag.scale(-1, drag)

    drag.normalize()

    drag.scale(dragMagnitude, drag)

    this.applyGenericForce(drag)
  }

  // apply a force in its center of mass
  applyGenericForce(force) {
    const centerInWorldCoords = this.pointToWorldFrame(new CANNON.Vec3())
    this.applyForce(force, centerInWorldCoords)
  }
}

• Shrimps jumping up and down in the van (this was fun!) [link to code]

// make the shrimps jump up and down
this.vanShrimps.forEach((shrimp, i) => {
  shrimp.position.y = this.initialY + Math.sin(time * 20 + i) * 0.09
})

• 3D effect for the cat face was made using a displacement imege on a plane geometry. I created the displacement image using Blender, here is the process: