[{"_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":12,"_34":12,"_35":12,"_36":37},"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","68984c904b6c819196f6e16433429b3f","versionInt","title","Interactive Stick-figure Ragdoll (react + Matter","type","code/react","content","import React, { useEffect, useRef, useState } from \"react\";\nimport Matter from \"matter-js\";\n\n// One-file playground: interactive stick-figure ragdolls using Matter.js physics\n// - Drag with mouse / touch\n// - Adjust gravity & joint stiffness/damping\n// - Spawn / reset / nudge / freeze\n//\n// Tip: Try lowering stiffness for a very floppy ragdoll, or negative gravity to make it float!\n\nexport default function RagdollPlayground() {\n const containerRef = useRef(null);\n const engineRef = useRef(null);\n const renderRef = useRef(null);\n const runnerRef = useRef(null);\n const mouseRef = useRef(null);\n const mouseConstraintRef = useRef(null);\n const wallsRef = useRef({});\n const ragdollsRef = useRef([]); // array of Composite\n\n const [gravityY, setGravityY] = useState(1); // -1 to 1\n const [stiffness, setStiffness] = useState(0.6); // 0 to 1\n const [damping, setDamping] = useState(0.1); // 0 to 1\n const [count, setCount] = useState(1);\n\n // Utility: create or update walls to fit the canvas\n const createOrUpdateWalls = (world, width, height) => {\n const { Bodies, World, Composite, Body } = Matter;\n\n const thickness = 80; // thick to avoid tunneling at high speeds\n const halfT = thickness / 2;\n\n const makeWall = (x, y, w, h, key) =>\n Bodies.rectangle(x, y, w, h, {\n label: key,\n isStatic: true,\n render: { fillStyle: \"#0b1220\" },\n });\n\n const existing = wallsRef.current;\n const needNew = !existing.floor;\n\n if (needNew) {\n const floor = makeWall(width / 2, height + halfT - 2, width + thickness, thickness, \"floor\");\n const ceiling = makeWall(width / 2, -halfT + 2, width + thickness, thickness, \"ceiling\");\n const left = makeWall(-halfT + 2, height / 2, thickness, height + thickness, \"left\");\n const right = makeWall(width + halfT - 2, height / 2, thickness, height + thickness, \"right\");\n wallsRef.current = { floor, ceiling, left, right };\n World.add(world, [floor, ceiling, left, right]);\n } else {\n const { floor, ceiling, left, right } = wallsRef.current;\n Matter.Body.setPosition(floor, { x: width / 2, y: height + halfT - 2 });\n Matter.Body.setPosition(ceiling, { x: width / 2, y: -halfT + 2 });\n Matter.Body.setPosition(left, { x: -halfT + 2, y: height / 2 });\n Matter.Body.setPosition(right, { x: width + halfT - 2, y: height / 2 });\n\n Body.setVertices(floor, Matter.Vertices.fromPath(`0 0 ${width + thickness} 0 ${width + thickness} ${thickness} 0 ${thickness}`));\n Body.setVertices(ceiling, Matter.Vertices.fromPath(`0 0 ${width + thickness} 0 ${width + thickness} ${thickness} 0 ${thickness}`));\n Body.setVertices(left, Matter.Vertices.fromPath(`0 0 ${thickness} 0 ${thickness} ${height + thickness} 0 ${height + thickness}`));\n Body.setVertices(right, Matter.Vertices.fromPath(`0 0 ${thickness} 0 ${thickness} ${height + thickness} 0 ${height + thickness}`));\n }\n };\n\n // Build a lightweight stick-figure ragdoll\n const createStickRagdoll = (x, y, scale = 1, opts = {}) => {\n const {\n stiffness = 0.6,\n damping = 0.1,\n frictionAir = 0.015,\n restitution = 0.15,\n } = opts;\n\n const {\n Body,\n Bodies,\n Composite,\n Constraint,\n } = Matter;\n\n const group = Matter.Body.nextGroup(true);\n\n const common = {\n collisionFilter: { group },\n frictionAir,\n restitution,\n render: { fillStyle: \"#D1E3FF\", strokeStyle: \"#9DB6FF\", lineWidth: 1 },\n };\n\n // Measurements (stick-ish proportions)\n const headR = 10 * scale;\n const chestW = 10 * scale; const chestH = 28 * scale;\n const pelvisW = 10 * scale; const pelvisH = 24 * scale;\n const upperArmL = 22 * scale; const limbW = 5 * scale; const lowerArmL = 22 * scale;\n const upperLegL = 26 * scale; const lowerLegL = 28 * scale;\n\n const head = Bodies.circle(x, y - (chestH + headR * 2) * 0.5, headR, { ...common, label: \"head\" });\n const chest = Bodies.rectangle(x, y, chestW, chestH, { ...common, chamfer: 2, label: \"chest\" });\n const pelvis = Bodies.rectangle(x, y + chestH * 0.6, pelvisW, pelvisH, { ...common, chamfer: 2, label: \"pelvis\" });\n\n const uArmL = Bodies.rectangle(x - chestW * 0.85, y - chestH * 0.15, upperArmL, limbW, { ...common, label: \"uArmL\" });\n const lArmL = Bodies.rectangle(x - chestW * 1.65 - lowerArmL * 0.5, y - chestH * 0.1, lowerArmL, limbW, { ...common, label: \"lArmL\" });\n\n const uArmR = Bodies.rectangle(x + chestW * 0.85, y - chestH * 0.15, upperArmL, limbW, { ...common, label: \"uArmR\" });\n const lArmR = Bodies.rectangle(x + chestW * 1.65 + lowerArmL * 0.5, y - chestH * 0.1, lowerArmL, limbW, { ...common, label: \"lArmR\" });\n\n const uLegL = Bodies.rectangle(x - pelvisW * 0.25, y + chestH * 0.8 + upperLegL * 0.5, limbW, upperLegL, { ...common, label: \"uLegL\" });\n const lLegL = Bodies.rectangle(x - pelvisW * 0.25, y + chestH * 0.8 + upperLegL + lowerLegL * 0.5, limbW, lowerLegL, { ...common, label: \"lLegL\" });\n\n const uLegR = Bodies.rectangle(x + pelvisW * 0.25, y + chestH * 0.8 + upperLegL * 0.5, limbW, upperLegL, { ...common, label: \"uLegR\" });\n const lLegR = Bodies.rectangle(x + pelvisW * 0.25, y + chestH * 0.8 + upperLegL + lowerLegL * 0.5, limbW, lowerLegL, { ...common, label: \"lLegR\" });\n\n // Constraints (simple string joints)\n const makeJoint = (bodyA, bodyB, pointA, pointB, len = undefined) =>\n Constraint.create({ bodyA, bodyB, pointA, pointB, length: len, stiffness, damping, render: { strokeStyle: \"#7EA7FF\" } });\n\n const joints = [];\n\n // Neck\n joints.push(makeJoint(head, chest, { x: 0, y: headR * 0.8 }, { x: 0, y: -chestH * 0.45 }, headR * 0.6));\n // Spine\n joints.push(makeJoint(chest, pelvis, { x: 0, y: chestH * 0.45 }, { x: 0, y: -pelvisH * 0.45 }));\n\n // Shoulders & elbows\n joints.push(makeJoint(chest, uArmL, { x: -chestW * 0.55, y: -chestH * 0.15 }, { x: -upperArmL * 0.5 + 2, y: 0 }));\n joints.push(makeJoint(uArmL, lArmL, { x: upperArmL * 0.5 - 2, y: 0 }, { x: -lowerArmL * 0.5 + 2, y: 0 }));\n\n joints.push(makeJoint(chest, uArmR, { x: chestW * 0.55, y: -chestH * 0.15 }, { x: upperArmL * 0.5 - 2, y: 0 }));\n joints.push(makeJoint(uArmR, lArmR, { x: -upperArmL * 0.5 + 2, y: 0 }, { x: lowerArmL * 0.5 - 2, y: 0 }));\n\n // Hips & knees\n joints.push(makeJoint(pelvis, uLegL, { x: -pelvisW * 0.25, y: pelvisH * 0.45 }, { x: 0, y: -upperLegL * 0.5 + 1 }));\n joints.push(makeJoint(uLegL, lLegL, { x: 0, y: upperLegL * 0.5 - 1 }, { x: 0, y: -lowerLegL * 0.5 + 1 }));\n\n joints.push(makeJoint(pelvis, uLegR, { x: pelvisW * 0.25, y: pelvisH * 0.45 }, { x: 0, y: -upperLegL * 0.5 + 1 }));\n joints.push(makeJoint(uLegR, lLegR, { x: 0, y: upperLegL * 0.5 - 1 }, { x: 0, y: -lowerLegL * 0.5 + 1 }));\n\n const composite = Composite.create({ label: \"stick-ragdoll\" });\n Composite.add(composite, [head, chest, pelvis, uArmL, lArmL, uArmR, lArmR, uLegL, lLegL, uLegR, lLegR, ...joints]);\n\n const bodies = [head, chest, pelvis, uArmL, lArmL, uArmR, lArmR, uLegL, lLegL, uLegR, lLegR];\n return { composite, bodies, joints };\n };\n\n // Apply options (stiffness/damping) to all ragdoll joints\n const applyJointOptions = (stiff, damp) => {\n ragdollsRef.current.forEach(({ joints }) => {\n joints.forEach((j) => {\n j.stiffness = stiff;\n j.damping = damp;\n });\n });\n };\n\n const addRagdoll = (world, x, y, scale = 1) => {\n const doll = createStickRagdoll(x, y, scale, {\n stiffness,\n damping,\n });\n Matter.Composite.add(world, doll.composite);\n ragdollsRef.current.push(doll);\n return doll;\n };\n\n const clearRagdolls = (world) => {\n const { Composite, World } = Matter;\n ragdollsRef.current.forEach((d) => Composite.remove(world, d.composite, true));\n ragdollsRef.current = [];\n };\n\n const freezeRagdolls = (freeze = true) => {\n ragdollsRef.current.forEach(({ bodies }) =>\n bodies.forEach((b) => Matter.Body.setStatic(b, freeze))\n );\n };\n\n const nudge = () => {\n // Add a playful impulse to each ragdoll's pelvis\n ragdollsRef.current.forEach(({ bodies }) => {\n const pelvis = bodies.find((b) => b.label === \"pelvis\") || bodies[0];\n const f = 0.0025 + Math.random() * 0.0035;\n Matter.Body.applyForce(pelvis, pelvis.position, { x: (Math.random() - 0.5) * f, y: -f });\n });\n };\n\n // Initialize Matter engine & scene\n useEffect(() => {\n if (!containerRef.current) return;\n\n const width = containerRef.current.clientWidth;\n const height = containerRef.current.clientHeight;\n\n const engine = Matter.Engine.create({ enableSleeping: true });\n engine.world.gravity.y = gravityY;\n\n const render = Matter.Render.create({\n element: containerRef.current,\n engine,\n options: {\n width,\n height,\n wireframes: false,\n background: \"transparent\",\n showSleeping: false,\n pixelRatio: window.devicePixelRatio,\n },\n });\n\n Matter.Render.run(render);\n Matter.Render.setPixelRatio(render, \"auto\");\n const runner = Matter.Runner.create();\n Matter.Runner.run(runner, engine);\n\n engineRef.current = engine;\n renderRef.current = render;\n runnerRef.current = runner;\n\n // Fit walls & add first ragdoll(s)\n createOrUpdateWalls(engine.world, width, height);\n\n const rows = Math.ceil(Math.sqrt(count));\n const cols = Math.ceil(count / rows);\n const spacingX = width / (cols + 1);\n const spacingY = height / (rows + 1);\n\n let placed = 0;\n for (let r = 0; r < rows; r++) {\n for (let c = 0; c < cols; c++) {\n if (placed >= count) break;\n const px = spacingX * (c + 1);\n const py = spacingY * (r + 1) - 40;\n addRagdoll(engine.world, px, py, 1);\n placed++;\n }\n }\n\n // Mouse interaction\n const mouse = Matter.Mouse.create(render.canvas);\n const mouseConstraint = Matter.MouseConstraint.create(engine, {\n mouse,\n constraint: { stiffness: 0.2, damping: 0.05, render: { visible: false } },\n });\n Matter.World.add(engine.world, mouseConstraint);\n render.mouse = mouse; // keep in sync for debug tools\n\n mouseRef.current = mouse;\n mouseConstraintRef.current = mouseConstraint;\n\n // Resize handler\n const handleResize = () => {\n if (!containerRef.current || !renderRef.current || !engineRef.current) return;\n const w = containerRef.current.clientWidth;\n const h = containerRef.current.clientHeight;\n renderRef.current.canvas.width = w;\n renderRef.current.canvas.height = h;\n renderRef.current.options.width = w;\n renderRef.current.options.height = h;\n createOrUpdateWalls(engineRef.current.world, w, h);\n Matter.Render.setPixelRatio(renderRef.current, \"auto\");\n };\n const ro = new ResizeObserver(handleResize);\n ro.observe(containerRef.current);\n\n // Cleanup\n return () => {\n ro.disconnect();\n if (mouseConstraintRef.current) Matter.World.remove(engine.world, mouseConstraintRef.current);\n clearRagdolls(engine.world);\n const { floor, ceiling, left, right } = wallsRef.current || {};\n if (floor) Matter.World.remove(engine.world, [floor, ceiling, left, right]);\n Matter.Render.stop(render);\n Matter.Runner.stop(runner);\n if (render.canvas && render.canvas.parentNode) render.canvas.parentNode.removeChild(render.canvas);\n Matter.Engine.clear(engine);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n // React to control changes\n useEffect(() => {\n if (engineRef.current) engineRef.current.world.gravity.y = gravityY;\n }, [gravityY]);\n\n useEffect(() => {\n applyJointOptions(stiffness, damping);\n }, [stiffness, damping]);\n\n const onReset = () => {\n const engine = engineRef.current;\n if (!engine) return;\n clearRagdolls(engine.world);\n const w = renderRef.current.options.width;\n const h = renderRef.current.options.height;\n addRagdoll(engine.world, w * 0.5, h * 0.3, 1);\n };\n\n const onAdd = () => {\n const engine = engineRef.current;\n if (!engine) return;\n const w = renderRef.current.options.width;\n const x = 40 + Math.random() * (w - 80);\n addRagdoll(engine.world, x, 40 + Math.random() * 40, 1);\n };\n\n const onClear = () => {\n const engine = engineRef.current;\n if (!engine) return;\n clearRagdolls(engine.world);\n };\n\n const onStack = () => {\n const engine = engineRef.current;\n if (!engine) return;\n const w = renderRef.current.options.width;\n const h = renderRef.current.options.height;\n const cols = 3;\n const rows = 2;\n const sx = w / (cols + 1);\n const sy = h / (rows + 2);\n for (let r = 0; r < rows; r++) {\n for (let c = 0; c < cols; c++) {\n addRagdoll(engine.world, sx * (c + 1), sy * (r + 1), 1);\n }\n }\n };\n\n const controlGroup = (label, children) => (\n

{label}

\n {children}\n

\n );\n\n return (\n

\n {/* Background */}\n

\n\n {/* Canvas host */}\n

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

Stick Ragdoll Lab

Drag the body. Tweak physics. Have fun.

\n \n \n

\n\n

\n {controlGroup(\n \"Physics\",\n <>\n \n Gravity\n setGravityY(parseFloat(e.target.value))}\n />\n {gravityY.toFixed(2)}\n \n \n Stiffness\n setStiffness(parseFloat(e.target.value))}\n />\n {stiffness.toFixed(2)}\n \n \n Damping\n setDamping(parseFloat(e.target.value))}\n />\n {damping.toFixed(2)}\n \n \n )}\n\n {controlGroup(\n \"Spawns\",\n <>\n

\n \n \n

\n \n )}\n

\n\n {/* Tiny help badge */}\n

\n Drag to grab. Scroll to zoom (trackpad pinch). Lower stiffness = floppier.\n

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","5453450450500000725","traceTime",1780224094362]