OMD Shape Components

SVG geometry shapes rendered via the OMD library. All shapes are loaded with loadFromJSON() and passed to omdDisplay or omdCanvas.

import { omdRectangle } from '@teachinglab/omd';
const shape = new omdRectangle();
shape.loadFromJSON({ width: 5, height: 3, unitScale: 40, showLabels: true });

unitScale (pixels per unit) controls the rendered size. showLabels enables automatic dimension labels on all shapes.

rightTriangle

A right triangle with the right angle at the bottom-right vertex.

* horizontalLeg and verticalLeg are required unless angleA + hypotenuse are provided instead.

Do not use width, height, or color fields.

import { omdRightTriangle } from '@teachinglab/omd';
const tri = new omdRightTriangle();
tri.loadFromJSON({ horizontalLeg: 6, verticalLeg: 8, unitScale: 30, showLabels: true });

isoscelesTriangle

An isosceles triangle with the apex centered above the base.

import { omdIsoscelesTriangle } from '@teachinglab/omd';
const tri = new omdIsoscelesTriangle();
tri.loadFromJSON({ base: 4, height: 6, unitScale: 40 });

rectangle

A rectangle with optional side labels, center label, and outside labels.

Do not use a top-level color field.

import { omdRectangle } from '@teachinglab/omd';
const rect = new omdRectangle();
rect.loadFromJSON({
  width: 5,
  height: 3,
  unitScale: 40,
  showLabels: true,
  labelMode: 'side',
  centerLabel: 'A = 15',
  outsideTopLabel: 'base'
});

rectangularPrism

A 3D rectangular prism drawn in oblique projection with optional dimension annotations.

import { omdRectangularPrism } from '@teachinglab/omd';
const prism = new omdRectangularPrism();
prism.loadFromJSON({
  length: 4,
  width: 2,
  height: 3,
  unitScale: 30,
  showLabels: true,
  insideLabel: 'V = 24 units³'
});

ellipse

An ellipse defined by horizontal and vertical radii.

import { omdEllipse } from '@teachinglab/omd';
const ellipse = new omdEllipse();
ellipse.loadFromJSON({ width: 4, height: 2, unitScale: 35, showLabels: true });

circle

A circle with optional annotated points and segments between points.

Point fields:

Do not use a top-level color field.

import { omdCircle } from '@teachinglab/omd';
const circle = new omdCircle();
circle.loadFromJSON({
  radius: 4,
  unitScale: 35,
  points: [
    { name: 'O', type: 'center' },
    { name: 'A', type: 'circumference', angle: 0 },
    { name: 'B', type: 'circumference', angle: 90 }
  ],
  segments: [
    { from: 'O', to: 'A', label: 'r = 4' },
    { from: 'A', to: 'B', color: '#e03' }
  ]
});

angle

One or more rays from a shared vertex with arc markers and angle labels.

Ray fields:

Angle marker fields (angles array):

Do not use width, height, or top-level color fields.

import { omdAngle } from '@teachinglab/omd';
const angle = new omdAngle();
angle.loadFromJSON({
  rays: [
    { angle: 0, label: 'B' },
    { angle: 50, label: 'A' }
  ],
  angles: [
    { from: 0, to: 1, label: '50°', marker: 'arc' }
  ],
  vertexLabel: 'C',
  arcRadius: 50
});

regularPolygon

A regular polygon centered in its viewbox, with an optional side-length label.

Use numberOfSides, not sides.

import { omdRegularPolygon } from '@teachinglab/omd';
const hex = new omdRegularPolygon();
hex.loadFromJSON({ numberOfSides: 6, radius: 4, unitScale: 30, showLabels: true });