A React wrapper library for verlet-engine, providing declarative components for 2D Verlet physics simulations.
npm install verlet-reactA React wrapper library for verlet-engine, providing declarative components to easily integrate 2D Verlet physics simulations into your React applications.
``bash`
npm install verlet-react verlet-engineor
yarn add verlet-react verlet-engine
`typescript
import { VerletCanvas, LineSegments, Point, Cloth, Tire } from 'verlet-react';
import { Vec2 } from 'verlet-engine';
function App() {
return (
new Vec2(20, 300),
new Vec2(40, 300),
new Vec2(60, 300),
new Vec2(80, 300),
new Vec2(100, 300),
]}
stiffness={0.02}
pins={[0, 4]}
/>
width={150}
height={100}
segments={10}
pinMod={3}
stiffness={0.1}
/>
radius={50}
segments={20}
spokeStiffness={0.3}
treadStiffness={0.9}
/>
);
}
export default App;
`
- : The main component that sets up the Verlet physics simulation and provides a canvas for rendering. All other Verlet components should be children of VerletCanvas.
- : Renders a single particle at the given position.
- : Renders a series of particles connected by distance constraints, forming a line. pins is an optional array of indices to pin specific particles.
- : Renders a cloth-like structure.
- : Renders a tire-like structure.
- useVerlet(): A hook to initialize and manage the Verlet physics engine.useVerletContext()
- : A hook to access the Verlet engine instance from within components nested inside VerletCanvas.
- Vec2: A 2D vector type from verlet-engine`.
Contributions are very welcome! If you have any suggestions, bug reports, or want to contribute code, please feel free to open an issue or a pull request on the GitHub repository.
This project is licensed under the MIT License. See the LICENSE file for details.