Spaces:
Running
Running
| /* ========================================================================== | |
| 倫敦塔益智盒 - 二維俯視幾何投影模擬器 (Interactive 2D Simulator) | |
| 支援剛性碰撞約束物理、滑鼠/觸控拖曳、幾何動態運算與 KaTeX 公式連動 | |
| ========================================================================== */ | |
| class Interactive2DSimulator { | |
| constructor(canvasId, options = {}) { | |
| this.canvas = document.getElementById(canvasId); | |
| if (!this.canvas) { | |
| console.error(`[Interactive2D] 找不到畫布元素: #${canvasId}`); | |
| return; | |
| } | |
| this.ctx = this.canvas.getContext('2d'); | |
| this.scale = 100; // 繪圖縮放基準 (px/cm) | |
| this.r = 1.10; // 球半徑 1.10cm (直徑 2.20cm) | |
| this.holeR = 1.10; // 出口孔半徑 1.10cm (直徑 2.20cm) | |
| this.S = options.initialS || 4.40; // 盒子內徑預設 4.40cm (死鎖初始) | |
| this.showEscapeDist = false; // 是否顯示對角逃脫線 | |
| // 四顆關鍵粒子 (投影在 X-Z 水平俯視平面) | |
| // G1, G3: 綠球 (柱球); R: 紅球 (頂/底動態球); B: 藍球 (底/頂動態球) | |
| this.particles = [ | |
| { x: 0, z: 0, color: '#10b981', label: 'G1', baseColor: '#10b981' }, | |
| { x: 0, z: 0, color: '#10b981', label: 'G3', baseColor: '#10b981' }, | |
| { x: 0, z: 0, color: '#ef4444', label: 'R', baseColor: '#ef4444' }, | |
| { x: 0, z: 0, color: '#38bdf8', label: 'B', baseColor: '#38bdf8' } | |
| ]; | |
| // 互動狀態 | |
| this.mouseX = 0; | |
| this.mouseZ = 0; | |
| this.draggedParticle = null; | |
| this.isRunning = false; | |
| this.animationFrameId = null; | |
| // 外部懸停聯動高亮目標 ('dg' | 'drb' | 'drg' | 'escapeNet' | null) | |
| this.highlightTarget = null; | |
| // 回呼函式 (供外部 UI 更新數值與公式) | |
| this.onStatsUpdate = options.onStatsUpdate || null; | |
| // 物理穩定收斂計數器 (避免未操作時數值微幅抖動) | |
| this.settleFrames = 60; | |
| // 初始化 | |
| this.setupEvents(); | |
| this.resetToInitialState(); | |
| } | |
| /** | |
| * 重置球體至對角極限角落初始狀態 | |
| */ | |
| resetToInitialState() { | |
| const S = this.S; | |
| const limit = S / 2 - this.r; | |
| const c = Math.min(limit, this.r); | |
| // 綠球 G1, G3 置於對角 | |
| this.particles[0].x = c; | |
| this.particles[0].z = c; | |
| this.particles[1].x = -c; | |
| this.particles[1].z = -c; | |
| // 紅藍球 R, B 放置於另一對角線 (3*(2r)^2 = 3 * 4.84 = 14.52) | |
| const safeUnderSqrt = Math.max(0, 14.52 - 8 * c * c); | |
| const v = Math.sqrt(safeUnderSqrt) / 2; | |
| const v_proj = v / Math.SQRT2; | |
| this.particles[2].x = v_proj; | |
| this.particles[2].z = -v_proj; | |
| this.particles[3].x = -v_proj; | |
| this.particles[3].z = v_proj; | |
| // 預熱物理步驟以穩定接觸面 | |
| for (let i = 0; i < 60; i++) { | |
| this.stepPhysics(S); | |
| } | |
| this.settleFrames = 15; | |
| } | |
| /** | |
| * 設定盒子內徑 S | |
| */ | |
| setBoxSize(S) { | |
| this.S = S; | |
| this.settleFrames = 20; | |
| this.stepPhysics(this.S); | |
| } | |
| /** | |
| * 設定是否顯示對角逃脫線 | |
| */ | |
| setEscapeDistVisible(visible) { | |
| this.showEscapeDist = !!visible; | |
| } | |
| /** | |
| * 設定側邊欄 hover 聯動高亮目標 | |
| */ | |
| setHighlightTarget(target) { | |
| this.highlightTarget = target || null; | |
| } | |
| /** | |
| * 綁定指標與觸控事件 | |
| */ | |
| setupEvents() { | |
| const getPos = (clientX, clientY) => { | |
| const rect = this.canvas.getBoundingClientRect(); | |
| // 計算 Canvas 實際渲染縮放比 (處理 CSS 響應式尺寸) | |
| const scaleX = this.canvas.width / rect.width; | |
| const scaleY = this.canvas.height / rect.height; | |
| const px = (clientX - rect.left) * scaleX; | |
| const py = (clientY - rect.top) * scaleY; | |
| return { | |
| x: (px - this.canvas.width / 2) / this.scale, | |
| z: (py - this.canvas.height / 2) / this.scale | |
| }; | |
| }; | |
| const handleDown = (clientX, clientY) => { | |
| const pos = getPos(clientX, clientY); | |
| let closest = null; | |
| let minDist = 1.3; // 抓取半徑門檻 (cm) | |
| for (const p of this.particles) { | |
| const d = Math.hypot(pos.x - p.x, pos.z - p.z); | |
| if (d < minDist) { | |
| minDist = d; | |
| closest = p; | |
| } | |
| } | |
| if (closest) { | |
| this.draggedParticle = closest; | |
| this.mouseX = pos.x; | |
| this.mouseZ = pos.z; | |
| this.settleFrames = 30; | |
| } | |
| }; | |
| const handleMove = (clientX, clientY) => { | |
| if (this.draggedParticle) { | |
| const pos = getPos(clientX, clientY); | |
| this.mouseX = pos.x; | |
| this.mouseZ = pos.z; | |
| this.settleFrames = 15; | |
| } | |
| }; | |
| const handleUp = () => { | |
| if (this.draggedParticle) { | |
| this.draggedParticle = null; | |
| this.settleFrames = 15; // 放開手後收斂15幀以穩定固定 | |
| } | |
| }; | |
| // 滑鼠事件 | |
| this.canvas.addEventListener('mousedown', (e) => { | |
| handleDown(e.clientX, e.clientY); | |
| }); | |
| window.addEventListener('mousemove', (e) => { | |
| handleMove(e.clientX, e.clientY); | |
| }); | |
| window.addEventListener('mouseup', handleUp); | |
| // 觸控事件 (支援行動平板防誤觸與手勢鎖定) | |
| this.canvas.addEventListener('touchstart', (e) => { | |
| e.preventDefault(); // 嚴格阻擋原生手勢與縮放 | |
| if (e.touches.length > 0) { | |
| // 使用主觸控點進行球體拖曳 | |
| handleDown(e.touches[0].clientX, e.touches[0].clientY); | |
| } | |
| }, { passive: false }); | |
| this.canvas.addEventListener('touchmove', (e) => { | |
| e.preventDefault(); // 防止在畫布上滑動時觸發頁面彈跳 | |
| }, { passive: false }); | |
| window.addEventListener('touchmove', (e) => { | |
| if (this.draggedParticle && e.touches.length > 0) { | |
| e.preventDefault(); | |
| handleMove(e.touches[0].clientX, e.touches[0].clientY); | |
| } | |
| }, { passive: false }); | |
| window.addEventListener('touchend', handleUp); | |
| window.addEventListener('touchcancel', handleUp); | |
| } | |
| /** | |
| * 剛性物理求解：限制條件、邊界約束與剛性排斥 | |
| */ | |
| stepPhysics(S) { | |
| // 若未拖曳球體且系統已收斂平衡，直接進入靜態休眠，徹底杜絕數值微幅抖動 | |
| if (!this.draggedParticle && this.settleFrames <= 0) { | |
| return; | |
| } | |
| if (!this.draggedParticle && this.settleFrames > 0) { | |
| this.settleFrames--; | |
| } | |
| // 1. 滑鼠彈簧牽引力 | |
| if (this.draggedParticle) { | |
| const dx = this.mouseX - this.draggedParticle.x; | |
| const dz = this.mouseZ - this.draggedParticle.z; | |
| const distToMouse = Math.hypot(dx, dz); | |
| if (distToMouse > 0.001) { | |
| const move = Math.min(distToMouse * 0.12, 0.06); | |
| this.draggedParticle.x += (dx / distToMouse) * move; | |
| this.draggedParticle.z += (dz / distToMouse) * move; | |
| } | |
| } | |
| // 2. 真實 3D 天花板位移限制 | |
| // 綠球被紅藍擠壓時沿 Y 軸往頂壁貼齊，最大位移為 Y = S/2 - r | |
| const max_Y = Math.max(0, S / 2 - this.r); | |
| const safe_Y = Math.min(max_Y, 2.19); | |
| const true_L = Math.sqrt(Math.max(0.01, 4.84 - safe_Y * safe_Y)); | |
| const limit = S / 2 - this.r; | |
| const constraints = [ | |
| { i: 0, j: 2, minD: true_L }, // G1-R | |
| { i: 1, j: 2, minD: true_L }, // G3-R | |
| { i: 0, j: 3, minD: true_L }, // G1-B | |
| { i: 1, j: 3, minD: true_L }, // G3-B | |
| { i: 0, j: 1, minD: 2.20 }, // G1-G3 | |
| { i: 2, j: 3, minD: 2.20 } // R-B 不可穿透 | |
| ]; | |
| // 100 次迭代求解以達到絕對剛性無穿模效果 | |
| for (let iter = 0; iter < 100; iter++) { | |
| for (const c of constraints) { | |
| const p1 = this.particles[c.i]; | |
| const p2 = this.particles[c.j]; | |
| const dx = p2.x - p1.x; | |
| const dz = p2.z - p1.z; | |
| const dist = Math.hypot(dx, dz); | |
| if (dist < c.minD && dist > 0.0001) { | |
| const diff = (dist - c.minD) / dist; // 負值代表穿模擠壓 | |
| p1.x += dx * diff * 0.5; | |
| p1.z += dz * diff * 0.5; | |
| p2.x -= dx * diff * 0.5; | |
| p2.z -= dz * diff * 0.5; | |
| } | |
| } | |
| // 四面盒壁與左右兩端圓形開口 | |
| const hr = this.holeR; // 1.10 | |
| for (const p of this.particles) { | |
| // 若已經徹底逃出盒子，則不限制 | |
| if (p.x > S / 2 + 1 || p.x < -S / 2 - 1 || p.z > S / 2 + 1 || p.z < -S / 2 - 1) continue; | |
| let px = p.x; | |
| let pz = p.z; | |
| // 右側邊壁 (含中段孔洞) | |
| if (px > limit && px <= S / 2 + 1) { | |
| if (pz >= hr || pz <= -hr) { | |
| px = limit; | |
| } else { | |
| const d1 = Math.hypot(px - S / 2, pz - hr); | |
| if (d1 < hr && d1 > 0.001) { | |
| px += ((px - S / 2) / d1) * (hr - d1); | |
| pz += ((pz - hr) / d1) * (hr - d1); | |
| } | |
| const d2 = Math.hypot(px - S / 2, pz + hr); | |
| if (d2 < hr && d2 > 0.001) { | |
| px += ((px - S / 2) / d2) * (hr - d2); | |
| pz += ((pz + hr) / d2) * (hr - d2); | |
| } | |
| } | |
| } | |
| // 左側邊壁 (含中段孔洞) | |
| if (px < -limit && px >= -S / 2 - 1) { | |
| if (pz >= hr || pz <= -hr) { | |
| px = -limit; | |
| } else { | |
| const d1 = Math.hypot(px + S / 2, pz - hr); | |
| if (d1 < hr && d1 > 0.001) { | |
| px += ((px + S / 2) / d1) * (hr - d1); | |
| pz += ((pz - hr) / d1) * (hr - d1); | |
| } | |
| const d2 = Math.hypot(px + S / 2, pz + hr); | |
| if (d2 < hr && d2 > 0.001) { | |
| px += ((px + S / 2) / d2) * (hr - d2); | |
| pz += ((pz + hr) / d2) * (hr - d2); | |
| } | |
| } | |
| } | |
| // 下實體牆壁 | |
| if (pz > limit) pz = limit; | |
| // 上實體牆壁 | |
| if (pz < -limit) pz = -limit; | |
| p.x = px; | |
| p.z = pz; | |
| } | |
| } | |
| } | |
| /** | |
| * 計算幾何數據並觸發 UI 回呼 | |
| */ | |
| calculateStats() { | |
| const pG1 = this.particles[0]; | |
| const pG3 = this.particles[1]; | |
| const pR = this.particles[2]; | |
| const pB = this.particles[3]; | |
| const dg = Math.hypot(pG1.x - pG3.x, pG1.z - pG3.z); | |
| const drb = Math.hypot(pR.x - pB.x, pR.z - pB.z); | |
| const drg = Math.hypot(pR.x - pG1.x, pR.z - pG1.z); | |
| const S = this.S; | |
| const max_Y = Math.max(0, S / 2 - this.r); | |
| const safe_Y = Math.min(max_Y, 2.19); | |
| const true_L = Math.sqrt(Math.max(0.01, 4.84 - safe_Y * safe_Y)); | |
| const escapeTotal = Math.sqrt(S * S + 4.84); | |
| const escapeNet = escapeTotal - 2.20; | |
| const statsData = { | |
| S, | |
| dg, | |
| drb, | |
| drg, | |
| safe_Y, | |
| true_L, | |
| escapeTotal, | |
| escapeNet, | |
| pG1: { x: pG1.x, z: pG1.z }, | |
| pG3: { x: pG3.x, z: pG3.z }, | |
| pR: { x: pR.x, z: pR.z }, | |
| pB: { x: pB.x, z: pB.z } | |
| }; | |
| if (this.onStatsUpdate) { | |
| this.onStatsUpdate(statsData); | |
| } | |
| return statsData; | |
| } | |
| /** | |
| * 高階暗色科技風格畫布渲染 | |
| */ | |
| draw() { | |
| if (!this.ctx) return; | |
| const ctx = this.ctx; | |
| const S = this.S; | |
| const scale = this.scale; | |
| const w = this.canvas.width; | |
| const h = this.canvas.height; | |
| this.stepPhysics(S); | |
| const stats = this.calculateStats(); | |
| // 1. 清理背景 - 深邃漸層 | |
| ctx.clearRect(0, 0, w, h); | |
| const bgGrad = ctx.createRadialGradient(w / 2, h / 2, 20, w / 2, h / 2, Math.max(w, h) / 1.4); | |
| bgGrad.addColorStop(0, '#111827'); | |
| bgGrad.addColorStop(1, '#030712'); | |
| ctx.fillStyle = bgGrad; | |
| ctx.fillRect(0, 0, w, h); | |
| ctx.save(); | |
| ctx.translate(w / 2, h / 2); | |
| // 2. 幾何座標網格線 (精緻微光) | |
| ctx.strokeStyle = 'rgba(56, 189, 248, 0.08)'; | |
| ctx.lineWidth = 1; | |
| const gridSize = scale; | |
| const boundW = w / 2; | |
| const boundH = h / 2; | |
| for (let x = -boundW; x <= boundW; x += gridSize) { | |
| ctx.beginPath(); | |
| ctx.moveTo(x, -boundH); | |
| ctx.lineTo(x, boundH); | |
| ctx.stroke(); | |
| } | |
| for (let y = -boundH; y <= boundH; y += gridSize) { | |
| ctx.beginPath(); | |
| ctx.moveTo(-boundW, y); | |
| ctx.lineTo(boundW, y); | |
| ctx.stroke(); | |
| } | |
| // 3. 左右兩側出口區域半透明光暈 | |
| const hr = this.holeR * scale; | |
| ctx.fillStyle = 'rgba(16, 185, 129, 0.10)'; | |
| ctx.fillRect((S / 2) * scale, -hr, 2 * scale, 2 * hr); // 右出口 | |
| ctx.fillRect((-S / 2 - 2) * scale, -hr, 2 * scale, 2 * hr); // 左出口 | |
| // 4. 盒子邊壁 (發光科技外框) | |
| const ext = (S / 2) * scale; | |
| // 壁身主線 | |
| ctx.strokeStyle = '#f43f5e'; | |
| ctx.lineWidth = 6; | |
| ctx.lineCap = 'round'; | |
| // 右牆 (留出孔洞) | |
| ctx.beginPath(); ctx.moveTo(ext, ext); ctx.lineTo(ext, hr); ctx.stroke(); | |
| ctx.beginPath(); ctx.moveTo(ext, -hr); ctx.lineTo(ext, -ext); ctx.stroke(); | |
| // 左牆 (留出孔洞) | |
| ctx.beginPath(); ctx.moveTo(-ext, ext); ctx.lineTo(-ext, hr); ctx.stroke(); | |
| ctx.beginPath(); ctx.moveTo(-ext, -hr); ctx.lineTo(-ext, -ext); ctx.stroke(); | |
| // 下實體牆 | |
| ctx.beginPath(); ctx.moveTo(ext, ext); ctx.lineTo(-ext, ext); ctx.stroke(); | |
| // 上實體牆 | |
| ctx.beginPath(); ctx.moveTo(ext, -ext); ctx.lineTo(-ext, -ext); ctx.stroke(); | |
| // 出孔綠色虛線指標 | |
| ctx.strokeStyle = '#10b981'; | |
| ctx.lineWidth = 4; | |
| ctx.setLineDash([6, 6]); | |
| ctx.beginPath(); ctx.moveTo(ext, hr); ctx.lineTo(ext, -hr); ctx.stroke(); | |
| ctx.beginPath(); ctx.moveTo(-ext, hr); ctx.lineTo(-ext, -hr); ctx.stroke(); | |
| ctx.setLineDash([]); | |
| // 6. 滑鼠牽引彈簧虛線 | |
| if (this.draggedParticle) { | |
| ctx.save(); | |
| ctx.beginPath(); | |
| ctx.moveTo(this.draggedParticle.x * scale, this.draggedParticle.z * scale); | |
| ctx.lineTo(this.mouseX * scale, this.mouseZ * scale); | |
| ctx.strokeStyle = '#f59e0b'; | |
| ctx.setLineDash([4, 4]); | |
| ctx.lineWidth = 3; | |
| ctx.stroke(); | |
| // 指標點 | |
| ctx.beginPath(); | |
| ctx.arc(this.mouseX * scale, this.mouseZ * scale, 5, 0, Math.PI * 2); | |
| ctx.fillStyle = '#f59e0b'; | |
| ctx.fill(); | |
| ctx.restore(); | |
| } | |
| // 7. 碰撞接觸約束剛性線視覺化 | |
| const max_Y_d = Math.max(0, S / 2 - this.r); | |
| const safe_Y_d = Math.min(max_Y_d, 2.19); | |
| const true_L_draw = Math.sqrt(Math.max(0.01, 4.84 - safe_Y_d * safe_Y_d)); | |
| const drawConstraints = [ | |
| { i: 0, j: 2, minD: true_L_draw }, { i: 1, j: 2, minD: true_L_draw }, | |
| { i: 0, j: 3, minD: true_L_draw }, { i: 1, j: 3, minD: true_L_draw }, | |
| { i: 0, j: 1, minD: 2.20 }, { i: 2, j: 3, minD: 2.20 } | |
| ]; | |
| for (const c of drawConstraints) { | |
| const p1 = this.particles[c.i]; | |
| const p2 = this.particles[c.j]; | |
| const dist = Math.hypot(p2.x - p1.x, p2.z - p1.z); | |
| if (dist < c.minD + 0.08) { | |
| ctx.save(); | |
| ctx.beginPath(); | |
| ctx.moveTo(p1.x * scale, p1.z * scale); | |
| ctx.lineTo(p2.x * scale, p2.z * scale); | |
| const isDynamic = (c.minD === true_L_draw); | |
| ctx.lineWidth = isDynamic ? 3.5 : 2; | |
| ctx.strokeStyle = isDynamic ? 'rgba(56, 189, 248, 0.9)' : 'rgba(255, 255, 255, 0.4)'; | |
| if (!isDynamic) ctx.setLineDash([4, 4]); | |
| ctx.stroke(); | |
| ctx.restore(); | |
| } | |
| } | |
| // 8. 繪製球體 (帶光影立體質感與光暈) | |
| for (const p of this.particles) { | |
| const cx = p.x * scale; | |
| const cz = p.z * scale; | |
| const rPx = this.r * scale; | |
| ctx.save(); | |
| // 陰影 | |
| ctx.shadowColor = 'rgba(0, 0, 0, 0.4)'; | |
| ctx.shadowBlur = 12; | |
| ctx.shadowOffsetX = 3; | |
| ctx.shadowOffsetY = 5; | |
| // 漸層球體 | |
| const grad = ctx.createRadialGradient( | |
| cx - rPx * 0.35, cz - rPx * 0.35, rPx * 0.1, | |
| cx, cz, rPx | |
| ); | |
| if (p.label.startsWith('G')) { | |
| // 翡翠綠球 | |
| grad.addColorStop(0, '#6ee7b7'); | |
| grad.addColorStop(0.5, '#10b981'); | |
| grad.addColorStop(1, '#065f46'); | |
| } else if (p.label === 'R') { | |
| // 烈焰紅球 | |
| grad.addColorStop(0, '#fca5a5'); | |
| grad.addColorStop(0.5, '#ef4444'); | |
| grad.addColorStop(1, '#991b1b'); | |
| } else { | |
| // 科技天藍球 | |
| grad.addColorStop(0, '#bae6fd'); | |
| grad.addColorStop(0.5, '#0ea5e9'); | |
| grad.addColorStop(1, '#075985'); | |
| } | |
| ctx.beginPath(); | |
| ctx.arc(cx, cz, rPx, 0, Math.PI * 2); | |
| ctx.fillStyle = grad; | |
| ctx.fill(); | |
| // 外圈描邊 | |
| ctx.lineWidth = 2; | |
| ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)'; | |
| ctx.stroke(); | |
| ctx.restore(); | |
| // 球心標籤 (等寬清晰字型) | |
| ctx.save(); | |
| ctx.fillStyle = '#ffffff'; | |
| ctx.font = 'bold 18px "Fira Code", Arial, sans-serif'; | |
| ctx.textAlign = 'center'; | |
| ctx.textBaseline = 'middle'; | |
| ctx.shadowColor = 'rgba(0, 0, 0, 0.8)'; | |
| ctx.shadowBlur = 6; | |
| ctx.fillText(p.label, cx, cz); | |
| ctx.restore(); | |
| } | |
| // 8.5 懸停與動態高亮幾何連線 (G1-G3, R-B, R-G1) | |
| const pG1 = this.particles[0]; | |
| const pG3 = this.particles[1]; | |
| const pR = this.particles[2]; | |
| const pB = this.particles[3]; | |
| const isEscapable = (stats.drb <= stats.escapeNet + 0.001); | |
| // (A) 紅藍球心連線 (d_RB) - 平時微光，脫出時轉為暢通綠光，hover 時加粗 | |
| const isRbHighlighted = (this.highlightTarget === 'drb'); | |
| ctx.save(); | |
| ctx.beginPath(); | |
| ctx.moveTo(pR.x * scale, pR.z * scale); | |
| ctx.lineTo(pB.x * scale, pB.z * scale); | |
| if (this.showEscapeDist && isEscapable) { | |
| ctx.strokeStyle = '#10b981'; | |
| ctx.shadowColor = 'rgba(16, 185, 129, 0.8)'; | |
| ctx.shadowBlur = isRbHighlighted ? 20 : 12; | |
| ctx.lineWidth = isRbHighlighted ? 6 : 4; | |
| ctx.setLineDash([6, 4]); | |
| } else { | |
| ctx.strokeStyle = isRbHighlighted ? '#38bdf8' : 'rgba(56, 189, 248, 0.45)'; | |
| ctx.shadowColor = 'rgba(56, 189, 248, 0.8)'; | |
| ctx.shadowBlur = isRbHighlighted ? 18 : 6; | |
| ctx.lineWidth = isRbHighlighted ? 6 : 2.5; | |
| ctx.setLineDash([4, 4]); | |
| } | |
| ctx.stroke(); | |
| ctx.restore(); | |
| // (B) 綠球對角連線 (d_G) - 懸停高亮 | |
| if (this.highlightTarget === 'dg') { | |
| ctx.save(); | |
| ctx.beginPath(); | |
| ctx.moveTo(pG1.x * scale, pG1.z * scale); | |
| ctx.lineTo(pG3.x * scale, pG3.z * scale); | |
| ctx.strokeStyle = '#10b981'; | |
| ctx.shadowColor = 'rgba(16, 185, 129, 0.9)'; | |
| ctx.shadowBlur = 18; | |
| ctx.lineWidth = 6; | |
| ctx.setLineDash([6, 4]); | |
| ctx.stroke(); | |
| ctx.restore(); | |
| } | |
| // (C) 紅綠投影連線 (d_RG) - 懸停高亮 | |
| if (this.highlightTarget === 'drg') { | |
| ctx.save(); | |
| ctx.beginPath(); | |
| ctx.moveTo(pR.x * scale, pR.z * scale); | |
| ctx.lineTo(pG1.x * scale, pG1.z * scale); | |
| ctx.strokeStyle = '#f59e0b'; | |
| ctx.shadowColor = 'rgba(245, 158, 11, 0.9)'; | |
| ctx.shadowBlur = 18; | |
| ctx.lineWidth = 6; | |
| ctx.setLineDash([6, 4]); | |
| ctx.stroke(); | |
| ctx.restore(); | |
| } | |
| // 9. 極限逃脫距離線 (覆蓋於球體圖層之上的對角通道虛線) | |
| if (this.showEscapeDist) { | |
| ctx.save(); | |
| const isEscapeHighlighted = (this.highlightTarget === 'escapeNet'); | |
| // 脫出條件成立時平滑轉為翠綠霓虹色，否則為警告黃色 | |
| const escapeLineColor = isEscapable ? '#10b981' : '#facc15'; | |
| ctx.strokeStyle = escapeLineColor; | |
| ctx.lineWidth = isEscapeHighlighted ? 7 : (isEscapable ? 5 : 4); | |
| ctx.setLineDash([8, 6]); | |
| ctx.shadowColor = isEscapable ? 'rgba(16, 185, 129, 0.85)' : 'rgba(250, 204, 21, 0.6)'; | |
| ctx.shadowBlur = (isEscapeHighlighted || isEscapable) ? 16 : 8; | |
| const p1x = -ext; | |
| const p1z = hr; | |
| const p2x = ext; | |
| const p2z = -hr; | |
| ctx.beginPath(); | |
| ctx.moveTo(p1x, p1z); // 左下洞口頂點 | |
| ctx.lineTo(p2x, p2z); // 右上洞口頂點 | |
| ctx.stroke(); | |
| ctx.setLineDash([]); // 重置虛線 | |
| // 繪製端點白色圓標 (加強可讀性與深度) | |
| ctx.fillStyle = '#ffffff'; | |
| ctx.lineWidth = 2.5; | |
| ctx.strokeStyle = isEscapable ? '#065f46' : '#854d0e'; | |
| ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; | |
| ctx.shadowBlur = 4; | |
| ctx.beginPath(); ctx.arc(p1x, p1z, 6, 0, Math.PI * 2); ctx.fill(); ctx.stroke(); | |
| ctx.beginPath(); ctx.arc(p2x, p2z, 6, 0, Math.PI * 2); ctx.fill(); ctx.stroke(); | |
| ctx.restore(); | |
| // 10. 頂部即時脫出狀態膠囊 Badge | |
| ctx.save(); | |
| const badgeW = 380; | |
| const badgeH = 38; | |
| const badgeX = -badgeW / 2; | |
| const badgeY = -boundH + 20; | |
| // 膠囊圓角背景 | |
| ctx.beginPath(); | |
| ctx.roundRect(badgeX, badgeY, badgeW, badgeH, 19); | |
| ctx.fillStyle = isEscapable ? 'rgba(6, 95, 70, 0.88)' : 'rgba(120, 53, 15, 0.85)'; | |
| ctx.fill(); | |
| ctx.lineWidth = 2; | |
| ctx.strokeStyle = isEscapable ? '#10b981' : '#f59e0b'; | |
| ctx.shadowColor = isEscapable ? 'rgba(16, 185, 129, 0.6)' : 'rgba(245, 158, 11, 0.4)'; | |
| ctx.shadowBlur = 10; | |
| ctx.stroke(); | |
| // 膠囊文字 | |
| ctx.fillStyle = '#ffffff'; | |
| ctx.font = 'bold 16px "PingFang TC", "Microsoft JhengHei", sans-serif'; | |
| ctx.textAlign = 'center'; | |
| ctx.textBaseline = 'middle'; | |
| ctx.shadowColor = 'rgba(0, 0, 0, 0.8)'; | |
| ctx.shadowBlur = 4; | |
| const badgeText = isEscapable | |
| ? '✨ 脫出通道已開啟！(d_RB ≤ 黃線淨距)' | |
| : '⚠️ 幾何通道受阻 (d_RB > 黃線淨距，卡死)'; | |
| ctx.fillText(badgeText, 0, badgeY + badgeH / 2); | |
| ctx.restore(); | |
| } | |
| ctx.restore(); | |
| } | |
| /** | |
| * 啟動繪圖循環 | |
| */ | |
| start() { | |
| if (this.isRunning) return; | |
| this.isRunning = true; | |
| const loop = () => { | |
| if (!this.isRunning) return; | |
| this.draw(); | |
| this.animationFrameId = requestAnimationFrame(loop); | |
| }; | |
| this.animationFrameId = requestAnimationFrame(loop); | |
| } | |
| /** | |
| * 暫停繪圖循環 (節省效能) | |
| */ | |
| stop() { | |
| this.isRunning = false; | |
| if (this.animationFrameId) { | |
| cancelAnimationFrame(this.animationFrameId); | |
| this.animationFrameId = null; | |
| } | |
| } | |
| } | |
| // 導出至全域 window | |
| window.Interactive2DSimulator = Interactive2DSimulator; | |