[{"_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","696479ee9118819192be292d8f0980dc","versionInt","title","Simulasi Gerak Parabola – Bantuan Dari Helikopter","type","code/react","content","import React, { useRef, useEffect, useState } from \"react\";\n\nexport default function SimulasiGerakParabola() {\n const canvasRef = useRef(null);\n const [running, setRunning] = useState(false);\n\n // variabel yang dapat diubah siswa\n const [v, setV] = useState(20); // kecepatan horizontal (m/s)\n const [h, setH] = useState(50); // ketinggian helikopter (m)\n\n const g = 9.8; // gravitasi (m/s^2)\n\n useEffect(() => {\n const canvas = canvasRef.current;\n const ctx = canvas.getContext(\"2d\");\n\n let t = 0;\n let animationId;\n\n function draw() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n // tanah\n ctx.fillStyle = \"#228B22\";\n ctx.fillRect(0, canvas.height - 40, canvas.width, 40);\n\n // helikopter\n ctx.fillStyle = \"#555\";\n ctx.fillRect(40, 80, 80, 30);\n ctx.fillRect(60, 60, 40, 20);\n\n // skala (1 m = 5 px)\n const scale = 5;\n\n // posisi paket\n const x = v * t * scale + 80;\n const y = canvas.height - 40 - (h - 0.5 * g * t * t) * scale;\n\n // paket bantuan\n ctx.fillStyle = \"#8B4513\";\n ctx.fillRect(x, y, 12, 12);\n\n // lintasan parabola\n ctx.beginPath();\n ctx.strokeStyle = \"rgba(0,0,255,0.4)\";\n for (let ti = 0; ti < t; ti += 0.1) {\n const xi = v * ti * scale + 86;\n const yi = canvas.height - 40 - (h - 0.5 * g * ti * ti) * scale;\n if (ti === 0) ctx.moveTo(xi, yi);\n else ctx.lineTo(xi, yi);\n }\n ctx.stroke();\n\n t += 0.05;\n\n // jika paket menyentuh tanah\n if (h - 0.5 * g * t * t <= 0) {\n const waktuJatuh = Math.sqrt((2 * h) / g);\n const jarak = v * waktuJatuh;\n\n ctx.fillStyle = \"red\";\n ctx.fillRect(80 + jarak * scale, canvas.height - 45, 10, 10);\n\n ctx.fillStyle = \"black\";\n ctx.font = \"14px sans-serif\";\n ctx.fillText(\n `Jarak jatuh ≈ ${jarak.toFixed(1)} m`,\n 80 + jarak * scale - 40,\n canvas.height - 50\n );\n\n cancelAnimationFrame(animationId);\n setRunning(false);\n } else {\n animationId = requestAnimationFrame(draw);\n }\n }\n\n if (running) {\n t = 0;\n draw();\n }\n\n return () => cancelAnimationFrame(animationId);\n }, [running, v, h]);\n\n return (\n

Simulasi Gerak Parabola

\n Simulasi fisika kebencanaan: helikopter menyalurkan paket bantuan.\n Siswa dapat mengubah kecepatan helikopter dan ketinggian,\n lalu mengamati jarak horizontal tempat bantuan jatuh.\n

\n\n \n\n

\n \n Kecepatan Helikopter (m/s): {v}\n \n setV(Number(e.target.value))}\n className=\"w-full\"\n />\n

\n \n Ketinggian Helikopter (m): {h}\n \n setH(Number(e.target.value))}\n className=\"w-full\"\n />\n

\n\n

\n setRunning(true)}\n className=\"px-4 py-2 bg-blue-600 text-white rounded-xl shadow\"\n >\n Jalankan Simulasi\n \n setRunning(false)}\n className=\"px-4 py-2 bg-gray-400 text-white rounded-xl shadow\"\n >\n Reset\n \n

\n\n

Konsep Fisika

Gerak horizontal: v konstan
Gerak vertikal: dipengaruhi gravitasi
Waktu jatuh: t = √(2h/g)
Jarak horizontal: x = v · t

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