mec2 for LiaScript: 2D Mechanism and Physics Simulation
- André Dietrich
- Template , Tutorial
- May 28, 2026
Mechanical engineering education benefits enormously from dynamic simulation — but setting up simulation software is a barrier. The mec2 template brings goessner’s mec2 2D physics and mechanism engine to LiaScript. Define nodes, constraints, gravity, and visualization views in JSON, and the simulation runs live in the browser.
Quick Start
<!--
import: https://raw.githubusercontent.com/liaTemplates/mec2/master/README.md
-->
Macro 1: @mec2 — Static Simulation (in fence header)
Place @mec2 at the start of a JSON code block.
The simulation renders and starts automatically when the slide loads.
```json @mec2
{
"id": "simple-pendulum",
"gravity": true,
"nodes": [
{ "id": "A0", "x": 200, "y": 400, "base": true },
{ "id": "A1", "x": 200, "y": 300, "m": 2 }
],
"constraints": [
{ "id": "c1", "p1": "A0", "p2": "A1", "len": { "type": "const" } }
],
"views": [
{ "show": "pos", "of": "A1", "as": "trace", "id": "v1", "stroke": "rgba(255,0,0,0.5)" }
]
}
```
Try it live — watch the pendulum swing and leave a red trace:
Macro 2: @mec2.eval — Editable Simulation
Attach @mec2.eval at the end of a JSON code block to make it editable.
Students can modify masses, positions, and constraints, then click run to see the updated simulation.
```json
{
"id": "chaos-pendulums",
"gravity": true,
"nodes": [
{ "id": "A0", "x": 200, "y": 400, "base": true },
{ "id": "A1", "x": 280, "y": 480, "m": 2 },
{ "id": "A2", "x": 360, "y": 560, "m": 3 },
{ "id": "A3", "x": 440, "y": 640, "m": 4.7 }
],
"constraints": [
{ "id": "a1", "p1": "A0", "p2": "A1", "len": { "type": "const" } },
{ "id": "a2", "p1": "A1", "p2": "A2", "len": { "type": "const" } },
{ "id": "a3", "p1": "A2", "p2": "A3", "len": { "type": "const" } }
],
"views": [
{ "show": "pos", "of": "A3", "as": "trace", "id": "v1", "stroke": "rgba(255,0,0,0.5)" }
]
}
```
@mec2.eval
mec2 JSON Structure
A mec2 model has four main sections:
| Key | Purpose |
|---|---|
"id" | Unique model identifier |
"gravity" | true to enable downward gravity |
"nodes" | Array of point masses |
"constraints" | Array of constraint relations between nodes |
"views" | Optional: tracing, force vectors, velocity arrows |
Nodes
| Key | Description |
|---|---|
"id" | Node identifier |
"x", "y" | Initial position (pixels, cartesian) |
"m" | Mass (kg); omit for massless/driven |
"base": true | Fixed anchor point |
Constraints
| Type | Description |
|---|---|
"len": {"type": "const"} | Rigid rod — fixed length |
"len": {"type": "drive"} | Driven length — varies over time |
"ori": {"type": "const"} | Fixed orientation |
"ori": {"type": "drive"} | Driven angle |
Views
{
"show": "pos",
"of": "A3",
"as": "trace",
"id": "v1",
"stroke": "rgba(255,0,0,0.5)"
}
Show options: pos (trace), vel (velocity), acc (acceleration), force.
Example: Triple Pendulum (Chaos Demonstration)
The classic chaos demonstration — four pendulums with nearly identical starting positions diverge rapidly:
```json @mec2
{
"id": "chaos-demo",
"gravity": true,
"nodes": [
{ "id": "A0", "x": 200, "y": 400, "base": true },
{ "id": "A1", "x": 280, "y": 480, "m": 2 },
{ "id": "B1", "x": 279, "y": 481, "m": 2 },
{ "id": "A2", "x": 360, "y": 560, "m": 3 },
{ "id": "B2", "x": 359, "y": 561, "m": 3 }
],
"constraints": [
{ "id": "a1", "p1": "A0", "p2": "A1", "len": { "type": "const" } },
{ "id": "a2", "p1": "A1", "p2": "A2", "len": { "type": "const" } },
{ "id": "b1", "p1": "A0", "p2": "B1", "len": { "type": "const" } },
{ "id": "b2", "p1": "B1", "p2": "B2", "len": { "type": "const" } }
],
"views": [
{ "show": "pos", "of": "A2", "as": "trace", "id": "v1", "stroke": "rgba(255,0,0,0.5)" },
{ "show": "pos", "of": "B2", "as": "trace", "id": "v2", "stroke": "rgba(0,255,0,0.5)" }
]
}
```
Try it live — two nearly identical double pendulums diverge chaotically (modify a starting position and re-run):
Full Template Demo
Use Cases
Mechanical engineering — Simulate four-bar linkages, slider-cranks, and gear trains as interactive constraint models.
Physics education — Demonstrate simple and compound pendulums, chaos theory, and conservation of energy with live traces.
TVET / machine technology — Show how drive-constraints model motor-driven mechanisms before students work on real hardware.
Research demonstrations — Embed mechanism animations directly in lecture notes without requiring separate simulation software.
Technical Facts
| Runs in browser | Yes — WebComponent-based |
| Server required | No |
| Editable | Yes — via @mec2.eval |
| Coordinate system | Cartesian (y up) |
| Gravity | Optional — "gravity": true |
| Views | Trace, velocity, acceleration, force |
| Based on | mec2 by Stefan Gössner |
| License | MIT |
| Maintained | Version 0.0.1 (stable) |
Try It
Try in LiaScript Open in LiveEditor View on GitHubRelated Templates
- DigiSim — interactive digital logic simulation
- jscad — parametric 3D CAD modeling
- AVR8js — AVR/Arduino hardware simulation
- gcode-preview — G-Code visualization for CNC and 3D printing