coffee-physics-ts

Coffee Physics TS is a TypeScript port of Coffee-Physics by Justin Windle (a.k.a. soulwire) ‘A simple, lightweight physics engine written in CoffeeScript’

Usage

Import any classes you plan to use

import {
    Vector,
    Particle,
    Physics,
    Spring,
    Euler,
    ImprovedEuler,
    Verlet,
    Attraction,
    Collision,
    ConstantForce,
    EdgeBounce,
    EdgeWrap,
    Gravity,
    Wander,
} from "coffee-physics-ts"

Create a physics instance

const physics = new Physics(new Verlet())

Coffee Physics offers three integrations methods: Euler, ImprovedEuler, and Verlet. Verlet integration is required for simulating particle collisions. Euler integration will be used if no method is specified.

Define the behaviours affecting particles

const avoid = new Attraction(undefined, 100, -1000)
const pullToCenter = new Attraction(undefined, undefined, 120)
const collision = new Collision()

Coffee Physics provides the following behaviours:

• Attraction applies an attractive force to particles within a certain radius towards a target point.
• Collision detects collisions between particles and reacts accordingly, either by stopping particles from overlapping or by bouncing them off each other.
• ConstantForce applies a constant force causing particles to accelerate.
• EdgeBounce bounces particles off the edges of the specified min and max boundaries.
• EdgeWrap wraps particles around to the opposite side of the specified min and max boundaries.
• Gravity applies a gravitational force to particles. On devices with motion sensors the direction and magnitude of the force is controlled by tilting the device.
• Wander simulates an organic, meandering motion often seen in natural systems

Apply global behaviours on the physics instance

physics.behaviours = [avoid, pullToCenter, collision]

These behaviours will affects all particles in the simulation

Create some particles

const particles = []
for (let i = 0; i < 200; i++) {
    // Create a particle
    const mass = 2
    const particle = new Particle(mass)
    particle.setRadius(mass * 10)

    // Make it collidable by adding it to the collision pool
    collision.pool.push(particle)

    // Then add it to the simulation
    physics.particles.push(particle)
}

Behaviours can also be applied to a particle directly: particle.behaviours = [avoid, pullToCenter, collision]

Start the simulation

let animationFrameId = null
const updatePhysics = () => {
    physics.step()
    animationFrameId = requestAnimationFrame(updatePhysics)
}
animationFrameId = requestAnimationFrame(updatePhysics)

Clean up when you are done

cancelAnimationFrame(animationFrameId)

Coffee Physics doesn't handle rendering

Coffee Physics TS is just a physics engine. The only job it does is to calculate the position of particles in the simulation. That means you need to combine it with a system for drawing the particles in the browser.

Check out this demo that uses React and Framer Motion.