VerletJS & VerletCanvas
This page documents the main simulation container, which is the VerletJS class for vanilla JavaScript, and the <VerletCanvas> component for React.
- VerletJS (JavaScript)
- VerletCanvas (React)
This is the main class for the physics simulation. It manages the world, its properties, and all the objects within it.
Constructor
new VerletJS(width, height, [options])
Creates a new physics simulation world.
width(number): The width of the simulation world.height(number): The height of the simulation world.options(object, optional): An object to configure the simulation.
import { VerletJS } from 'verlet-engine';
const sim = new VerletJS(800, 600, { gravity: new Vec2(0, 0.5) });
Properties
width/height(number): The dimensions of the simulation world.gravity(Vec2): Global gravity vector applied to all particles.friction(number): Air friction. A value of1.0means no friction.groundFriction(number): Friction applied when a particle is on the ground boundary.restitution(number): The "bounciness" of particles on world boundaries (0= no bounce,1= perfect bounce).solverIterations(number): Number of times constraints are solved per frame. Higher values mean more rigid structures.composites(Composite[]): An array containing allCompositeobjects in the simulation. To add an object, create aCompositeand push it into this array:sim.composites.push(myComposite);.bounds(function): A function that constrains particles to the world boundaries. You can override this to change the world's behavior (e.g., to make it wrap around).
Methods
frame()
Advances the simulation by one fixed time step.
Note: The deltaTime parameter from previous versions is now ignored.
This component is the React wrapper around the VerletJS engine. It creates a simulation world and a <canvas> element to render it.
Props
width / height
- Type:
number(required)
The dimensions of the canvas and the simulation world.
options
- Type:
object(optional)
An object to configure the simulation, identical to the options for the VerletJS constructor (see the JavaScript tab).
customRenderer
- Type:
(ctx, composites) => void(optional)
A function to take over rendering. When provided, the default renderer is disabled. See the Rendering page for details.
Event Handlers
onCanvasMouseDownonCanvasMouseMoveonCanvasMouseUponCanvasMouseLeaveonCanvasTouchStartonCanvasTouchMoveonCanvasTouchEnd
These props allow you to respond to user input. They are functions that receive the React SyntheticEvent and the array of simulation composites. See the Interaction page for examples.
Other Props
Any other props (e.g., className, style) are passed directly to the underlying <canvas> element.