Generated from source code. Public classes, methods, and functions are shown as a compact reference with signatures, parameters, returns, notes, and coverage.
js/src/canvas.js
class
ShapeCanvas
class ShapeCanvas
ShapeCanvas — normalized drawing surface for ember-edu simulations. Coordinate system (matches Python): (-1, 0) left (1, 0) right (0, -1) top (0, 1) bottom (0, 0) center All color arguments are [r, g, b] arrays (0-255). All x/y arguments are normalized coordinates.
- Parameters
- Constructor arguments are documented on constructor().
- Returns
- Instance of ShapeCanvas.
- When to use
- Useful for consistent styling without hand-tuned CSS or colors.
- Covers
- Themes, palettes, opacity, visual emphasis.
method
ShapeCanvas.constructor
constructor(ctx, x, y, w, h, theme)
No description provided yet.
- Parameters
- ctx, x, y, w, h, theme
- Returns
- Returns this, a computed value, or draws to the canvas depending on method.
- When to use
- Useful as a general Ember building block.
- Covers
- Educational simulation authoring.
method
ShapeCanvas.layout
layout(nodes = [], links = [], opts = {})
Compute normalized positions for named nodes.
- Parameters
- nodes = [], links = [], opts = {}
- Returns
- Returns this, a computed value, or draws to the canvas depending on method.
- When to use
- Useful for keeping coordinate and routing math out of generated examples.
- Covers
- Placement, routing, node/link scenes, semantic sketches.
method
ShapeCanvas.route
route(positions, from, to, opts = {})
Return a routed path between two node ids in a layout map.
- Parameters
- positions, from, to, opts = {}
- Returns
- Returns this, a computed value, or draws to the canvas depending on method.
- When to use
- Useful for keeping coordinate and routing math out of generated examples.
- Covers
- Placement, routing, node/link scenes, semantic sketches.
method
ShapeCanvas.diagram
diagram(specOrNodes, maybeLinks = [], t = 0, opts = {})
Draw a coordinate-free node/link diagram and return its positions.
- Parameters
- specOrNodes, maybeLinks = [], t = 0, opts = {}
- Returns
- Returns this, a computed value, or draws to the canvas depending on method.
- When to use
- Useful for keeping coordinate and routing math out of generated examples.
- Covers
- Placement, routing, node/link scenes, semantic sketches.
method
ShapeCanvas.scene
scene(specOrObjects, maybeRelations = [], opts = {})
Render a semantic scene from roles, glyphs, motion, and relations.
- Parameters
- specOrObjects, maybeRelations = [], opts = {}
- Returns
- Returns this, a computed value, or draws to the canvas depending on method.
- When to use
- Useful for keeping coordinate and routing math out of generated examples.
- Covers
- Placement, routing, node/link scenes, semantic sketches.
method
ShapeCanvas.rect
rect(x, y, w = 0.18, h = 0.12, color = [90,120,180], opts = {})
Rounded rectangle — hardware block, agent, organelle, matrix cell.
- Parameters
- x, y, w = 0.18, h = 0.12, color = [90,120,180], opts = {}
- Returns
- Returns this, a computed value, or draws to the canvas depending on method.
- When to use
- Useful as a general Ember building block.
- Covers
- Educational simulation authoring.
method
ShapeCanvas.oval
oval(x, y, rx = 0.12, ry = 0.09, color = [90,120,180], opts = {})
Ellipse — particle, planet, cell, atom, node.
- Parameters
- x, y, rx = 0.12, ry = 0.09, color = [90,120,180], opts = {}
- Returns
- Returns this, a computed value, or draws to the canvas depending on method.
- When to use
- Useful when something visibly travels between states or objects.
- Covers
- Current, data, blood, money, signals, fluids.
method
ShapeCanvas.circle
circle(x, y, r = 0.12, color = [90,120,180], opts = {})
Circle — shorthand for oval with equal radii.
- Parameters
- x, y, r = 0.12, color = [90,120,180], opts = {}
- Returns
- Returns this, a computed value, or draws to the canvas depending on method.
- When to use
- Useful as a general Ember building block.
- Covers
- Educational simulation authoring.
method
ShapeCanvas.blob
blob(points, color, opts = {})
Organic filled shape defined by a polygon of normalized points.
- Parameters
- points, color, opts = {}
- Returns
- Returns this, a computed value, or draws to the canvas depending on method.
- When to use
- Useful as a general Ember building block.
- Covers
- Educational simulation authoring.
method
ShapeCanvas.line
line(points, color, opts = {})
Smooth polyline — connection, boundary, waveform, trajectory.
- Parameters
- points, color, opts = {}
- Returns
- Returns this, a computed value, or draws to the canvas depending on method.
- When to use
- Useful as a general Ember building block.
- Covers
- Educational simulation authoring.
method
ShapeCanvas.flow
flow(points, color, t, opts = {})
Animated particle stream — current, data, fluid, signal, money.
- Parameters
- points, color, t, opts = {}
- Returns
- Returns this, a computed value, or draws to the canvas depending on method.
- When to use
- Useful when something visibly travels between states or objects.
- Covers
- Current, data, blood, money, signals, fluids.
method
ShapeCanvas.arrow
arrow(x1, y1, x2, y2, color, opts = {})
Directed arrow — force vector, causality, data direction, gradient.
- Parameters
- x1, y1, x2, y2, color, opts = {}
- Returns
- Returns this, a computed value, or draws to the canvas depending on method.
- When to use
- Useful when something visibly travels between states or objects.
- Covers
- Current, data, blood, money, signals, fluids.
method
ShapeCanvas.badge
badge(x, y, text, color, opts = {})
Colored dot + right-aligned label — named state, status, classification.
- Parameters
- x, y, text, color, opts = {}
- Returns
- Returns this, a computed value, or draws to the canvas depending on method.
- When to use
- Useful for consistent styling without hand-tuned CSS or colors.
- Covers
- Themes, palettes, opacity, visual emphasis.
method
ShapeCanvas.grid
grid(x, y, cols, rows, cells, opts = {})
Generic 2-D grid of colored tiles. cells = [[color, label], …]. Use for cache lines, memory pages, truth tables, periodic table, heatmaps.
- Parameters
- x, y, cols, rows, cells, opts = {}
- Returns
- Returns this, a computed value, or draws to the canvas depending on method.
- When to use
- Useful for consistent styling without hand-tuned CSS or colors.
- Covers
- Themes, palettes, opacity, visual emphasis.
method
ShapeCanvas.text
text(text, x, y, opts = {})
Text label. anchor: "mm" center, "lm" left, "rm" right, "mt" top, "mb" bottom.
- Parameters
- text, x, y, opts = {}
- Returns
- Returns this, a computed value, or draws to the canvas depending on method.
- When to use
- Useful as a general Ember building block.
- Covers
- Educational simulation authoring.
js/src/lesson.js
class
Lesson
class Lesson
Lesson — the central orchestrator for ember-edu simulations. Usage: const lesson = new Lesson('Title', { theme: 'neon' }); lesson.state._time = 0; lesson.rate('_time', () => 1.0); lesson.show(new Sketch(draw, 'legend')); lesson.explain('One sentence.'); lesson.run('#my-canvas');
- Parameters
- Constructor arguments are documented on constructor().
- Returns
- Instance of Lesson.
- When to use
- Useful for building an interactive simulation around state and time.
- Covers
- Controls, derived values, integration, animation clocks.
method
Lesson.constructor
constructor(title, opts = {})
No description provided yet.
- Parameters
- title, opts = {}
- Returns
- Returns this, a computed value, or draws to the canvas depending on method.
- When to use
- Useful for building an interactive simulation around state and time.
- Covers
- Controls, derived values, integration, animation clocks.
method
Lesson.rate
rate(name, fn)
Define a rate of change (integrated each frame).
- Parameters
- name, fn
- Returns
- Returns this, a computed value, or draws to the canvas depending on method.
- When to use
- Useful for building an interactive simulation around state and time.
- Covers
- Controls, derived values, integration, animation clocks.
method
Lesson.clock
clock(name = '_time', speed = 1.0)
Add a monotonically increasing time value for animation.
- Parameters
- name = '_time', speed = 1.0
- Returns
- Returns this, a computed value, or draws to the canvas depending on method.
- When to use
- Useful for building an interactive simulation around state and time.
- Covers
- Controls, derived values, integration, animation clocks.
method
Lesson.rule
rule(name, fn)
Define a derived value (recomputed each frame, read-only).
- Parameters
- name, fn
- Returns
- Returns this, a computed value, or draws to the canvas depending on method.
- When to use
- Useful for building an interactive simulation around state and time.
- Covers
- Controls, derived values, integration, animation clocks.
method
Lesson.input
input(name, min, max, defaultVal, opts = {})
Add an interactive slider. keys = [upKey, downKey] for keyboard control.
- Parameters
- name, min, max, defaultVal, opts = {}
- Returns
- Returns this, a computed value, or draws to the canvas depending on method.
- When to use
- Useful for building an interactive simulation around state and time.
- Covers
- Controls, derived values, integration, animation clocks.
method
Lesson.show
show(concept)
Add a visual concept (Sketch, Flow, Pipeline, …).
- Parameters
- concept
- Returns
- Returns this, a computed value, or draws to the canvas depending on method.
- When to use
- Useful when something visibly travels between states or objects.
- Covers
- Current, data, blood, money, signals, fluids.
method
Lesson.explain
explain(fn)
Add a caption shown below the scene. Can be a string or fn(state) → string.
- Parameters
- fn
- Returns
- Returns this, a computed value, or draws to the canvas depending on method.
- When to use
- Useful for keeping coordinate and routing math out of generated examples.
- Covers
- Placement, routing, node/link scenes, semantic sketches.
method
Lesson.run
run(target = '#ember-canvas')
Start the animation loop. target = CSS selector or HTMLCanvasElement.
- Parameters
- target = '#ember-canvas'
- Returns
- Returns this, a computed value, or draws to the canvas depending on method.
- When to use
- Useful for building an interactive simulation around state and time.
- Covers
- Controls, derived values, integration, animation clocks.
method
Lesson.stop
stop()
No description provided yet.
- Parameters
- No inputs.
- Returns
- Returns this, a computed value, or draws to the canvas depending on method.
- When to use
- Useful for building an interactive simulation around state and time.
- Covers
- Controls, derived values, integration, animation clocks.
method
Lesson.record
record(seconds = 5, filename = 'simulation.webm', fps = 30)
Record a WebM clip and trigger a download. Returns a Promise<Blob>.
- Parameters
- seconds = 5, filename = 'simulation.webm', fps = 30
- Returns
- Returns this, a computed value, or draws to the canvas depending on method.
- When to use
- Useful for building an interactive simulation around state and time.
- Covers
- Controls, derived values, integration, animation clocks.
js/src/concepts.js
class
Sketch
class Sketch
Sketch — free-form drawing using ShapeCanvas. Example: new Sketch((c, s) => { c.rect(-0.5, 0, 0.16, 0.10, [50, 130, 230], { label: 'CPU' }); c.flow([[-0.4, 0], [0.4, 0]], [255,200,60], s._time); }, 'CPU · Cache · RAM')
- Parameters
- Constructor arguments are documented on constructor().
- Returns
- Instance of Sketch.
- When to use
- Useful when something visibly travels between states or objects.
- Covers
- Current, data, blood, money, signals, fluids.
method
Sketch.constructor
constructor(drawFn, label = '')
No description provided yet.
- Parameters
- drawFn, label = ''
- Returns
- Returns this, a computed value, or draws to the canvas depending on method.
- When to use
- Useful as a general Ember building block.
- Covers
- Educational simulation authoring.
method
Sketch.render
render(ctx, x, y, w, h, state, theme)
No description provided yet.
- Parameters
- ctx, x, y, w, h, state, theme
- Returns
- Returns this, a computed value, or draws to the canvas depending on method.
- When to use
- Useful as a general Ember building block.
- Covers
- Educational simulation authoring.
class
Diagram
class Diagram
Diagram — coordinate-free node/link diagram.
- Parameters
- Constructor arguments are documented on constructor().
- Returns
- Instance of Diagram.
- When to use
- Useful for keeping coordinate and routing math out of generated examples.
- Covers
- Placement, routing, node/link scenes, semantic sketches.
method
Diagram.constructor
constructor(nodes, links = [], opts = {})
No description provided yet.
- Parameters
- nodes, links = [], opts = {}
- Returns
- Returns this, a computed value, or draws to the canvas depending on method.
- When to use
- Useful for keeping coordinate and routing math out of generated examples.
- Covers
- Placement, routing, node/link scenes, semantic sketches.
method
Diagram.update
update(dt, state)
No description provided yet.
- Parameters
- dt, state
- Returns
- Returns this, a computed value, or draws to the canvas depending on method.
- When to use
- Useful for keeping coordinate and routing math out of generated examples.
- Covers
- Placement, routing, node/link scenes, semantic sketches.
method
Diagram.render
render(ctx, x, y, w, h, state, theme)
No description provided yet.
- Parameters
- ctx, x, y, w, h, state, theme
- Returns
- Returns this, a computed value, or draws to the canvas depending on method.
- When to use
- Useful for keeping coordinate and routing math out of generated examples.
- Covers
- Placement, routing, node/link scenes, semantic sketches.
class
SemanticScene
class SemanticScene
SemanticScene — role-based visual scene that owns geometry and paths. Use when the lesson is objects plus relations: source -> mechanism -> response, moving part -> mediator -> output, or agent -> channel -> state.
- Parameters
- Constructor arguments are documented on constructor().
- Returns
- Instance of SemanticScene.
- When to use
- Useful for keeping coordinate and routing math out of generated examples.
- Covers
- Placement, routing, node/link scenes, semantic sketches.
method
SemanticScene.constructor
constructor(objects, relations = [], opts = {})
No description provided yet.
- Parameters
- objects, relations = [], opts = {}
- Returns
- Returns this, a computed value, or draws to the canvas depending on method.
- When to use
- Useful for keeping coordinate and routing math out of generated examples.
- Covers
- Placement, routing, node/link scenes, semantic sketches.
method
SemanticScene.update
update(dt, state)
No description provided yet.
- Parameters
- dt, state
- Returns
- Returns this, a computed value, or draws to the canvas depending on method.
- When to use
- Useful for keeping coordinate and routing math out of generated examples.
- Covers
- Placement, routing, node/link scenes, semantic sketches.
method
SemanticScene.render
render(ctx, x, y, w, h, state, theme)
No description provided yet.
- Parameters
- ctx, x, y, w, h, state, theme
- Returns
- Returns this, a computed value, or draws to the canvas depending on method.
- When to use
- Useful for keeping coordinate and routing math out of generated examples.
- Covers
- Placement, routing, node/link scenes, semantic sketches.
class
Flow
class Flow
Flow — generalises current, water, traffic, money, information.
- Parameters
- Constructor arguments are documented on constructor().
- Returns
- Instance of Flow.
- When to use
- Useful when something visibly travels between states or objects.
- Covers
- Current, data, blood, money, signals, fluids.
method
Flow.constructor
constructor(rateKey, label = 'Flow')
No description provided yet.
- Parameters
- rateKey, label = 'Flow'
- Returns
- Returns this, a computed value, or draws to the canvas depending on method.
- When to use
- Useful when something visibly travels between states or objects.
- Covers
- Current, data, blood, money, signals, fluids.
method
Flow.update
update(dt, state)
No description provided yet.
- Parameters
- dt, state
- Returns
- Returns this, a computed value, or draws to the canvas depending on method.
- When to use
- Useful when something visibly travels between states or objects.
- Covers
- Current, data, blood, money, signals, fluids.
method
Flow.render
render(ctx, x, y, w, h, state, theme)
No description provided yet.
- Parameters
- ctx, x, y, w, h, state, theme
- Returns
- Returns this, a computed value, or draws to the canvas depending on method.
- When to use
- Useful when something visibly travels between states or objects.
- Covers
- Current, data, blood, money, signals, fluids.
class
Accumulation
class Accumulation
Accumulation — tank, battery, population, capital, buffer.
- Parameters
- Constructor arguments are documented on constructor().
- Returns
- Instance of Accumulation.
- When to use
- Useful as a general Ember building block.
- Covers
- Educational simulation authoring.
method
Accumulation.constructor
constructor(key, maxVal = 100, label = 'Storage')
No description provided yet.
- Parameters
- key, maxVal = 100, label = 'Storage'
- Returns
- Returns this, a computed value, or draws to the canvas depending on method.
- When to use
- Useful as a general Ember building block.
- Covers
- Educational simulation authoring.
method
Accumulation.render
render(ctx, x, y, w, h, state, theme)
No description provided yet.
- Parameters
- ctx, x, y, w, h, state, theme
- Returns
- Returns this, a computed value, or draws to the canvas depending on method.
- When to use
- Useful as a general Ember building block.
- Covers
- Educational simulation authoring.
class
Pipeline
class Pipeline
Pipeline — staged process: CPU pipeline, workflow, model layers.
- Parameters
- Constructor arguments are documented on constructor().
- Returns
- Instance of Pipeline.
- When to use
- Useful when something visibly travels between states or objects.
- Covers
- Current, data, blood, money, signals, fluids.
method
Pipeline.constructor
constructor(stages, activeKey = null, label = 'Pipeline')
No description provided yet.
- Parameters
- stages, activeKey = null, label = 'Pipeline'
- Returns
- Returns this, a computed value, or draws to the canvas depending on method.
- When to use
- Useful as a general Ember building block.
- Covers
- Educational simulation authoring.
method
Pipeline.update
update(dt, state)
No description provided yet.
- Parameters
- dt, state
- Returns
- Returns this, a computed value, or draws to the canvas depending on method.
- When to use
- Useful as a general Ember building block.
- Covers
- Educational simulation authoring.
method
Pipeline.render
render(ctx, x, y, w, h, state, theme)
No description provided yet.
- Parameters
- ctx, x, y, w, h, state, theme
- Returns
- Returns this, a computed value, or draws to the canvas depending on method.
- When to use
- Useful as a general Ember building block.
- Covers
- Educational simulation authoring.