reactive-graphics

A minimal opinionated graphic engine based on rxjs.

[DRAFT DOCUMENT...]

Reactive Graphics is a typescript library for creating 2D graphics and animations using the Canvas API, with capabilities for interactions and collision detection. The library is strongly based on Rxjs (as its unique dependency) offering a variety of Rxjs operators to develop animations easily.

Another facility the library provides is Modelling, leveraging the Canvas API for building graphic blocks in a more declaratively way using compositions. Eventually every model is built as a collection of graphic paths. It benefits from using the efficient Path2D as a result.

Main features

Graphics

• Using Canvas API directly
• Graphics modelling:
  • Composition
  • Geometric transformations
• Working with paths
  • Using PathBuilder
  • funcitonal paths
  • merge & join

Animations

• Animations
• Effects
• Transitions

Layers

• Control groups of graphics
• Layer features:
  • Geometric transformations
  • Visibility
  • Sensitivity

Interaction

• Input devices
• Contacts
• Collisions

Frame control

• Pace
• Pause/sleep

Getting started

[PENDING DOCS...]

[installation] CDN / npm

[showcase quick examples]

• Minimal example (rect/bezier/SVG Path) with & without reactive-graphics
• functional paths & join
• Composition
• Effects & interaction