coffee-physics-ts v1.0.5
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.