G20 Geometric Algebra 2D Graphics Monorepo
Overview
A modern JavaScript (TypeScript) suite of ESM modules for rendering 2D graphics using Scalable Vector Graphics (SVG) in the browser.
Live Demo of Block on a Ramp in STEMCstudio
Features and Benefits
- Cartesian (y increasing upwards), SVG (y increasing downwards), and other Coordinate Systems.
- Fine-Grained Reactivity for efficient updating.
- Dynamic diagram updating using reactive position, attitude, and scale properties to link shapes and text together.
- Geometric Algebra enabled multivectors for shape position and attitude properties providing coordinate-free and coordinate-based manipulation.
- Accurate (automatically generated) type definitions and API documentation.
- ESM, System, CommonJS, and UMD distribution formats.
- Modular package organization so that you only have to download what you need.
Status
All packages are published together with the same version number.
Tutorials and Examples
A book is in the works.
In the meantime, a search of @g20 in the STEMCarXiv (STEMCstudio archive) at STEMCstudio should produce many working examples.
Packages and API Documentation
@g20/core
The core library that renders SVG. Required.
@g20/svg
The SVG librray for creating SVG in the browser.
@g20/reactive
The shared reactive signals library. Required. You will only need to use this directly if you are creating your own shape extensions.
@g20/canvas
The HTML Canvas rendering library. Optional. Facilitates the generation of png images.
Live Demo of CanvasView in STEMCstudio
Hint: Launch the Program from the toolbar then right-click the output to obtain an image.
@g20/euclid
Provides functions for computing circle and line intersections. Optional.
Live Demo of Euclid's Elements Construction in STEMCstudio
@g20/gradient
Provides Linear and Radial Gradients. Optional. Gradients are instances of ColorProvider(s), which can be used for shape fill and stroke properties. You may extend @g20 with custom ColorProvider(s).
Live Demo of Linear and Radial Gradients in STEMCstudio
@g20/graphics
Provides RegularPolygon, RoundedRectangle, and Star shapes. Optional. Shapes such as these are extensions of the Path class. You may extend @g20 with custom Path based classes.
Live Demo of Graphics shapes in STEMCstudio
@g20/grid
Provides a coordinate grid (Grid) and coordinate axes (Axes). Optional. The Axes and Grid classes extends Group and provide examples of extending @g20 with custom shapes based upon composition of existing shapes.
Live Demo of Grid in STEMCstudio
@g20/player
Provides a Player for controlling animation frame start, and pause. Optional.
Live Demo of Player in STEMCstudio
@g20/mock
Mock SVG DOM for Unit Testing
@g20/browser
A bundle containing most of the modules described here especially designed for use in web pages without a module loader. The Universal Module Definition is supported.