Package Exports

physical-svg
physical-svg/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (physical-svg) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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