physical-svg

Is typescript library for node.js that runs physical simulation on your svg picture in browser. This project uses awesome 2d physic library matterjs and for bezier curves bezier-js.

Installation

npm install physical-svg

or use js directly https://raw.githubusercontent.com/richardk123/physical-svg/main/dist/bundle.js with basic use example https://github.com/richardk123/physical-svg/blob/main/dist/example_usage.html

How to use?

PhysicalSvg(svgElement)
    .usePathAggregator()
    .withGravity({x: 0, y: 1})
    .withLimitVelocityPlugin(8)
    .withLimitAngularVelocityPlugin(Math.PI / 100)
    .withBorderCollider()
    .withMouseInteraction(0.01)
    .withDebugRenderer(debugElement!)
    .startSimulation({colliderWidth: 5, restitution: .9, friction: 0, frictionAir: 0});

Demo

https://richardk123.github.io/physical-svg-examples/

API

PhysicalSvg(svgElement: HtmlElement): AggregatorBuilder

Offers to choose between useCollisionAggregator(), usePathAggregator() useCustomAggregator(aggregator: Aggregator)

.useCollisionAggregator(): SimulationBuilder

Aggregate svg commands to group by checking is the commands are intersecting, e.g. checks curve X line curve X curve...

.usePathAggregator(): SimulationBuilder

Aggregate svg commands by path specified in svg content

.useCustomAggregator(aggregator: Aggregator): SimulationBuilder

Use your own better aggregator

.withGravity({x: number, y: number): SimulationBuilder

Set gravity vector

.withLimitVelocityPlugin(maxSpeed: number): SimulationBuilder

Set max speed for all objects in scene. This is useful if colliders are thin and with high speed they are passing through themselves.

.withLimitAngularVelocityPlugin(maxSpeed: number): SimulationBuilder

Set max angular velocity in radians. This is useful if colliders are thin and with high speed they are passing through themselves.

.withBorderCollider(): SimulationBuilder

Create a collider around svg borders.

.withMouseInteraction(mouseForce: number): SimulationBuilder

Mouse can interact with physical objects.

.withScrollInteraction(scrollForce: number): SimulationBuilder

Force is applied to physical object when scrolling through page.

.withDebugRenderer(elementToAddCanvas?: HTMLElement): SimulationBuilder

Use if you want to see what is going on in physics engine.

.withCustomPlugin(plugin: PhysicsPlugin): SimulationBuilder

Your own awesome plugin.

.startSimulation(config: BodyConfig): StopPhysicalSvg

start simulation loop and return StopPhysicalSvg