Diagram studies · 01–08

Free-body diagrams

Eight ways to show the same tipping case. Change the load, inspect a different edge, or isolate a force to compare how each view holds up.

Mass
Height of G
Reaction distance to edge

Compare all eight. Expand a study for a closer look.

Final JSXGraph experiment ↗ Drag a force, inspect its live moment arm, and compare automatic labels with crowded loads.

A

Textbook section

SVG · ground coordinates

A quiet, conventional FBD. Forces meet their application points. Reactions enter from below or beside the contact.Linear geometry · schematic arrow lengths · u inward, z normal · G mass center, R required reaction
B

World-oriented section

Canvas 2D · gravity stays vertical

Make the slope visible. The assembly and ground rotate together, so weight reads as straight down.Linear geometry · schematic arrow lengths · apparent incline in this section; along-edge components remain outside it
C

One force at a time

SVG · small multiples

Remove overlap by separating views. Each panel repeats the same geometry and shows one force at its exact point.Same geometry in every panel · schematic arrow lengths · ⊙ toward you, ⊗ away · values are 3D magnitudes in N
D

Moment about the edge

SVG · line of action + lever arm

Show why this force tips or restores. The dashed line follows the force; the perpendicular segment is its lever arm. Use “Inspect force” to change it.
E

Orbit the assembly

Three.js · orthographic 3D

Inspect the 3D attachment points. Drag to orbit. A wireframe keeps the center and applied loads visible through the assembly.Linear geometry · schematic arrow lengths · selected edge is bold · x forward, y left, z normal · residual yaw demand shown below
F

Geometry board

JSXGraph · interactive construction

Try a geometry library directly. Pan with Shift + drag, zoom, and select force arrows. This uses JSXGraph’s point, segment, and arrow objects.Linear geometry · schematic arrow lengths · geometry is fixed to the calculated case
G

Labels outside the body

SVG · separate label column

Give names and values their own space. Dotted leaders connect each arrow to a label outside the assembly. Select a label to trace its force.Linear geometry · schematic arrow lengths · label leaders carry no force
H

Plan and section

SVG · linked views

See which tipping edge the FBD describes. Select an edge in the plan to update the section and every other study. The inward u arrow links the two views.Each view uses a linear scale · G₀ is G projected onto the ground · R is the required reaction · schematic arrow lengths
WWeightIEquivalent inertiaP1 / P2Applied forcesNNormal reactionTTangential reaction⊙ / ⊗Along the edge, toward / away

Force values and exact attachment points

Coordinates use the ground frame: x forward, y left, z normal. The section uses u inward from the selected edge and z normal. The reactions are the resultants required for equilibrium; an outside reaction cannot be supplied by these contacts.

ForceVector (x, y, z), NPoint (x, y, z), mSection (u, z), NAlong edge, N

Library research and what each approach borrows

The closest mechanics-specific options are Meclib and PrairieLearn’s drawing components. JSXGraph and Three.js are running in studies F and E. The other six studies are original renderers using the same calculated positions and forces.

Library / referenceUseful ideasFit for this tool
MeclibMechanics symbols, interactive FBDs, supports and force objects built on JSXGraph.Closest specialist reference. Its STACK/Moodle workflow needs adaptation. Reuse permission was not established from the repository overview; no code copied.
PrairieLearn pl-drawingExplicit arrow anchor at head or tail, vector labels, force and moment drawing tools.Good drawing conventions. Built on Fabric.js and tied to PrairieLearn. Current client-side source is under AGPL terms; no source copied.
PrairieDrawDrawing in physical coordinates, transformations, arrows and engineering annotations.A model for B’s Canvas approach. PrairieLearn recommends pl-drawing for new questions.
JSXGraphLinked points, arrows, automatic label positioning, measurements, pan and zoom. SVG output.Version 1.13.3 under MIT. F uses fixed geometry; the separate interaction lab tests constrained dragging, dependent geometry, and automatic labels.
Three.js ArrowHelperExplicit 3D origin, direction and length. Orbit controls expose hidden attachments.Working trial in E, version 0.180.0 under MIT. Adds a camera and WebGL; keep a 2D view for reading moments.
KonvaCanvas arrows, selectable objects and hit testing.Useful if this becomes a diagram editor. It does not supply the force model or label placement; no runtime trial here.

My starting preference is A for the main calculation, D for explaining moments, and E as an optional inspection view. B makes slope easier to read. C separates forces that share a point, G gives labels their own space, and H connects the section to the footprint. F compares rendering and navigation; the separate interaction lab tests JSXGraph’s draggable geometry.

Implementation notes, sources and reproducible cases · Research checked 29 September 2026.

Diagram settings

Preparing diagram studies…