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.