[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":29,"_34":12,"_35":12,"_36":12,"_37":12,"_38":-5,"_39":40},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","68e42ca0f83c81918b23bf6f71b44ab9","versionInt","title","Staggerwing Visualizer (us 4,139,172)","type","code/react","content","import React, { useMemo, useState, useEffect } from \"react\";\nimport { motion } from \"framer-motion\";\nimport {\n LineChart,\n Line,\n XAxis,\n YAxis,\n CartesianGrid,\n Tooltip,\n Legend,\n ResponsiveContainer,\n AreaChart,\n Area,\n} from \"recharts\";\n\n// --- Utility math ---\nfunction gaussian(x, mu, sigma, amp = 1) {\n const z = (x - mu) / sigma;\n return amp * Math.exp(-0.5 * z * z);\n}\n\nfunction finiteDiff(xs, ys) {\n const dx = xs[1] - xs[0];\n const dydx = ys.map((y, i) => {\n if (i === 0) return (ys[i + 1] - y) / dx;\n if (i === ys.length - 1) return (y - ys[i - 1]) / dx;\n return (ys[i + 1] - ys[i - 1]) / (2 * dx);\n });\n return dydx;\n}\n\nfunction integrate(xs, ys) {\n // Simple trapezoidal rule\n let sum = 0;\n for (let i = 1; i < xs.length; i++) {\n const dx = xs[i] - xs[i - 1];\n sum += 0.5 * dx * (ys[i] + ys[i - 1]);\n }\n return sum;\n}\n\nexport default function StaggerwingVisualizer() {\n // --- Parameters (toy model; units ~ meters, areas are normalized) ---\n const [L, setL] = useState(19.0); // fuselage length\n const [span, setSpan] = useState(13.0); // total span\n const [rootChord, setRootChord] = useState(5.0);\n const [tipChord, setTipChord] = useState(2.0);\n const [sweepDeg, setSweepDeg] = useState(35);\n const [tOverC, setTOverC] = useState(0.12); // thickness ratio\n const [stagger, setStagger] = useState(3.0); // fore-aft separation between left/right panels\n const [cg, setCg] = useState(8.5); // x position of CG along fuselage\n const [showBaseline, setShowBaseline] = useState(true);\n const [animate, setAnimate] = useState(false);\n\n // convenience bounds\n const minX = 0;\n const maxX = L;\n\n // Derived planform\n const halfSpan = span / 2;\n const fullWingArea = ((rootChord + tipChord) / 2) * span; // trapezoid approx\n const panelArea = fullWingArea / 2;\n\n // Very rough guess of the x-center of wing planform effect on cross-section (quarter-chord-ish),\n // with simple sweep-induced chordwise shift approximation.\n const sweepRad = (Math.PI / 180) * sweepDeg;\n const sweepShift = Math.tan(sweepRad) * (halfSpan * 0.25) * 0.5; // toy factor\n const xWingCenterBase = 0.45 * L + sweepShift; // baseline center (both panels if symmetric)\n\n const xRight = xWingCenterBase + stagger / 2; // forward or aft depending on sign\n const xLeft = xWingCenterBase - stagger / 2;\n\n // Forward vs rear panel w.r.t CG (for control leverage intuition)\n const forwardPanelX = Math.abs(xLeft - cg) < Math.abs(xRight - cg) ? xLeft : xRight;\n const rearPanelX = forwardPanelX === xLeft ? xRight : xLeft;\n const armForward = forwardPanelX - cg; // moment arm (m)\n const armRear = rearPanelX - cg; // moment arm (m)\n const pitchLeverageRatio = Math.abs(armRear) / Math.max(1e-6, Math.abs(armForward));\n\n // --- Discretization along x ---\n const N = 500;\n const xs = useMemo(() => Array.from({ length: N }, (_, i) => minX + (i * (maxX - minX)) / (N - 1)), [minX, maxX]);\n\n // --- Cross-section models ---\n const fuselage = useMemo(() => {\n // Two-hump smooth fuselage area profile (nose + mid-body), normalized\n const Amax = 1.0; // normalized reference area\n const nose = xs.map((x) => gaussian(x, 0.2 * L, 0.12 * L, 0.7 * Amax));\n const mid = xs.map((x) => gaussian(x, 0.55 * L, 0.18 * L, 1.2 * Amax));\n return nose.map((n, i) => n + mid[i]);\n }, [xs, L]);\n\n const sigmaW = 0.06 * L + 0.04 * rootChord; // spread of each wing's contribution along x\n const panelAmp = (panelArea * tOverC) / (Math.sqrt(2 * Math.PI) * sigmaW) * 0.5; // normalized amplitude\n\n const wingsBaseline = useMemo(() => {\n // Both panels centered at xWingCenterBase (symmetric)\n const g = xs.map((x) => gaussian(x, xWingCenterBase, sigmaW, 2 * panelAmp)); // both panels overlap\n return g;\n }, [xs, xWingCenterBase, sigmaW, panelAmp]);\n\n const wingsStagger = useMemo(() => {\n const gR = xs.map((x) => gaussian(x, xRight, sigmaW, panelAmp));\n const gL = xs.map((x) => gaussian(x, xLeft, sigmaW, panelAmp));\n return gR.map((v, i) => v + gL[i]);\n }, [xs, xRight, xLeft, sigmaW, panelAmp]);\n\n const totalBaseline = useMemo(() => fuselage.map((v, i) => v + wingsBaseline[i]), [fuselage, wingsBaseline]);\n const totalStagger = useMemo(() => fuselage.map((v, i) => v + wingsStagger[i]), [fuselage, wingsStagger]);\n\n // --- Wave-drag proxy (Whitcomb-style): integral of (dA/dx)^2 ---\n const slopeBaseline = useMemo(() => finiteDiff(xs, totalBaseline), [xs, totalBaseline]);\n const slopeStagger = useMemo(() => finiteDiff(xs, totalStagger), [xs, totalStagger]);\n const dragProxyBaseline = useMemo(() => integrate(xs, slopeBaseline.map((s) => s * s)), [xs, slopeBaseline]);\n const dragProxyStagger = useMemo(() => integrate(xs, slopeStagger.map((s) => s * s)), [xs, slopeStagger]);\n const dragReductionPct = useMemo(\n () => ((dragProxyBaseline - dragProxyStagger) / dragProxyBaseline) * 100,\n [dragProxyBaseline, dragProxyStagger]\n );\n\n // Animate stagger toggle\n useEffect(() => {\n if (!animate) return;\n let t = 0;\n const base = stagger;\n const id = setInterval(() => {\n t += 0.02;\n const oscillate = 0.5 * base * (1 + Math.sin(t)); // 0..base\n setStagger(parseFloat(oscillate.toFixed(3)));\n }, 30);\n return () => clearInterval(id);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [animate]);\n\n // Build chart data\n const chartData = useMemo(() => {\n return xs.map((x, i) => ({\n x: parseFloat(x.toFixed(2)),\n fuselage: fuselage[i],\n wingsBaseline: wingsBaseline[i],\n wingsStagger: wingsStagger[i],\n totalBaseline: totalBaseline[i],\n totalStagger: totalStagger[i],\n }));\n }, [xs, fuselage, wingsBaseline, wingsStagger, totalBaseline, totalStagger]);\n\n // Simple planform sketch (SVG) — not to scale, just qualitative\n const Sketch = () => {\n const W = 880, H = 220;\n const pad = 24;\n const scaleX = (x) => pad + (x / L) * (W - 2 * pad);\n const centerY = H / 2;\n\n const sweepPx = Math.tan(sweepRad) * (H * 0.18); // visual sweep cue\n\n const wingPoly = (centerX) => {\n const semi = H * 0.28;\n const rc = rootChord * 14; // visual scaling\n const tc = tipChord * 14;\n // Build a simple swept trapezoid\n const xRootLE = centerX - rc * 0.25 - sweepPx * 0.3;\n const xRootTE = xRootLE + rc;\n const xTipLE = centerX - tc * 0.25 + sweepPx * 0.7;\n const xTipTE = xTipLE + tc;\n const yTop = centerY - semi;\n const yBot = centerY + semi;\n return `${xRootLE},${yTop} ${xTipLE},${yTop} ${xTipTE},${yBot} ${xRootTE},${yBot}`;\n };\n\n const cxBaseline = scaleX(xWingCenterBase);\n const cxRight = scaleX(xRight);\n const cxLeft = scaleX(xLeft);\n\n return (\n \n );\n };\n\n return (\n

Staggerwing Concept — Visual Sandbox

Inspired by US 4,139,172 (Miller & Herring). Toy model to compare area distribution and control leverage for symmetric vs staggered wing panel placement.

\n {\n setL(19.45);\n setSpan(13.05);\n setRootChord(5.2);\n setTipChord(2.0);\n setSweepDeg(35);\n setTOverC(0.12);\n setStagger(3.0);\n setCg(8.6);\n }}\n className=\"px-3 py-2 rounded-xl bg-neutral-800 hover:bg-neutral-700 text-sm\"\n >\n Preset: F‑15-ish\n \n {\n setL(19);\n setSpan(13);\n setRootChord(5);\n setTipChord(2);\n setSweepDeg(35);\n setTOverC(0.12);\n setStagger(3);\n setCg(8.5);\n setShowBaseline(true);\n setAnimate(false);\n }}\n className=\"px-3 py-2 rounded-xl bg-neutral-800 hover:bg-neutral-700 text-sm\"\n >\n Reset\n \n setAnimate((v) => !v)}\n className={`px-3 py-2 rounded-xl text-sm ${animate ? \"bg-green-700\" : \"bg-neutral-800 hover:bg-neutral-700\"}`}\n >\n {animate ? \"Animating\" : \"Animate translation\"}\n \n

\n\n {/* Sketch */}\n

\n \n

\n\n {/* Controls */}\n

Geometry

\n \n \n \n \n \n \n \n \n \n

\n\n

Cross‑sectional Area vs x

\n \n \n \n \n \n \n \n {showBaseline && (\n <>\n \n \n )}\n \n \n \n \n

Heuristic model: wings add two Gaussian humps; staggering spreads area along x to smooth peaks (area‑rule intuition).

\n\n

Wave‑drag proxy ∫(dA/dx)² dx

Baseline (symmetric): {dragProxyBaseline.toFixed(3)}

Staggered: {dragProxyStagger.toFixed(3)}

Estimated reduction: {dragReductionPct.toFixed(1)}%

\n \n \n \n \n \n \n \n {showBaseline && (\n \n )}\n \n \n \n

Lower slope‑energy typically implies lower transonic wave drag (Whitcomb area‑rule intuition). Values are normalized and qualitative.

\n\n {/* Right column: control-coupling insight */}\n

Control Coupling Intuition

Forward (near‑CG) panel x: {forwardPanelX.toFixed(2)} m → arm {armForward.toFixed(2)} m

Rear (far) panel x: {rearPanelX.toFixed(2)} m → arm {armRear.toFixed(2)} m

Pitch leverage ratio (rear/forward): 2?\"text-emerald-400\":\"text-amber-300\"}`}>{pitchLeverageRatio.toFixed(2)}×

Higher ratio ≈ better decoupling: the near‑CG panel can add/subtract lift with small pitching moment, while the far panel has strong pitch authority.

\n\n

Notes

All curves are heuristic for intuition, not design‑accurate. Use CFD/WAVE‑DRAG solvers for real estimates.
Baseline overlay shows how a symmetric placement concentrates area; staggering splits the peak.
Try moving CG and Δx to see how pitch leverage and decoupling change.
Use Animate translation to visualize in‑flight reconfiguration.

\n\n \n

\n );\n}\n\n// --- UI helpers ---\nfunction SliderField({ label, value, min, max, step, onChange }) {\n const [local, setLocal] = useState(value);\n useEffect(() => setLocal(value), [value]);\n return (\n

\n {label}\n {typeof value === \"number\" ? value.toFixed(2) : value}\n

\n {\n const v = parseFloat(e.target.value);\n setLocal(v);\n onChange(v);\n }}\n className=\"w-full accent-indigo-400\"\n />\n

\n );\n}\n\nfunction ToggleField({ label, checked, onChange }) {\n return (\n \n onChange(e.target.checked)} />\n {label}\n \n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_41":42,"_43":44},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","manageRootRouteStylesheet","mobileWebHandoffEnabled","promoteCss","disableSSR","stripModulepreloadImports","paidCampaignAppRedirect","statsigGateEvaluationsPromise",["P",40],"traceId","16142940796980065902","traceTime",1790088745393]