[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"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",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","10384030646103669908","traceTime",1776682878930]