法尔斯特的离心重力实验

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>法尔斯特的离心重力实验</title>
<style>
  body { margin:0; background:#0a0e14; color:#fff; font-family:sans-serif; display:flex; flex-direction:column; align-items:center; justify-content:center; height:100vh; overflow:hidden; }
  canvas { border-radius:50%; box-shadow:0 0 40px rgba(88,166,255,0.3); background:#111; }
  .controls { position:absolute; bottom:30px; display:flex; gap:20px; background:rgba(22,27,34,0.9); padding:15px 25px; border-radius:12px; border:1px solid #30363d; }
  .slider-group { display:flex; flex-direction:column; align-items:center; gap:5px; font-size:12px; color:#8b949e; }
  input[type=range] { width:120px; cursor:pointer; }
  .status { position:absolute; top:20px; font-family:monospace; color:#3fb950; font-size:14px; background:rgba(0,0,0,0.5); padding:5px 15px; border-radius:20px; }
</style>
</head>
<body>

<div class="status" id="statusText">旋转中... 离心力: -</div>
<canvas id="station" width="400" height="400"></canvas>

<div class="controls">
  <div class="slider-group">
    <span>转速 (ω)</span>
    <input type="range" id="omega" min="0" max="5" step="0.1" value="2.5">
  </div>
  <div class="slider-group">
    <span>重力要求 (r)</span>
    <input type="range" id="radius" min="50" max="180" step="1" value="150">
  </div>
</div>

<script>
const canvas = document.getElementById('station');
const ctx = canvas.getContext('2d');
const cx = canvas.width / 2;
const cy = canvas.height / 2;
const omegaSlider = document.getElementById('omega');
const radiusSlider = document.getElementById('radius');
const statusText = document.getElementById('statusText');

let angle = 0;
let catY = -140; // 猫距离圆心的初始距离（负值表示在圆心上方）

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  let omega = parseFloat(omegaSlider.value);
  let floorRadius = parseInt(radiusSlider.value);

  // 1. 绘制空间站环形地板
  ctx.beginPath();
  ctx.arc(cx, cy, floorRadius + 20, 0, Math.PI * 2);
  ctx.strokeStyle = '#30363d';
  ctx.lineWidth = 10;
  ctx.stroke();

  // 2. 绘制离心力向量（视觉辅助）
  // 假设猫在空间站内壁跑
  let catX = cx + Math.sin(angle) * floorRadius;
  let catYPos = cy - Math.cos(angle) * floorRadius;

  // 3. 计算离心力 F = m * omega^2 * r (这里简化用视觉表示)
  let centrifugalForce = omega * omega * floorRadius * 0.001;
  let forceDisplay = centrifugalForce.toFixed(2);

  // 如果离心力足够，猫贴在地板上；否则飘起来
  let catDisplayRadius = floorRadius;
  if (centrifugalForce < 0.8) {
    catDisplayRadius = floorRadius - 40 * (0.8 - centrifugalForce) / 0.8;
    statusText.innerHTML = `⚠ 离心力不足！法尔斯特飘起来了！<br>离心力: ${forceDisplay}`;
    statusText.style.color = '#f85149';
  } else {
    statusText.innerHTML = `✅ 离心力稳定。<br>离心力: ${forceDisplay}`;
    statusText.style.color = '#3fb950';
  }

  // 重新计算猫的位置
  let finalCatX = cx + Math.sin(angle) * catDisplayRadius;
  let finalCatY = cy - Math.cos(angle) * catDisplayRadius;

  // 4. 绘制法尔斯特（用一只简单的猫猫头代替）
  ctx.save();
  ctx.translate(finalCatX, finalCatY);
  ctx.rotate(angle); // 让猫跟着旋转

  // 画猫头
  ctx.beginPath();
  ctx.arc(0, 0, 10, 0, Math.PI * 2);
  ctx.fillStyle = '#f0883e'; // 橘猫色
  ctx.fill();

  // 画耳朵
  ctx.beginPath();
  ctx.moveTo(-8, -6); ctx.lineTo(-12, -16); ctx.lineTo(-2, -10);
  ctx.moveTo(8, -6); ctx.lineTo(12, -16); ctx.lineTo(2, -10);
  ctx.fillStyle = '#f0883e';
  ctx.fill();

  // 画眼睛
  ctx.fillStyle = '#000';
  ctx.beginPath(); ctx.arc(-3, -2, 1.5, 0, Math.PI*2); ctx.fill();
  ctx.beginPath(); ctx.arc(3, -2, 1.5, 0, Math.PI*2); ctx.fill();

  // 画尾巴
  ctx.beginPath();
  ctx.moveTo(0, 10);
  ctx.quadraticCurveTo(15, 15, 10, 25);
  ctx.strokeStyle = '#f0883e';
  ctx.lineWidth = 3;
  ctx.stroke();

  ctx.restore();

  // 旋转角更新
  angle += omega * 0.02;

  requestAnimationFrame(draw);
}

draw();
</script>
</body>
</html>