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.