# Structural engineering
<!-- MICROSIMGEN:BEGIN v1.7 — generated by g08_place_microsims.py; three.js first (§15); do not hand-edit inside -->
## Microsims — three.js
### Structural engineering (three.js)
<div class="microsim-player">
<iframe src="https://wikitube-3d-microsims.netlify.app/Structural_engineering.html" width="100%" height="620" frameborder="0" loading="lazy" sandbox="allow-scripts allow-same-origin" title="Structural engineering — three.js microsim"></iframe>
</div>
**Open it full-screen:** [Structural_engineering.html](https://wikitube-3d-microsims.netlify.app/Structural_engineering.html) · library `threejs` · route `microsim/threejs/`
### Related microsims
Live sims on neighbouring articles — 1 of them inside this article's own Wikipedia link tree:
- [[Tribology]] *(in tree)*
- [[Failure_mode_and_effects_analysis]]
- [[Mathematical_optimization]]
- [[Queueing_theory]]
- [[Reliability_engineering]]
- [[Stanford_torus]]
*Sim hosted off-article; the article owns the reference, not the runtime (WIKI_RULES §10.4). Placed by `g08_place_microsims.py`.*
<!-- MICROSIMGEN:END -->
## Microsim
<iframe src="https://editor.p5js.org/sciencenibber/full/f_RKf1JL_" width="740" height="560" frameborder="0" title="Structural engineering microsim"></iframe>
<img src="../SPINTRONICS_Statics_Images/Structural_engineering.png" alt="Structural_engineering microsim">
- **Editor URL:** [Open in the p5.js editor](https://editor.p5js.org/sciencenibber/sketches/f_RKf1JL_)
- **Pattern:** **H** -- function-over-domain diagrams (shear, moment and deflection plotted along the beam span)
- **Canvas:** 720 x 520, `pixelDensity(2)`; vanilla p5, no external libraries
**Description (what it shows).** A simply supported beam of span `L = 6 m` rests on a **pin at A** and a **roller at B**. A red **point load P** -- draggable along the span, or set by the magnitude and position sliders -- presses down on the beam, and an optional **uniformly distributed load w** shades a band of arrows across the whole span. Three stacked diagrams update live: the **beam elevation** with its two upward reaction arrows `R_A` and `R_B` and an exaggerated amber **elastic curve**; the blue **shear-force diagram** `V(x)`, which steps down by `P` as you pass under the point load; and the purple **bending-moment diagram** `M(x)`, plotted on the sagging (tension) side with its peak called out where it occurs. A results panel reports the reactions, the equilibrium check (`sum F = 0`), the maximum moment and its location, and the maximum deflection in millimetres. The **EI** slider visibly trades deflection for rigidity -- a stiffer beam sags less for the same load -- and **reset** restores every control.
```js
// =====================================================================
// Article : Structural engineering
// Slug : Structural_engineering
// Wikitube : en.wikitube.io/wiki/Structural_engineering
// Category : SPINTRONICS / Statics (mechatronics & electronics hub)
// Idea : Structural engineering designs structures to carry loads
// safely. The core workflow on a simply supported beam:
// (1) the LOADS, then (2) the support REACTIONS fixed by
// static equilibrium (sum F = 0, sum M = 0), then (3) the
// internal SHEAR V(x) and BENDING MOMENT M(x) those loads
// induce along the span, then (4) the DEFLECTED shape (the
// elastic curve) the moment bends into.
// Equation : EI * d2y/dx2 = M(x) (Euler-Bernoulli beam)
// R_A = P*b/L + w*L/2 , R_B = P*a/L + w*L/2
// Pattern : H -- function-over-domain diagrams (shear, moment and
// deflection plotted along the beam span)
//
// THE LESSON THIS SIM IS BUILT TO TEACH (the "aha"):
// A beam is not a static picture -- every load you place reshapes the
// shear and moment diagrams and bends the beam. Drag the point load
// along the span (or set the load P, its position a, a uniform load w,
// and the flexural stiffness EI) and watch, live and superposed:
// * the two reactions rebalance so the beam stays in equilibrium,
// * the SHEAR diagram step down through each load,
// * the BENDING-MOMENT diagram peak UNDER the point load (and bow
// into a parabola under the distributed load),
// * the ELASTIC CURVE sag, by an amount that shrinks as EI grows.
// The peak moment is what SIZES the beam; the peak deflection is the
// serviceability check. This is the everyday arithmetic of structural
// engineering, turned into an instrument you play.
//
// Input-driven: noLoop() + redraw(); no animation loop at all, so the
// editor loop-protect cannot trip. Every redraw is a slider / drag /
// button event.
// =====================================================================
const ARTICLE = "Structural_engineering";
p5.disableFriendlyErrors = true;
// ---- palette (Statics room: light schematic drafting sheet) ---------
const BG = 248; // paper-white background
const GRIDC = [226, 229, 234]; // faint construction grid
const STRUCT = [80, 90, 110]; // slate: supports, labels
const BEAMC = [54, 64, 84]; // beam member (dark slate)
const LOADC = [210, 70, 35]; // applied loads (red)
const REACC = [33, 110, 95]; // reactions (teal-green)
const SHEARC = [62, 132, 214]; // shear diagram (blue)
const MOMC = [150, 92, 196]; // moment diagram (purple)
const DEFLC = [225, 150, 35]; // deflected shape (amber)
const DEFLD = [180, 120, 30]; // deflection text (darker amber)
const INKLT = [120, 128, 140]; // light annotation ink
// ---- canvas / layout (every constant derived from width & height) ---
const CW = 720, CH = 520;
let X0, X1; // px of the left (x=0 m) and right (x=L) supports
let SPANPX; // pixels across the whole beam span
let Y_BEAM; // y of the (undeflected) beam axis
let Y_SHEAR, H_SHEAR; // shear diagram: zero line + half-height (px)
let Y_MOM, H_MOM; // moment diagram: zero line + half-height (px)
let resX, resY, resW, resH; // results read-out panel (control strip)
let CTRLY; // y of the first slider row
// ---- the beam (fixed geometry; the loads are the variables) ---------
const L = 6.0; // span length (m), simply supported A---B
const DEFL_SCALE = 2400; // px drawn per metre of real deflection
const DEFL_CLAMP = 32; // max px the elastic curve may drop (clip)
// ---- controls (real symbols, meaningful ranges) ---------------------
const P_DEF = 24; // point load magnitude (kN)
const A_DEF = 2.4; // point load position from A (m)
const W_DEF = 0; // uniformly distributed load (kN/m)
const EI_DEF = 10000; // flexural rigidity EI (kN*m^2)
let pS, aS, wS, eiS; // sliders
let resetBtn;
// ---- live state (computed once per redraw; no per-frame allocation) --
let P = P_DEF, aPos = A_DEF, wUDL = W_DEF, EI = EI_DEF;
let bLen = L - A_DEF; // distance load -> B
let RA = 0, RB = 0; // support reactions (kN, upward +)
let vMax = 1, mMax = 1; // diagram scaling extents
let mPeak = 0, xPeak = 0; // peak moment and where it occurs
let dMax = 0; // peak deflection (m, downward +)
let dragging = false;
function setup() {
createCanvas(CW, CH);
pixelDensity(2);
describe(
"Structural-engineering beam analyser. A simply supported beam of " +
"span L carries a movable point load P at position a and an optional " +
"uniformly distributed load w. Three stacked diagrams update live: the " +
"beam with its support reactions and exaggerated deflected shape, the " +
"shear-force diagram, and the bending-moment diagram. Sliders set P, a, " +
"w and the flexural rigidity EI; the point load can also be dragged " +
"along the span.");
// layout derived from canvas size (never hard-coded coordinates)
X0 = width * 0.085; // left support (x = 0 m)
X1 = width * 0.965; // right support (x = L)
SPANPX = X1 - X0;
Y_BEAM = height * 0.254; // beam axis (~132)
Y_SHEAR = height * 0.442; // shear zero line (~230)
H_SHEAR = height * 0.058; // shear half-height (~30)
Y_MOM = height * 0.615; // moment zero line (~320)
H_MOM = height * 0.063; // moment half-height (~33)
CTRLY = height * 0.715; // first slider row (~372)
resX = width * 0.585; resY = CTRLY; // results panel
resW = width - resX - 14; resH = height - resY - 18;
// --- control rows (below the diagrams) -------------------------------
const colx = 190, sw = 150;
let y = CTRLY;
pS = createSlider(0, 50, P_DEF, 1); pS.position(colx, y); pS.size(sw); y += 28;
aS = createSlider(0.2, L - 0.2, A_DEF, 0.05); aS.position(colx, y); aS.size(sw); y += 28;
wS = createSlider(0, 12, W_DEF, 0.5); wS.position(colx, y); wS.size(sw); y += 28;
eiS = createSlider(2000, 40000, EI_DEF, 500); eiS.position(colx, y); eiS.size(sw); y += 30;
resetBtn = createButton("reset"); resetBtn.position(20, y); resetBtn.mousePressed(doReset);
pS.input(redraw);
aS.input(redraw);
wS.input(redraw);
eiS.input(redraw);
noLoop();
}
// =====================================================================
// COMPUTE -- read controls once, solve statics, find the diagram peaks.
// =====================================================================
function compute() {
P = pS.value();
aPos = aS.value();
wUDL = wS.value();
EI = eiS.value();
bLen = L - aPos;
// reactions of a simply supported beam (point load + full-span UDL)
RA = P * bLen / L + wUDL * L / 2;
RB = P * aPos / L + wUDL * L / 2;
// scan the span for the diagram extents and the peak deflection
vMax = 0.001; mMax = 0.001; mPeak = 0; xPeak = 0; dMax = 0;
const N = 240;
for (let i = 0; i <= N; i++) {
const x = (i / N) * L;
const v = shearAt(x);
const m = momentAt(x);
const d = deflAt(x);
if (abs(v) > vMax) vMax = abs(v);
if (abs(m) > mMax) mMax = abs(m);
if (abs(m) > abs(mPeak)) { mPeak = m; xPeak = x; }
if (abs(d) > abs(dMax)) dMax = d;
}
}
// ---- internal actions at distance x from A (closed form) ------------
// shear: upward reaction RA minus the downward load to the left of x
function shearAt(x) {
let v = RA - wUDL * x;
if (x > aPos) v -= P;
return v; // kN
}
// bending moment: moment of all forces left of the cut, about the cut
function momentAt(x) {
let m = RA * x - wUDL * x * x / 2;
if (x > aPos) m -= P * (x - aPos);
return m; // kN*m (sagging positive)
}
// deflection (downward +): UDL term + point-load term, by superposition
function deflAt(x) {
const b = bLen;
const yU = wUDL * x * (L * L * L - 2 * L * x * x + x * x * x) / (24 * EI);
let yP;
if (x <= aPos) {
yP = P * b * x * (L * L - b * b - x * x) / (6 * L * EI);
} else {
yP = P * b / (6 * L * EI) *
((L / b) * pow(x - aPos, 3) + (L * L - b * b) * x - x * x * x);
}
return yU + yP; // metres
}
// metres along the span -> screen x
function sx(xm) { return X0 + (xm / L) * SPANPX; }
// =====================================================================
// DRAW
// =====================================================================
function draw() {
compute();
background(BG);
drawGrid();
drawBeamPanel(); // beam, supports, loads, reactions, elastic curve
drawShearPanel(); // V(x)
drawMomentPanel(); // M(x)
drawResults(); // numeric read-out (RA, RB, Mmax, dmax)
drawBanner();
drawHUD(); // 4-part watermark, drawn last
}
// ---------------------------------------------------------------------
// Panel 1: the beam elevation -- supports, applied loads, reactions,
// and the exaggerated deflected shape (the signature visual move).
// ---------------------------------------------------------------------
function drawBeamPanel() {
if (wUDL > 0.01) drawUDL(); // distributed-load band (behind beam)
drawElasticCurve(); // glowing amber deflected shape
// the undeflected beam member
push();
stroke(BEAMC[0], BEAMC[1], BEAMC[2]); strokeWeight(6); strokeCap(ROUND);
line(X0, Y_BEAM, X1, Y_BEAM);
pop();
drawSupport(X0, true); // pin at A
drawSupport(X1, false); // roller at B
drawPointLoad(); // draggable red arrow
drawReaction(X0, RA, "R_A"); // upward teal arrows
drawReaction(X1, RB, "R_B");
}
// pin (filled triangle) at A, roller (triangle + line) at B
function drawSupport(px, pin) {
push();
const s = 11;
stroke(STRUCT[0], STRUCT[1], STRUCT[2]); strokeWeight(1.6);
fill(STRUCT[0], STRUCT[1], STRUCT[2]);
triangle(px, Y_BEAM + 3, px - s, Y_BEAM + s + 5, px + s, Y_BEAM + s + 5);
if (!pin) {
noStroke();
circle(px - 5, Y_BEAM + s + 9, 4.5);
circle(px + 5, Y_BEAM + s + 9, 4.5);
stroke(STRUCT[0], STRUCT[1], STRUCT[2]); strokeWeight(1.6);
line(px - s, Y_BEAM + s + 12, px + s, Y_BEAM + s + 12);
} else {
line(px - s, Y_BEAM + s + 5, px + s, Y_BEAM + s + 5);
}
pop();
}
// shaded band of little down-arrows for the uniformly distributed load
function drawUDL() {
const yTop = Y_BEAM - 42;
push();
noStroke(); fill(LOADC[0], LOADC[1], LOADC[2], 26);
rect(X0, yTop, SPANPX, 36);
stroke(LOADC[0], LOADC[1], LOADC[2], 170); strokeWeight(1.3);
line(X0, yTop, X1, yTop);
for (let px = X0 + 8; px <= X1; px += 34) {
line(px, yTop, px, Y_BEAM - 8);
noStroke(); fill(LOADC[0], LOADC[1], LOADC[2], 170);
triangle(px, Y_BEAM - 6, px - 3, Y_BEAM - 12, px + 3, Y_BEAM - 12);
stroke(LOADC[0], LOADC[1], LOADC[2], 170);
}
noStroke(); fill(LOADC[0], LOADC[1], LOADC[2]);
textAlign(LEFT, BOTTOM); textSize(11);
text("w = " + nf(wUDL, 0, 1) + " kN/m", X0 + 2, yTop - 2);
pop();
}
// the movable point load: a thick red down-arrow ending at the beam
function drawPointLoad() {
if (P < 0.5) return;
const px = sx(aPos);
const handleY = Y_BEAM - 56;
push();
stroke(LOADC[0], LOADC[1], LOADC[2]); strokeWeight(3.4);
line(px, handleY, px, Y_BEAM - 7);
noStroke(); fill(LOADC[0], LOADC[1], LOADC[2]);
triangle(px, Y_BEAM - 4, px - 6, Y_BEAM - 15, px + 6, Y_BEAM - 15);
circle(px, handleY, 11); // grab handle
// labels: flip to the left when the load is near the right edge
const right = px > width * 0.72;
textAlign(right ? RIGHT : LEFT, CENTER);
const tx = right ? px - 10 : px + 10;
fill(LOADC[0], LOADC[1], LOADC[2]); textStyle(BOLD); textSize(12);
text("P = " + nf(P, 0, 0) + " kN", tx, handleY - 5);
textStyle(NORMAL); textSize(10); fill(INKLT[0], INKLT[1], INKLT[2]);
text("a = " + nf(aPos, 0, 2) + " m (drag)", tx, handleY + 9);
pop();
}
// an upward reaction arrow of length proportional to its magnitude
function drawReaction(px, val, lab) {
const len = constrain(map(val, 0, 90, 10, 30), 10, 30);
const baseY = Y_BEAM + 40;
push();
stroke(REACC[0], REACC[1], REACC[2]); strokeWeight(3);
line(px, baseY, px, baseY - len);
noStroke(); fill(REACC[0], REACC[1], REACC[2]);
triangle(px, baseY - len - 2, px - 5, baseY - len + 8, px + 5, baseY - len + 8);
textAlign(CENTER, TOP); textSize(10.5); textStyle(BOLD);
text(lab + " = " + nf(val, 0, 1) + " kN", px, baseY + 2); textStyle(NORMAL);
pop();
}
// the deflected shape, on a fixed px-per-metre scale so a stiffer beam
// (larger EI) visibly sags less; clamped to its panel.
function drawElasticCurve() {
push();
drawingContext.shadowColor = "rgba(225,150,35,0.34)";
drawingContext.shadowBlur = 10;
stroke(DEFLC[0], DEFLC[1], DEFLC[2]); strokeWeight(2.4); noFill();
beginShape();
const N = 120;
for (let i = 0; i <= N; i++) {
const xm = (i / N) * L;
const dy = constrain(deflAt(xm) * DEFL_SCALE, -DEFL_CLAMP, DEFL_CLAMP);
vertex(sx(xm), Y_BEAM + dy);
}
endShape();
drawingContext.shadowBlur = 0;
pop();
}
// ---------------------------------------------------------------------
// Panel 2: the shear-force diagram V(x), a filled area off a zero axis.
// ---------------------------------------------------------------------
function drawShearPanel() {
drawAxis(Y_SHEAR, H_SHEAR, "Shear force V(x) [kN]", SHEARC);
const sc = (H_SHEAR * 0.92) / vMax;
const N = 240;
push();
noStroke(); fill(SHEARC[0], SHEARC[1], SHEARC[2], 46);
beginShape();
vertex(X0, Y_SHEAR);
for (let i = 0; i <= N; i++) {
const xm = (i / N) * L;
vertex(sx(xm), Y_SHEAR - shearAt(xm) * sc);
}
vertex(X1, Y_SHEAR);
endShape(CLOSE);
stroke(SHEARC[0], SHEARC[1], SHEARC[2]); strokeWeight(2); noFill();
beginShape();
for (let i = 0; i <= N; i++) {
const xm = (i / N) * L;
vertex(sx(xm), Y_SHEAR - shearAt(xm) * sc);
}
endShape();
noStroke(); fill(SHEARC[0], SHEARC[1], SHEARC[2]); textSize(10);
textAlign(LEFT, BOTTOM);
text("+" + nf(RA, 0, 1), X0 + 3, Y_SHEAR - RA * sc - 2);
textAlign(RIGHT, TOP);
text(nf(-RB, 0, 1), X1 - 3, Y_SHEAR + RB * sc + 2);
pop();
}
// ---------------------------------------------------------------------
// Panel 3: the bending-moment diagram M(x); sagging plotted downward,
// the way the beam actually bends, with the peak called out.
// ---------------------------------------------------------------------
function drawMomentPanel() {
drawAxis(Y_MOM, H_MOM, "Bending moment M(x) [kN*m] (sagging plotted down)", MOMC);
const sc = (H_MOM * 0.92) / mMax;
const N = 240;
push();
noStroke(); fill(MOMC[0], MOMC[1], MOMC[2], 44);
beginShape();
vertex(X0, Y_MOM);
for (let i = 0; i <= N; i++) {
const xm = (i / N) * L;
vertex(sx(xm), Y_MOM + momentAt(xm) * sc); // +down = sagging
}
vertex(X1, Y_MOM);
endShape(CLOSE);
stroke(MOMC[0], MOMC[1], MOMC[2]); strokeWeight(2); noFill();
beginShape();
for (let i = 0; i <= N; i++) {
const xm = (i / N) * L;
vertex(sx(xm), Y_MOM + momentAt(xm) * sc);
}
endShape();
// peak-moment call-out
const pxk = sx(xPeak);
const pyk = Y_MOM + mPeak * sc;
stroke(MOMC[0], MOMC[1], MOMC[2], 120); strokeWeight(1);
drawingContext.setLineDash([3, 3]);
line(pxk, Y_MOM, pxk, pyk);
drawingContext.setLineDash([]);
noStroke(); fill(MOMC[0], MOMC[1], MOMC[2]);
circle(pxk, pyk, 6);
textAlign(CENTER, TOP); textSize(11); textStyle(BOLD);
text("M_max = " + nf(mPeak, 0, 1) + " kN*m", pxk, pyk + 5);
textStyle(NORMAL);
pop();
}
// a labelled horizontal zero axis; label sits above the diagram band
function drawAxis(yz, half, label, col) {
push();
stroke(205); strokeWeight(1);
line(X0, yz, X1, yz);
noStroke(); fill(col[0], col[1], col[2]); textSize(11); textStyle(BOLD);
textAlign(LEFT, BOTTOM);
text(label, X0, yz - half - 4);
textStyle(NORMAL);
pop();
}
// ---------------------------------------------------------------------
// Results read-out panel (lives in the control strip, right side).
// ---------------------------------------------------------------------
function drawResults() {
push();
noStroke(); fill(255); rect(resX, resY, resW, resH, 8);
stroke(GRIDC[0], GRIDC[1], GRIDC[2]); strokeWeight(1); noFill();
rect(resX, resY, resW, resH, 8);
pop();
const px = resX + 12;
let y = resY + 9;
noStroke(); textAlign(LEFT, TOP);
fill(90); textSize(12); textStyle(BOLD);
text("Results (static equilibrium)", px, y); textStyle(NORMAL);
y += 18;
fill(REACC[0], REACC[1], REACC[2]); textSize(11);
text("R_A = " + nf(RA, 0, 2) + " kN R_B = " + nf(RB, 0, 2) + " kN", px, y);
y += 15;
fill(60);
text("sum F = " + nf(RA + RB - P - wUDL * L, 0, 2) + " kN (= 0, balanced)", px, y);
y += 17;
fill(MOMC[0], MOMC[1], MOMC[2]);
text("M_max = " + nf(mPeak, 0, 2) + " kN*m at x = " + nf(xPeak, 0, 2) + " m", px, y);
y += 17;
fill(DEFLD[0], DEFLD[1], DEFLD[2]);
text("max deflection = " + nf(dMax * 1000, 0, 2) + " mm", px, y);
}
// ---------------------------------------------------------------------
// Top banner (the one-line takeaway).
// ---------------------------------------------------------------------
function drawBanner() {
push();
textAlign(LEFT, TOP); textSize(12); textStyle(BOLD); noStroke();
fill(STRUCT[0], STRUCT[1], STRUCT[2]);
text("Loads set the reactions; loads and reactions set the shear and moment; the moment bends the beam.",
14, 58);
textStyle(NORMAL);
pop();
}
// ---------------------------------------------------------------------
// 4-part self-identifying HUD watermark (drawn last).
// ---------------------------------------------------------------------
function drawHUD() {
noStroke();
// (1) title block (top-left)
textAlign(LEFT, TOP);
fill(20); textSize(20); textStyle(BOLD);
text("Structural engineering", 14, 12); textStyle(NORMAL);
fill(110); textSize(12);
text("Wikitube microsim - en.wikitube.io/wiki/" + ARTICLE, 14, 38);
// (2) control labels beside the sliders
textAlign(LEFT, CENTER); fill(70); textSize(11);
text("P = " + nf(P, 0, 0) + " kN", 20, CTRLY + 10);
text("a = " + nf(aPos, 0, 2) + " m", 20, CTRLY + 38);
text("w = " + nf(wUDL, 0, 1) + " kN/m", 20, CTRLY + 66);
text("EI = " + nf(EI, 0, 0) + " kN*m2", 20, CTRLY + 94);
// (3) control hint (bottom-left)
textAlign(LEFT, BOTTOM); textSize(11); fill(95);
text("drag the red load along the span, or use the sliders; reset restores all",
14, height - 8);
// (4) bottom-right equation footer (ASCII only)
textAlign(RIGHT, BOTTOM); fill(80); textSize(11);
text("EI*y'' = M(x) | R_A = P*b/L + w*L/2", width - 12, height - 8);
}
// ---------------------------------------------------------------------
// Faint construction grid (reference layer, under everything).
// ---------------------------------------------------------------------
function drawGrid() {
stroke(GRIDC[0], GRIDC[1], GRIDC[2]); strokeWeight(1);
for (let x = 0; x <= width; x += 36) line(x, 0, x, height);
for (let y = 0; y <= height; y += 36) line(0, y, width, y);
}
// ---------------------------------------------------------------------
// Interaction: drag the point load horizontally along the span.
// ---------------------------------------------------------------------
function mousePressed() {
const px = sx(aPos);
const handleY = Y_BEAM - 56;
if (dist(mouseX, mouseY, px, handleY) < 16 ||
(abs(mouseX - px) < 10 && mouseY > handleY && mouseY < Y_BEAM)) {
dragging = true;
}
}
function mouseDragged() {
if (!dragging) return;
let xm = ((mouseX - X0) / SPANPX) * L;
xm = constrain(xm, 0.2, L - 0.2);
aS.value(xm);
redraw();
}
function mouseReleased() { dragging = false; }
// ---------------------------------------------------------------------
// reset restores ALL state (every slider + the drag flag).
// ---------------------------------------------------------------------
function doReset() {
pS.value(P_DEF);
aS.value(A_DEF);
wS.value(W_DEF);
eiS.value(EI_DEF);
dragging = false;
redraw();
}
```
## Microsim log
| Date | Version | Editor URL | Change summary |
|------|---------|------------|----------------|
| 2026-06-22 | v1 | [open](https://editor.p5js.org/sciencenibber/sketches/f_RKf1JL_) | Initial Microsim Worklist build. Pattern H function-over-domain diagrams: a simply supported beam carrying a draggable point load plus an optional uniform load, solved by static equilibrium and superposition, with live shear, bending-moment, and Euler-Bernoulli deflection diagrams and an exaggerated elastic curve. Verified before publish: pure ASCII, `node --check` clean, p5 reserved-name lint (only the required `setup`/`draw`/mouse lifecycle hooks), and a standalone statics logic test confirming `R_A`/`R_B`, the `M_max = P*a*b/L` point-load peak, the `w*L^2/8` UDL mid-moment, and the `5*w*L^4/384EI` and `P*L^3/48EI` mid-span deflections. Published byte-perfect (in-editor doc SHA-256 == disk SHA-256), FES-clean console, canvas render confirmed. |
## Links (Wikipedia order)
<!-- injected from _registry/childlinks/Structural_engineering.json (2026-07-30T02:09:12Z) -->
[[Acoustical_engineering]] · `Adobe` · [[Aerospace_engineering]] · [[Agricultural_engineering]] · `Airbus_A380` · `Alexander_Hrennikoff` · [[Alloy]] · [[Aluminium]] · `American_Institute_of_Constructors` · `American_Society_of_Civil_Engineers` · `Ancient_Rome` · `Applied_mathematics` · `Applied_mechanics` · `Arch` · `Architect` · [[Architectural_engineering]] · `Architectural_style` · [[Architecture]] · `Artificial_intelligence_engineering` · `Asbestos_Testing_and_Consultancy_Association` · `Associated_General_Contractors_of_America` · `Association_of_Plumbing_and_Heating_Contractors` · `Atlas_(rocket_family)` · `Audio_engineer` · `AutoCAD` · `Automation_engineering` · [[Automotive_engineering]] · `Bachelor_of_Engineering` · `Bachelor_of_Science` · `Bamboo` · `Banksman` · `Beam_(structure)` · `Bending_moment` · [[Biochemical_engineering]] · [[Bioinformatics]] · [[Biological_engineering]] · `Biomaterial` · [[Biomechanical_engineering]] · [[Biomedical_engineering]] · `Biomedical_equipment_technician` · `Bioresource_engineering` · `Boeing` · `Boilermaker` · `Bricklayer` · `Bridge` · `British_industrial_architecture` · [[Broadcast_engineering]] · `Buckling` · `Build_UK` · `Builder's_signature` · `Builders'_rites` · `Building` · `Building_code` · `Building_engineer` · `Building_estimator` · `Building_material` · `Building_officials` · [[Building_services_engineering]] · `Burj_Khalifa` · `Cantilever` · `Carlo_Alberto_Castigliano` · `Carpentry` · `Cast_iron` · `Castigliano's_method` · `Catenary` · [[Ceramic_engineering]] · `Chartered_Building_Surveyor` · `Chartered_Engineer_(UK)` · `Chartered_Institute_of_Plumbing_and_Heating_Engineering` · `Chartered_Institution_of_Civil_Engineering_Surveyors` · [[Chemical_engineering]] · [[Chemical_reaction_engineering]] · `Civil_Engineering_Contractors_Association` · `Civil_engineer` · [[Civil_engineering]] · `Civil_estimator` · `Claude-Louis_Navier` · `Clerk_of_works` · `Clinical_engineering` · [[Coastal_engineering]] · `Column` · [[Comparison_of_EDA_software]] · [[Comparison_of_EM_simulation_software]] · [[Comparison_of_nucleic_acid_simulation_software]] · [[Comparison_of_optimization_software]] · [[Comparison_of_software_for_molecular_mechanics_modeling]] · [[Comparison_of_system_dynamics_software]] · `Composite_material` · [[Computer_engineering]] · `Computer_network_engineering` · `Concrete` · `Concrete_finisher` · `Concrete_slab` · `Construction` · `Construction_History_Society` · `Construction_Management_Association_of_America` · `Construction_Specifications_Institute` · `Construction_bidding` · `Construction_delay` · [[Construction_engineering]] · `Construction_equipment_theft` · `Construction_foreman` · `Construction_industry_in_India` · `Construction_industry_in_Iran` · `Construction_industry_in_Japan` · `Construction_industry_in_Romania` · `Construction_industry_in_Taiwan` · `Construction_industry_in_the_United_Kingdom` · `Construction_industry_in_the_United_States` · `Construction_law` · `Construction_management` · `Construction_robots` · `Construction_site_safety` · `Construction_waste` · `Construction_worker` · `Continuum_mechanics` · [[Control_engineering]] · `Cornerstone` · [[Corrosion]] · [[Corrosion_engineering]] · `Crane_(machine)` · `Creep_(deformation)` · `DFMA` · `Dam` · `Damp_(structural)` · `Damp_proofing` · `Daniel_Bernoulli` · [[Data_engineering]] · `Delta_(rocket_family)` · `Demolition` · `Denmark` · `Design_engineer` · `Design–bid–build` · `Design–build` · `Djoser` · `Doctorate` · `Dome` · `Dubai` · `Earthbag_construction` · `Earthquake` · [[Earthquake_engineering]] · `Earthworks_(engineering)` · [[Ecological_engineering]] · `Eiffel_Tower` · `El_Castillo,_Chichen_Itza` · [[Electrical_engineering]] · `Electrician` · [[Electrochemical_engineering]] · [[Electromechanics]] · `Electronics_engineering` · `Elevator` · [[Energy_engineering]] · `Engineer` · `Engineer's_degree` · [[Engineering]] · [[Engineering_drawing]] · [[Engineering_education]] · [[Engineering_ethics]] · [[Engineering_management]] · [[Engineering_mathematics]] · [[Engineering_physics]] · [[Environmental_engineering]] · `Escalator` · `Euler–Bernoulli_beam_theory` · [[Explosives_engineering]] · [[Facilities_engineering]] · [[Fire_protection_engineering]] · `Floor_loan` · `Floor_plan` · [[Food_engineering]] · [[Forensic_engineering]] · `Foundation_(engineering)` · `Fred_Kilgour` · `Galileo_Galilei` · [[Genetic_engineering]] · [[Geological_engineering]] · [[Geotechnical_engineering]] · `Glazier` · `Glossary` · [[Glossary_of_aerospace_engineering]] · [[Glossary_of_civil_engineering]] · [[Glossary_of_electrical_and_electronics_engineering]] · [[Glossary_of_engineering]] · `Glossary_of_engineering:_A–L` · `Glossary_of_engineering:_M–Z` · [[Glossary_of_mechanical_engineering]] · [[Glossary_of_structural_engineering]] · `Graduate_certificate` · `Hardwood` · `Harling_(wall_finish)` · [[Health_technology]] · `Heavy_equipment` · `History_of_architecture` · `History_of_construction` · [[History_of_engineering]] · `History_of_infrastructure` · `History_of_structural_engineering` · `History_of_the_world's_tallest_buildings` · `History_of_water_supply_and_sanitation` · `Home_Builders_Federation` · `Home_construction` · `Hooke's_law` · [[Hydraulic_engineering]] · `Illegal_construction` · `Imhotep` · `Indigenous_architecture` · `Industrial_architecture` · [[Industrial_engineering]] · `Industrialization_of_construction` · `Information_engineering` · [[Instrumentation_and_control_engineering]] · [[Interdisciplinarity]] · `Interior_architecture` · `Interior_design` · `Intuition` · [[Iron]] · `Ironworker` · [[Isaac_Newton]] · `Jørn_Utzon` · `Landscape_architecture` · `Leonardo_da_Vinci` · `Leonhard_Euler` · `Lighting_Association` · [[List_of_3D_printing_software]] · [[List_of_HDL_simulators]] · [[List_of_RNA_structure_prediction_software]] · [[List_of_aerospace_engineering_software]] · `List_of_architectural_styles` · [[List_of_automotive_engineering_software]] · `List_of_building_materials` · [[List_of_chemical_process_simulators]] · `List_of_civil_engineering_software` · [[List_of_computational_chemistry_software]] · [[List_of_computational_fluid_dynamics_software]] · [[List_of_computational_physics_software]] · [[List_of_computer-aided_engineering_software]] · [[List_of_computer-aided_manufacturing_software]] · `List_of_construction_methods` · `List_of_construction_trades` · [[List_of_data_science_software]] · [[List_of_discrete_event_simulation_software]] · [[List_of_engineering_awards]] · [[List_of_engineering_branches]] · [[List_of_engineering_journals_and_magazines]] · [[List_of_engineering_schools]] · [[List_of_engineering_societies]] · [[List_of_free_electronics_circuit_simulators]] · [[List_of_gene_prediction_software]] · [[List_of_genetic_engineering_software]] · `List_of_mechanical_engineering_software` · [[List_of_numerical_libraries]] · [[List_of_plasma_physics_software]] · [[List_of_protein_structure_prediction_software]] · [[List_of_sequence_alignment_software]] · [[List_of_software_for_nanostructures_modeling]] · [[List_of_software_for_nuclear_engineering]] · [[List_of_structural_engineering_software]] · `List_of_structural_engineers` · `Lists_of_buildings_and_structures` · [[Lists_of_engineering_software]] · [[Lists_of_engineers]] · [[Lists_of_open-source_artificial_intelligence_software]] · `Load-bearing_wall` · [[Logistics_engineering]] · `London` · [[Manufacturing_engineering]] · [[Marine_engineering]] · `Masonry` · `Master's_degree` · [[Materials_science]] · [[Mathematical_software]] · `Mechanical,_electrical,_and_plumbing` · [[Mechanical_engineering]] · [[Mechatronics]] · `Megaproject` · `Megastructure` · [[Metallurgy]] · [[Microwave_engineering]] · `Military_aircraft` · [[Military_engineering]] · `Millwork` · `Millwright` · [[Mining_engineering]] · `Modern_methods_of_construction` · [[Molecular_design_software]] · [[Molecular_engineering]] · `Monocrete_construction` · `Mudbrick` · `Municipal_or_urban_engineering` · `Nanoengineering` · `Nanostructure` · `Nanotube` · `National_Association_of_Home_Builders` · `National_Association_of_Women_in_Construction` · `National_Fire_Protection_Association` · `National_Kitchen_&_Bath_Association` · `National_Railroad_Construction_and_Maintenance_Association` · `National_Tile_Contractors_Association` · [[Naval_architecture]] · [[Newton's_laws_of_motion]] · [[Nuclear_engineering]] · `Offshore_construction` · [[Ontology_engineering]] · [[Optical_engineering]] · `Outline_of_computer_engineering` · `Outline_of_construction` · [[Outline_of_engineering]] · [[Packaging_engineering]] · [[Paper_engineering]] · [[Petroleum_engineering]] · [[Pharmaceutical_engineering]] · `Philosophiæ_Naturalis_Principia_Mathematica` · [[Physics]] · `Planar_lamina` · `Plasterer` · `Plasterwork` · `Plate_(structure)` · `Plumber` · `Plywood` · [[Polymer_engineering]] · `Pont_du_Gard` · [[Power_engineering]] · [[Power_engineering_software]] · `Power_station` · `Pressure_vessel` · `Prestressed_concrete` · `Prestressed_structure` · `Privacy_engineering` · [[Process_engineering]] · `Project_manager` · `Quantity_surveyor` · [[Radio-frequency_engineering]] · `Railway_Tie_Association` · [[Railway_engineering]] · `Real-estate_bubble` · `Real_estate_development` · `Regulation_and_licensure_in_engineering` · `Rehabilitation_engineering` · `Reinforced_concrete` · `Retaining_wall` · `Richard_Courant` · `Richard_Rogers` · [[River_engineering]] · `Robert_Hooke` · [[Robotics_engineering]] · `Roof` · `Roofer` · `Roughcast` · `Royal_Institution_of_Chartered_Surveyors` · [[Safety_engineering]] · [[Sanitary_engineering]] · `Scottish_Building_Federation` · `Screw` · [[Security_engineering]] · [[Semiconductor_device]] · `Sewerage` · `Shear_stress` · [[Signal_processing]] · `Site_manager` · `Slip_forming` · `Society_of_Construction_Arbitrators` · [[Software_engineering]] · `Softwood` · `Space_frame` · `Sports_engineering` · `St._Louis` · `Stainless_steel` · [[Steel]] · `Steel_fixer` · `Step_pyramid` · `Stephen_Timoshenko` · `Stonemasonry` · `Structurae` · [[Structural_alignment_software]] · `Structural_analysis` · `Structural_element` · `Structural_engineer` · `Structural_engineering_theory` · `Structural_fracture_mechanics` · `Structural_material` · `Structural_rigidity` · `Structural_robustness` · `Structural_stability` · `Structural_steel` · `Structural_system` · [[Structure]] · `Strut` · `Superintendent_(construction)` · [[Surface_engineering]] · `Sustainability_in_construction` · [[Sustainable_engineering]] · `Sydney_Opera_House` · [[Systems_engineering]] · [[Telecommunications_engineering]] · `Tensile_structure` · `The_Concrete_Society` · [[Thermal_engineering]] · `Timeline_of_architecture` · [[Tissue_engineering]] · `Topping_out` · `Tower` · [[Traffic_engineering_(transportation)]] · [[Transportation_engineering]] · [[Tribology]] · `Truss` · `Truss_bridge` · `Tunnel_construction` · `Two_New_Sciences` · `Underground_construction` · `Unfinished_building` · `Urban_design` · `Urban_planning` · `Vernacular_architecture` · `Virtual_work` · `Water_supply_network` · [[Wayback_Machine]] · `Welder` · [[Wind_energy_software]] · `Wind_engineering` · `Wrought_iron` · `Zoning`
## From the Real GENERATIVE library (beauty pass)
*Structural engineering — image hotlinked from Wikimedia Commons (via the Real G.E.N.E.R.A.T.I.V.E. course library, Electronics room). [Details & license](https://commons.wikimedia.org/wiki/File:Tour_Eiffel_Wikimedia_Commons.jpg).*
> Structural engineering is a sub-discipline of civil engineering in which structural engineers are trained to design the 'bones and joints' that create the form and shape of human-made structures. Structural engineers also must understand and calculate the stability, strength, rigidity and earthquake-susceptibility of built structures for buildings[1] and nonbuilding structures. ([Wikipedia](https://en.wikipedia.org/wiki/Structural_engineering))
<!-- BEAUTY-PASS-MEDIA:END -->
<- Back to Spintronics · Branch: **S -- Statics** · Standard: MicroSim Best Practices
> **Structural engineering** is the branch of [[Engineering|engineering]] that designs and analyses the structures -- buildings, bridges, towers, frames, dams -- that must carry loads safely and serviceably. It grows straight out of statics: idealise the [[Structure|structure]] as members, supports, and loads; apply the equations of equilibrium to find the support **reactions**; trace how the loads flow through the structure as **internal forces** (axial force, **shear**, and **bending moment**); then check that each member is **strong** enough to resist those internal forces and **stiff** enough that it does not deflect or vibrate too much. The simply supported beam is the discipline's smallest complete example.
## Overview
A structural engineer rarely solves the whole universe at once; the craft is to reduce a real structure to a model simple enough to compute yet faithful enough to trust, and then to follow a fixed chain of reasoning from the loads to the consequences. On a beam that chain is: **loads -> reactions -> shear and moment -> deflection.** Static equilibrium (sum of forces = 0 and sum of moments = 0) fixes the two support reactions; cutting the beam at any section and summing the forces to one side of the cut gives the internal **shear force** V(x) and **bending moment** M(x) carried across that section; and the Euler-Bernoulli relation `EI * y'' = M(x)` integrates the moment into the **elastic curve**, the deflected shape the beam bends into. Each step is local and mechanical, which is exactly why the method scales from a single beam to a whole frame.
The **bending-moment diagram** is the structural engineer's most consequential drawing, because the **peak moment** is what sizes the member -- the section it needs follows from `M_max` divided by the material's allowable stress -- while the **peak deflection** is what the serviceability check limits, often to a fraction of the span such as `L/360`. For a simply supported beam the closed forms are clean and worth carrying in the head: a point load `P` a distance `a` from the left support (with `b = L - a`) gives reactions `R_A = P*b/L` and `R_B = P*a/L` and a maximum moment `M_max = P*a*b/L` directly under the load; a full-span uniform load `w` gives `R_A = R_B = w*L/2` and a mid-span moment `w*L^2/8`. This MicroSim makes the entire chain interactive: drag a point load along the span, add a uniform load, change the flexural rigidity `EI`, and watch the reactions, the shear and moment diagrams, and the sagging elastic curve all update together by **superposition**.
## See also
- Hub: Spintronics · Branch: **S -- Statics**
- Related statics sims: [[Physical_system]] · Cremona diagram · [[Force]] · Mechanical equilibrium · Torque · [[Newton's_laws_of_motion]]
- Standard: MicroSim Best Practices · editor workflow: P5 JS EDITOR
- Index: MAIN
_Poster image deferred to attended backfill: `SPINTRONICS_Statics_Images/Structural_engineering.png` (headless runs cannot capture the canvas)._
Letters: force · equilibrium · mined_structure · superposition · circuit_symbols_iec · flow · kanji_radicals · mined_electron
See also (bridge flow x mined_structure): Technology acceptance model
<!-- BEAUTY-PASS-MEDIA:START -->
<!-- CRAFT-LINK:START g12 -->
*Built to the [[WT!P5_js_Microsim_Master_Class|p5.js Master Class]].*
<!-- CRAFT-LINK:END -->
## Wikipedia : Wikitube
**Strict pair:** [Wikipedia](https://en.wikipedia.org/wiki/Structural_engineering) : [Wikitube](https://en.wikitube.io/wiki/Structural_engineering)
## Previous hub tags
Tree parents: [[Reliability_engineering]] · [[Systems_engineering]].
Legacy hubs: `SPINTRONICS`.
---
*Sources: 3 legacy notes. Minted wave 1, 2026-07-30 (v1.6 order).*