This page is a detailed API reference for the algovivo rendering subsystem. It covers the high-level SystemViewport and the underlying mm2d graphics library.
The rendering system is organized into two layers: a high-level viewport that is aware of the simulation, and a lower-level 2D graphics library (mm2d) that is simulation-agnostic.
High-level layer → simulation-aware rendering:
Title: "High-level Viewport Architecture"
Low-level layer → simulation-agnostic 2D rendering:
Title: "mm2d Graphics Engine Structure"
Sources: algovivo/render/SystemViewport.js1-6 algovivo/render/mm2d/core/Mesh.js1-18 algovivo/render/mm2d/core/Renderer.js1-3
SystemViewportFile: algovivo/render/SystemViewport.js
The top-level rendering object. It orchestrates the simulation visualization by bridging the System state to the mm2d renderer.
| Parameter | Type | Default | Description |
|---|---|---|---|
system | System | required | The simulation system to render algovivo/render/SystemViewport.js32 |
width | number | 400 | Canvas width in pixels algovivo/render/SystemViewport.js60 |
height | number | 400 | Canvas height in pixels algovivo/render/SystemViewport.js61 |
headless | boolean | false | Suppresses DOM element creation and event binding when true algovivo/render/SystemViewport.js39 |
draggable | boolean | true | Enables mouse/touch interaction to drag vertices algovivo/render/SystemViewport.js135 |
sortedVertexIds | number[] | null | Vertex render order (back-to-front) algovivo/render/SystemViewport.js34 |
vertexDepths | number[] | null | Array of depths used to compute sortedVertexIds algovivo/render/SystemViewport.js36 |
renderVertexIds | boolean | false | Overlay vertex index labels on the canvas algovivo/render/SystemViewport.js48 |
borderColor | string | "black" | Color for vertex and floor outlines algovivo/render/SystemViewport.js41 |
fillColor | string | "white" | Color for vertex and triangle fills algovivo/render/SystemViewport.js43 |
gridColor | string | "#acadad" | Color for background grid lines algovivo/render/SystemViewport.js44 |
activeMuscleColor | string|number[] | [255,0,0] | Color for muscles at max activation algovivo/render/SystemViewport.js70 |
inactiveMuscleColor | string|number[] | [250,190,190] | Color for muscles at zero activation algovivo/render/SystemViewport.js71 |
backgroundColor | string | null | Solid background color algovivo/render/SystemViewport.js80 |
backgroundCenterColor | string | "#fcfcfc" | Center color for radial background gradient algovivo/render/SystemViewport.js84 |
backgroundOuterColor | string | "#d7d8d8" | Outer color for radial background gradient algovivo/render/SystemViewport.js85 |
Sources: algovivo/render/SystemViewport.js27-172
| Property | Type | Description |
|---|---|---|
domElement | HTMLCanvasElement | The underlying canvas element algovivo/render/SystemViewport.js58 |
renderer | mm2d.Renderer | The mm2d renderer instance algovivo/render/SystemViewport.js57 |
scene | mm2d.Scene | The mm2d scene containing meshes algovivo/render/SystemViewport.js65 |
camera | mm2d.Camera | The mm2d camera for view transformations algovivo/render/SystemViewport.js68 |
mesh | mm2d.Mesh | The primary mesh representing the simulation agent algovivo/render/SystemViewport.js122 |
tracker | Tracker | Automates camera following of the agent algovivo/render/SystemViewport.js171 |
dragBehavior | DragBehavior | Manages interactive dragging algovivo/render/mm2d/ui/DragBehavior.js3-5 |
floor | Floor | Manages the floor visualization algovivo/render/SystemViewport.js116 |
grid | mm2d.background.Grid | Manages the dynamic background grid algovivo/render/SystemViewport.js97 |
Sources: algovivo/render/SystemViewport.js46-172 algovivo/render/mm2d/ui/DragBehavior.js3-5
render()Main entry point for drawing a frame. It updates the internal mesh geometry from the System state algovivo/render/SystemViewport.js192-198 steps the Tracker algovivo/render/SystemViewport.js208-215 and invokes the mm2d.Renderer.render algovivo/render/SystemViewport.js217
setSize({ width, height })Resizes the viewport and underlying canvas via the renderer algovivo/render/SystemViewport.js184-189
setSortedVertexIdsFromVertexDepths(depths)Computes a render order for vertices based on depth values, ensuring correct occlusion algovivo/render/SystemViewport.js174-182
TrackerFile: algovivo/render/Tracker.js
The Tracker class handles smooth camera following of the simulated agent by calculating the mesh center and updating the camera's world center.
| Method | Description |
|---|---|
step(args) | Updates the camera center based on mesh.computeCenter() and repositions the grid/floor to fill the view algovivo/render/Tracker.js13-79 |
Configuration Options:
visibleWorldWidth: Width of the world visible in the viewport algovivo/render/Tracker.js6centeringSpeedFactor: Interpolation factor for smooth movement (default 0.5) algovivo/render/Tracker.js10targetCenterY: Fixed vertical coordinate for the camera center algovivo/render/Tracker.js7Sources: algovivo/render/Tracker.js1-80 algovivo/render/mm2d/core/Mesh.js64-77
mm2d Graphics Librarymm2d.RendererFile: algovivo/render/mm2d/core/Renderer.js
The core rendering engine using the HTML5 Canvas 2D API. It supports a headless mode for server-side or background processing algovivo/render/mm2d/core/Renderer.js5-12
| Method | Description |
|---|---|
render(scene, camera) | Iterates through all meshes in the scene and draws them using the camera transformation algovivo/render/mm2d/core/Renderer.js166-178 |
renderMesh(...) | Handles the logic for rendering individual elements (points, lines, triangles) in order algovivo/render/mm2d/core/Renderer.js130-164 |
setSize(args) | Configures canvas and viewport dimensions algovivo/render/mm2d/core/Renderer.js20-48 |
Sources: algovivo/render/mm2d/core/Renderer.js3-179
mm2d.MeshFile: algovivo/render/mm2d/core/Mesh.js
Represents geometry in the scene.
pos: Vertex positions [x, y] algovivo/render/mm2d/core/Mesh.js20triangles: Indices for triangle elements [i, j, k] algovivo/render/mm2d/core/Mesh.js10lines: Indices for line elements [i, j] algovivo/render/mm2d/core/Mesh.js11pointShader, lineShader, triangleShader: Shader objects containing render callbacks algovivo/render/mm2d/core/Mesh.js13-15Sources: algovivo/render/mm2d/core/Mesh.js4-78
mm2d.background.GridFile: algovivo/render/mm2d/background/Grid.js
Generates an infinite-feeling grid by dynamically updating its mesh based on camera movement. It uses custom attributes to store line widths for the shader algovivo/render/mm2d/background/Grid.js108
| Method | Description |
|---|---|
set(args) | Updates grid boundaries, rows, and columns based on viewport needs algovivo/render/mm2d/background/Grid.js87-109 |
static makeGridLineShader(args) | Factory for a shader that renders grid lines with varying widths based on lineWidths attribute algovivo/render/mm2d/background/Grid.js111-138 |
Sources: algovivo/render/mm2d/background/Grid.js58-139
DragBehaviorFile: algovivo/render/mm2d/ui/DragBehavior.js
Handles mouse and touch events to enable vertex manipulation. It abstracts DOM event coordinates into local cursor positions algovivo/render/mm2d/ui/DragBehavior.js46-64
linkToDom(domElement): Attaches listeners for mousedown, touchstart, mousemove, and touchmove algovivo/render/mm2d/ui/DragBehavior.js41-68onDomCursorDown, onDragProgress, onDomCursorUp: User-defined callbacks for the drag lifecycle algovivo/render/mm2d/ui/DragBehavior.js7-9Sources: algovivo/render/mm2d/ui/DragBehavior.js3-69
Custom shaders are implemented as objects with a render function. The mm2d.Renderer transforms world coordinates into screen-space using the Camera and passes them to these functions.
Title: "Shader Execution Context"
| Shader Type | Method | Key Arguments |
|---|---|---|
PointShader | renderPoint | ctx, camera, id, p (screen position) algovivo/render/mm2d/core/Renderer.js59 |
LineShader | renderLine | ctx, camera, id, a, b (screen endpoints) algovivo/render/mm2d/core/Renderer.js78 |
TriangleShader | renderTriangle | ctx, camera, id, a, b, c (screen vertices) algovivo/render/mm2d/core/Renderer.js116 |
Coordinate Transformation:
Shaders should use camera.inferScale() to determine the conversion factor from world units to screen pixels to maintain consistent visual sizes (e.g., line widths or point radii) regardless of zoom level algovivo/render/mm2d/core/Camera.js15-17 test/render/mm2d/browser/public/pointShader.html41-43
Sources: algovivo/render/mm2d/core/Renderer.js50-128 algovivo/render/mm2d/core/Camera.js15-17 test/render/mm2d/browser/public/lineShader.html39-55
Refresh this wiki