Maths

Graphs, matrices, transforms, vector fields, number lines and the unit circle.

import { ... } from 'cseen/math';

Functions

graph

A function plotted on axes, with an optional tangent, shaded area and Riemann rectangles.

function graph(o?: GraphOpts): Graph

Parameter	Type
o?	GraphOpts

Returns Graph

Options: GraphOpts

Example

import { Scene } from 'cseen';
import { graph } from 'cseen/math';

const s = new Scene({ view: 'front', size: [420, 262], padding: 6 });
s.add(graph({ fn: (x) => Math.sin(x) + 0.3 * x, x: [-4, 4], tangent: true, size: [4.4, 2.8] }));

Run it in the playground →

matrix

A matrix with brackets. row and col highlight a line or a cell.

function matrix(values: Mat, o?: Omit<MatrixOpts, 'values'>): Matrix

Parameter	Type
values	Mat
o?	Omit<MatrixOpts, 'values'>

Returns Matrix

Example

import { Scene } from 'cseen';
import { matrix } from 'cseen/math';

const s = new Scene({ view: 'front', size: [300, 200], padding: 6 });
s.add(matrix([[1, 2], [3, 4]], { size: [2, 1.6] }));

Run it in the playground →

numberLine

A number line with marks, a sliding marker and jumps between values.

function numberLine(o?: NumberLineOpts): NumberLine

Parameter	Type
o?	NumberLineOpts

Returns NumberLine

Options: NumberLineOpts

Example

import { Scene } from 'cseen';
import { numberLine } from 'cseen/math';

const s = new Scene({ view: 'front', size: [420, 262], padding: 6 });
s.add(numberLine({ range: [-4, 6], size: [5.4, 1.5], jumps: [{ from: 1, to: 4, label: '+3' }], marks: [{ value: 1, label: 'start' }] }));

Run it in the playground →

product

Two matrices and their product, with the entry being computed highlighted.

function product(a: Mat, b: Mat, o?: Omit<ProductOpts, 'a' | 'b'>): Product

Parameter	Type
a	Mat
b	Mat
o?	Omit<ProductOpts, 'a' | 'b'>

Returns Product

Example

import { Scene } from 'cseen';
import { product } from 'cseen/math';

const s = new Scene({ view: 'front', size: [420, 262], padding: 6 });
s.add(product([[1, 2], [3, 4]], [[5, 6], [7, 8]], { size: [5.4, 2] }));

Run it in the playground →

transform2d

The plane deformed by a 2 by 2 matrix, with the basis vectors, the unit square and the eigenvector lines.

function transform2d(matrix: Mat, o?: Omit<Transform2dOpts, 'matrix'>): Transform2d

Parameter	Type
matrix	Mat
o?	Omit<Transform2dOpts, 'matrix'>

Returns Transform2d

Example

import { Scene } from 'cseen';
import { transform2d } from 'cseen/math';

const s = new Scene({ view: 'front', size: [420, 262], padding: 6 });
s.add(transform2d([[1, 1], [0, 1]], { eigen: true, size: [4, 4] }));

Run it in the playground →

unitCircle

The unit circle, with the sine and cosine of an angle and, if asked, the wave they trace.

function unitCircle(o?: UnitCircleOpts): UnitCircle

Parameter	Type
o?	UnitCircleOpts

Returns UnitCircle

Options: UnitCircleOpts

Example

import { Scene } from 'cseen';
import { unitCircle } from 'cseen/math';

const s = new Scene({ view: 'front', size: [420, 262], padding: 6 });
s.add(unitCircle({ wave: true, tangent: false, size: [6, 2.6] }));

Run it in the playground →

vectorField

A grid of arrows showing the direction and strength of a field (x, y) => [dx, dy].

function vectorField(fn: VectorFieldOpts['fn'], o?: Omit<VectorFieldOpts, 'fn'>): VectorField

Parameter	Type
fn	(x: number, y: number) => [number, number]
o?	Omit<VectorFieldOpts, 'fn'>

Returns VectorField

Example

import { Scene } from 'cseen';
import { vectorField } from 'cseen/math';

const s = new Scene({ view: 'front', size: [420, 262], padding: 6 });
s.add(vectorField((x, y) => [-y, x], { range: [-3, 3, -2, 2], size: [4.4, 3] }));

Run it in the playground →

Classes

Graph

A function plotted on axes. Properties: x (the point and its tangent), a and b (the shaded area), n (the number of Riemann rectangles, which can grow toward the exact area) and grow (draws the curve in).

new Graph(o?: GraphOpts): Graph

Options: GraphOpts

Extends SvgPlane.

Member	Description
o: GraphOpts
integral(a?: number, b?: number): number	the area under the first function between a and b, to within a rounding error
slope(x?: number): number	the slope of the first function at x
draw(W: number, H: number): string	the drawing, in svg units: W wide and H tall, origin at the top left

Matrix

A matrix with brackets. The row and col properties move a highlight, so a timeline can walk across it.

new Matrix(o: MatrixOpts): Matrix

Options: MatrixOpts

Extends SvgPlane.

Member	Description
o: MatrixOpts
draw(W: number, H: number): string	the drawing, in svg units: W wide and H tall, origin at the top left

NumberLine

A number line. The property value is a marker that slides; jump (0 to the number of jumps) draws the arcs one by one.

new NumberLine(o?: NumberLineOpts): NumberLine

Options: NumberLineOpts

Extends SvgPlane.

Member	Description
o: NumberLineOpts
draw(W: number, H: number): string	the drawing, in svg units: W wide and H tall, origin at the top left

Product

A times B, one entry at a time. step counts the entries of the result, from 0 to rows times columns: at each one, the matching row of A and column of B light up, the sum is written below, and the entry appears.

new Product(o: ProductOpts): Product

Options: ProductOpts

Extends SvgPlane.

Member	Description
o: ProductOpts
c: Mat
draw(W: number, H: number): string	the drawing, in svg units: W wide and H tall, origin at the top left

Transform2d

The plane, deformed by a 2 by 2 matrix. t runs from 0 (the from matrix, the identity by default) to 1 (matrix), so tweening it shows what the matrix does: the grid bends, the basis vectors land on its columns, the unit square becomes a parallelogram whose area is the determinant. Rotations are interpolated as matrices, so a quarter turn shrinks a little on the way, as it does in the linear algebra.

new Transform2d(o: Transform2dOpts): Transform2d

Options: Transform2dOpts

Extends SvgPlane.

Member	Description
o: Transform2dOpts
current(): Mat	the matrix at the current t: each entry a straight blend of from and matrix
draw(W: number, H: number): string	the drawing, in svg units: W wide and H tall, origin at the top left

UnitCircle

The unit circle with the angle in the property angle (degrees): its sine, cosine and, if asked, the wave they trace.

new UnitCircle(o?: UnitCircleOpts): UnitCircle

Options: UnitCircleOpts

Extends SvgPlane.

Member	Description
o: UnitCircleOpts
draw(W: number, H: number): string	the drawing, in svg units: W wide and H tall, origin at the top left

VectorField

A grid of arrows: the direction and strength of a field at each point. grow brings the arrows in.

new VectorField(o: VectorFieldOpts): VectorField

Options: VectorFieldOpts

Extends SvgPlane.

Member	Description
o: VectorFieldOpts
draw(W: number, H: number): string	the drawing, in svg units: W wide and H tall, origin at the top left

Options and types

GraphOpts

Options of graph.

Extends SvgPlaneOpts.

Option	Type	Default	Description
fn?	((x: number) => number)		the function (default sin)
fns?	Record<string, (x: number) => number>		several functions by name, each in its own series colour
x?	[number, number]		the x range (default -3 to 3)
y?	[number, number]		the y range, [min, max] (default: fitted to the function)
axes?	boolean		draw the axes
grid?	boolean		draw the grid
tangent?	boolean		draw the tangent at the point x (a property: animate it to slide the point along)
area?	[number, number]		shade the area under the curve between the properties a and b
riemann?	{ n?: number; rule?: 'left' | 'right' | 'mid'; }		Riemann rectangles over [a, b]: n of them, with the rule picking the height. n is a property.
point?	boolean		mark the point at x
role?	string		colour role (ink, faint, accent, s1 to s8) or a role you define in CSS

Mat

A matrix as rows of numbers.

type Mat = number[][]

MatrixOpts

Options of matrix.

Extends SvgPlaneOpts.

Option	Type	Default	Description
values	Mat		the rows of numbers
row?	number		a row to highlight, -1 for none. Animatable, together with col.
col?	number		a column to highlight, -1 for none. Animatable.
format?	((v: number) => string)		how to print a number
role?	string		colour role (ink, faint, accent, s1 to s8) or a role you define in CSS
name?	string		a name shown to the left, such as A

NumberLineOpts

Options of numberLine.

Extends SvgPlaneOpts.

Option	Type	Default	Description
range?	[number, number]		the lowest and highest value shown
step?	number		distance between labelled ticks
marks?	{ value: number; label?: string; role?: string; }[]		fixed points to mark
jumps?	{ from: number; to: number; label?: string; role?: string; }[]		arcs between values, with a label such as +3
role?	string		colour role (ink, faint, accent, s1 to s8) or a role you define in CSS

ProductOpts

Options of product.

Extends SvgPlaneOpts.

Option	Type	Default	Description
a	Mat		the left matrix
b	Mat		the right matrix
role?	string		colour role (ink, faint, accent, s1 to s8) or a role you define in CSS
format?	((v: number) => string)		how to print a number

Transform2dOpts

Options of transform2d.

Extends SvgPlaneOpts.

Option	Type	Default	Description
matrix	Mat		the matrix [[a, b], [c, d]] the plane ends up at (when t is 1)
from?	Mat		the matrix it starts from. Default the identity.
range?	number		grid lines on each side of the origin
square?	boolean		draw the unit square, the basis vectors, the ghost of the original grid, and the eigenvector lines
basis?	boolean		draw the basis vectors
ghost?	boolean		draw the original grid faintly
eigen?	boolean		draw the eigenvector lines
role?	string		colour role (ink, faint, accent, s1 to s8) or a role you define in CSS

UnitCircleOpts

Options of unitCircle.

Extends SvgPlaneOpts.

Option	Type	Default	Description
wave?	boolean		also draw the sine wave unrolling to the right
tangent?	boolean		show tangent
role?	string		colour role (ink, faint, accent, s1 to s8) or a role you define in CSS

VectorFieldOpts

Options of vectorField.

Extends SvgPlaneOpts.

Option	Type	Default	Description
fn	(x: number, y: number) => [number, number]		the field: a point to a vector
range?	[number, number, number, number]		[x0, x1, y0, y1]
cells?	[number, number]		arrows across and up
strength?	boolean		colour the arrows by strength, through the theme’s ramp (default true)
axes?	boolean		draw the axes