Particles

In a Verlet integration simulation, the world is made of particles (also called points). A particle is the simplest and most fundamental object.

What is a Particle?

A particle is a point in space that has a few basic properties:

• A current position (pos)
• A last position (lastPos) to track its movement
• An acceleration (acc) which is updated on each frame (e.g., by gravity)
• A mass (mass) which influences how it reacts to forces
• An optional style (style) for rendering

You might notice that there is no velocity property. This is the key characteristic of Verlet integration. A particle's velocity is implicitly calculated by comparing its current position to its last position (pos.sub(lastPos)). This makes the simulation very stable and efficient.

Creating a Particle

Here is how you can create a single particle in your simulation.

React

In verlet-react, you use the <Point> component to create a particle. You must provide a unique id and its initial pos.

import React from 'react';
import { VerletCanvas, Point } from 'verlet-react';
import { Vec2 } from 'verlet-engine';

const App = () => {
  return (
    <VerletCanvas>
      {/* This creates a particle at position (100, 100) */}
      <Point id="p1" pos={new Vec2(100, 100)} />
    </VerletCanvas>
  );
};

JavaScript

In verlet-engine, you create an instance of the Particle class.

import { VerletJS, Particle, Vec2 } from 'verlet-engine';

const sim = new VerletJS(500, 500);

// This creates a particle at position (100, 100)
const particle = new Particle(new Vec2(100, 100));

// Don't forget to add it to the simulation
sim.addParticle(particle);

/* ... animation loop ... */

Particle Properties

You can customize a particle's behavior and appearance with additional properties.

pinned: Making a Particle Static

If you want a particle to be immovable, you can "pin" it. A pinned particle will not be affected by gravity or any other forces. This is useful for creating fixed points to which other objects can be attached.

React

Add the pinned prop to the <Point> component.

<Point id="p1" pos={new Vec2(100, 100)} pinned />

JavaScript

To pin a particle, you need to add a PinConstraint to it.

import { PinConstraint } from 'verlet-engine';

const particle = new Particle(new Vec2(100, 100));
const pin = new PinConstraint(particle, particle.pos);

sim.addParticle(particle);
sim.addConstraint(pin);

style: Customizing Appearance

You can change the color and size of a particle for rendering. The style object can have radius and color properties.

React

Pass a style object to the <Point> component.

<Point 
  id="p1" 
  pos={new Vec2(100, 100)} 
  style={{ color: '#ff0000', radius: 10 }} 
/>

JavaScript

Set the style property on the Particle instance.

const particle = new Particle(new Vec2(100, 100));
particle.style.color = '#ff0000';
particle.style.radius = 10;