Hugging Face's logo

Spaces:
engerl
/
space
Running

App Files Community
space / index.html
engerl's picture
engerl
Add 2 files
25cd845 verified
raw
history blame contribute delete
24.1 kB
<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>宇宙行星球體空間扭曲現象</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <style>
 body {
 margin: 0;
 overflow: hidden;
 background-color: #000;
 cursor: grab;
 }
 body.grabbing {
 cursor: grabbing;
 }
 canvas {
 display: block;
 }
 .info-panel {
 position: absolute;
 bottom: 20px;
 left: 20px;
 background: rgba(0, 0, 0, 0.7);
 color: white;
 padding: 15px;
 border-radius: 10px;
 max-width: 300px;
 font-family: 'Arial', sans-serif;
 }
 .title {
 position: absolute;
 top: 20px;
 left: 50%;
 transform: translateX(-50%);
 color: white;
 font-size: 2rem;
 text-align: center;
 text-shadow: 0 0 10px #4f8fff;
 font-family: 'Arial', sans-serif;
 }
 .controls {
 position: absolute;
 top: 20px;
 right: 20px;
 display: flex;
 flex-direction: column;
 gap: 10px;
 }
 .control-btn {
 background: rgba(0, 0, 0, 0.7);
 color: white;
 border: 1px solid #4f8fff;
 border-radius: 5px;
 padding: 8px 12px;
 cursor: pointer;
 transition: all 0.3s;
 }
 .control-btn:hover {
 background: rgba(79, 143, 255, 0.3);
 }
 .star {
 position: absolute;
 background-color: white;
 border-radius: 50%;
 pointer-events: none;
 }
 </style>
</head>
<body>
 <div class="title">宇宙行星球體空間扭曲現象</div>
<div class="controls">
 <button id="addPlanet" class="control-btn">添加行星</button>
 <button id="reset" class="control-btn">重置模擬</button>
 <button id="toggleGravity" class="control-btn">切換引力</button>
 <button id="toggleDistortion" class="control-btn">切換扭曲效果</button>
 <button id="resetView" class="control-btn">重置視角</button>
 </div>
<div class="info-panel">
 <h3 class="text-xl font-bold mb-2 text-blue-300">空間扭曲現象</h3>
 <p class="text-sm mb-2">當大質量天體在時空中移動時，會造成周圍空間的彎曲和扭曲，這正是愛因斯坦廣義相對論所描述的現象。</p>
 <p class="text-sm">在此模擬中，行星的運動會在其周圍產生引力井效應，導致光線偏折和空間變形。</p>
 <p class="text-sm mt-2 text-blue-200">提示: 用滑鼠拖曳可以改變視角</p>
 </div>
<canvas id="spaceCanvas"></canvas>
<script>
 // 初始化畫布
 const canvas = document.getElementById('spaceCanvas');
 const ctx = canvas.getContext('2d');
// 設置畫布大小為窗口大小
 function resizeCanvas() {
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
 }
 resizeCanvas();
 window.addEventListener('resize', resizeCanvas);
// 模擬參數
 const params = {
 gravity: true,
 distortion: true,
 distortionStrength: 0.3,
 friction: 0.98,
 bounce: 0.7,
 starCount: 200
 };
// 視角控制
 const view = {
 x: 0,
 y: 0,
 scale: 1,
 isDragging: false,
 lastX: 0,
 lastY: 0
 };
// 行星類
 class Planet {
 constructor(x, y, radius, mass, color) {
 this.x = x;
 this.y = y;
 this.radius = radius;
 this.mass = mass;
 this.color = color;
 this.vx = (Math.random() - 0.5) * 5;
 this.vy = (Math.random() - 0.5) * 5;
 this.rotation = 0;
 this.rotationSpeed = (Math.random() - 0.5) * 0.02;
 this.texture = this.createTexture(radius, color);
 }
createTexture(radius, color) {
 const textureCanvas = document.createElement('canvas');
 const textureCtx = textureCanvas.getContext('2d');
 const size = radius * 2;
 textureCanvas.width = size;
 textureCanvas.height = size;
// 繪製行星紋理
 const gradient = textureCtx.createRadialGradient(
 radius, radius, 0,
 radius, radius, radius
 );
 gradient.addColorStop(0, lightenColor(color, 30));
 gradient.addColorStop(0.7, color);
 gradient.addColorStop(1, darkenColor(color, 20));
textureCtx.beginPath();
 textureCtx.arc(radius, radius, radius, 0, Math.PI * 2);
 textureCtx.fillStyle = gradient;
 textureCtx.fill();
// 添加一些隨機的斑點紋理
 for (let i = 0; i < radius / 2; i++) {
 const spotRadius = Math.random() * radius / 4;
 const spotX = Math.random() * size;
 const spotY = Math.random() * size;
// 確保斑點在行星內部
 const dist = Math.sqrt(
 Math.pow(spotX - radius, 2) +
Math.pow(spotY - radius, 2)
 );
if (dist < radius - spotRadius) {
 const spotColor = Math.random() > 0.5 ?
lightenColor(color, 15) :
darkenColor(color, 15);
textureCtx.beginPath();
 textureCtx.arc(spotX, spotY, spotRadius, 0, Math.PI * 2);
 textureCtx.fillStyle = spotColor;
 textureCtx.fill();
 }
 }
return textureCanvas;
 }
update() {
 this.x += this.vx;
 this.y += this.vy;
 this.rotation += this.rotationSpeed;
// 邊界碰撞檢測 - 現在基於原始空間而非視口
 const scaledWidth = canvas.width / view.scale;
 const scaledHeight = canvas.height / view.scale;
if (this.x - this.radius < 0) {
 this.x = this.radius;
 this.vx = -this.vx * params.bounce;
 } else if (this.x + this.radius > scaledWidth) {
 this.x = scaledWidth - this.radius;
 this.vx = -this.vx * params.bounce;
 }
if (this.y - this.radius < 0) {
 this.y = this.radius;
 this.vy = -this.vy * params.bounce;
 } else if (this.y + this.radius > scaledHeight) {
 this.y = scaledHeight - this.radius;
 this.vy = -this.vy * params.bounce;
 }
// 應用摩擦力
 this.vx *= params.friction;
 this.vy *= params.friction;
 }
draw() {
 ctx.save();
// 應用視角變換
 ctx.translate(view.x, view.y);
 ctx.scale(view.scale, view.scale);
ctx.translate(this.x, this.y);
 ctx.rotate(this.rotation);
// 繪製行星
 ctx.drawImage(
 this.texture,
-this.radius,
-this.radius,
this.radius * 2,
this.radius * 2
 );
// 繪製行星光暈
 if (params.distortion) {
 const gradient = ctx.createRadialGradient(
 0, 0, this.radius,
 0, 0, this.radius * 2
 );
 gradient.addColorStop(0, `rgba(${hexToRgb(this.color)}, 0.3)`);
 gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
ctx.beginPath();
 ctx.arc(0, 0, this.radius * 2, 0, Math.PI * 2);
 ctx.fillStyle = gradient;
 ctx.fill();
 }
ctx.restore();
 }
applyGravity(otherPlanets) {
 if (!params.gravity) return;
otherPlanets.forEach(planet => {
 if (planet !== this) {
 const dx = planet.x - this.x;
 const dy = planet.y - this.y;
 const distance = Math.sqrt(dx * dx + dy * dy);
// 避免除以零和極端力
 if (distance > 5) {
 const force = (planet.mass * this.mass) / (distance * distance) * 0.0001;
 const fx = (dx / distance) * force;
 const fy = (dy / distance) * force;
this.vx += fx / this.mass;
 this.vy += fy / this.mass;
 }
 }
 });
 }
// 獲取行星在屏幕上的位置
 getScreenPosition() {
 return {
 x: this.x * view.scale + view.x,
 y: this.y * view.scale + view.y
 };
 }
 }
// 恆星類
 class Star {
 constructor() {
 this.x = Math.random() * (canvas.width / view.scale);
 this.y = Math.random() * (canvas.height / view.scale);
 this.size = Math.random() * 3;
 this.brightness = Math.random();
 this.color = `rgba(255, 255, 255, ${this.brightness})`;
 this.speed = 0.1 + Math.random() * 0.5;
 this.direction = Math.random() * Math.PI * 2;
 }
update(planets) {
 // 恆星受行星引力影響
 if (params.gravity) {
 planets.forEach(planet => {
 const dx = planet.x - this.x;
 const dy = planet.y - this.y;
 const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < planet.radius * 3) {
 const angle = Math.atan2(dy, dx);
 const force = (planet.mass * 0.0001) / (distance * distance);
this.x -= Math.cos(angle) * force * 10;
 this.y -= Math.sin(angle) * force * 10;
 }
 });
 }
// 恆星基本運動
 this.x += Math.cos(this.direction) * this.speed;
 this.y += Math.sin(this.direction) * this.speed;
// 邊界檢查 - 現在基於原始空間而非視口
 const scaledWidth = canvas.width / view.scale;
 const scaledHeight = canvas.height / view.scale;
if (this.x < 0 || this.x > scaledWidth ||
this.y < 0 || this.y > scaledHeight) {
 this.x = Math.random() * scaledWidth;
 this.y = Math.random() * scaledHeight;
 this.direction = Math.random() * Math.PI * 2;
 }
 }
draw() {
 ctx.save();
 ctx.translate(view.x, view.y);
 ctx.scale(view.scale, view.scale);
ctx.fillStyle = this.color;
 ctx.beginPath();
 ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
 ctx.fill();
ctx.restore();
 }
 }
// 工具函數
 function lightenColor(color, percent) {
 const num = parseInt(color.replace("#", ""), 16);
 const amt = Math.round(2.55 * percent);
 const R = (num >> 16) + amt;
 const G = (num >> 8 & 0x00FF) + amt;
 const B = (num & 0x0000FF) + amt;
return `#${(
 0x1000000 +
 (R < 255 ? (R < 1 ? 0 : R) : 255) * 0x10000 +
 (G < 255 ? (G < 1 ? 0 : G) : 255) * 0x100 +
 (B < 255 ? (B < 1 ? 0 : B) : 255)
 ).toString(16).slice(1)}`;
 }
function darkenColor(color, percent) {
 const num = parseInt(color.replace("#", ""), 16);
 const amt = Math.round(2.55 * percent);
 const R = (num >> 16) - amt;
 const G = (num >> 8 & 0x00FF) - amt;
 const B = (num & 0x0000FF) - amt;
return `#${(
 0x1000000 +
 (R > 0 ? (R < 255 ? R : 255) : 0) * 0x10000 +
 (G > 0 ? (G < 255 ? G : 255) : 0) * 0x100 +
 (B > 0 ? (B < 255 ? B : 255) : 0)
 ).toString(16).slice(1)}`;
 }
function hexToRgb(hex) {
 const r = parseInt(hex.slice(1, 3), 16);
 const g = parseInt(hex.slice(3, 5), 16);
 const b = parseInt(hex.slice(5, 7), 16);
 return `${r}, ${g}, ${b}`;
 }
function getRandomPlanetColor() {
 const colors = [
 '#4A6FA5', // 藍色
 '#A54A4A', // 紅色
 '#4AA54A', // 綠色
 '#A54AA5', // 紫色
 '#A5A54A', // 黃色
 '#4AA5A5', // 青色
 '#A56F4A' // 橙色
 ];
 return colors[Math.floor(Math.random() * colors.length)];
 }
// 初始化行星和恆星
 let planets = [];
 let stars = [];
function init() {
 planets = [];
 stars = [];
// 創建一些初始行星
 for (let i = 0; i < 3; i++) {
 const radius = 20 + Math.random() * 30;
 planets.push(new Planet(
 Math.random() * (canvas.width / view.scale - radius * 2) + radius,
 Math.random() * (canvas.height / view.scale - radius * 2) + radius,
 radius,
 radius * radius * 0.1,
 getRandomPlanetColor()
 ));
 }
// 創建恆星背景
 for (let i = 0; i < params.starCount; i++) {
 stars.push(new Star());
 }
// 重置視角
 resetView();
 }
// 重置視角
 function resetView() {
 view.x = 0;
 view.y = 0;
 view.scale = 1;
 }
// 動畫循環
 function animate() {
 // 清除畫布
 ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
 ctx.fillRect(0, 0, canvas.width, canvas.height);
// 繪製扭曲網格
 if (params.distortion) {
 drawSpaceGrid();
 }
// 更新和繪製恆星
 stars.forEach(star => {
 star.update(planets);
 star.draw();
 });
// 更新和繪製行星
 planets.forEach(planet => {
 planet.applyGravity(planets);
 planet.update();
 planet.draw();
 });
requestAnimationFrame(animate);
 }
// 繪製空間網格以展示扭曲效果
 function drawSpaceGrid() {
 const gridSize = 40;
 const rows = Math.ceil(canvas.height / (gridSize * view.scale));
 const cols = Math.ceil(canvas.width / (gridSize * view.scale));
ctx.save();
 ctx.translate(view.x, view.y);
 ctx.scale(view.scale, view.scale);
ctx.strokeStyle = 'rgba(100, 150, 255, 0.2)';
 ctx.lineWidth = 1 / view.scale;
// 繪製水平線
 for (let i = 0; i < rows; i++) {
 const y = i * gridSize;
 ctx.beginPath();
for (let j = 0; j < cols; j++) {
 const x = j * gridSize;
 let newX = x;
 let newY = y;
// 應用行星引力扭曲
 planets.forEach(planet => {
 const dx = x - planet.x;
 const dy = y - planet.y;
 const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < planet.radius * 5) {
 const strength = params.distortionStrength * (planet.mass / 100) * (1 - distance / (planet.radius * 5));
 const angle = Math.atan2(dy, dx);
newX -= Math.cos(angle) * strength * 10;
 newY -= Math.sin(angle) * strength * 10;
 }
 });
if (j === 0) {
 ctx.moveTo(newX, newY);
 } else {
 ctx.lineTo(newX, newY);
 }
 }
ctx.stroke();
 }
// 繪製垂直線
 for (let j = 0; j < cols; j++) {
 const x = j * gridSize;
 ctx.beginPath();
for (let i = 0; i < rows; i++) {
 const y = i * gridSize;
 let newX = x;
 let newY = y;
// 應用行星引力扭曲
 planets.forEach(planet => {
 const dx = x - planet.x;
 const dy = y - planet.y;
 const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < planet.radius * 5) {
 const strength = params.distortionStrength * (planet.mass / 100) * (1 - distance / (planet.radius * 5));
 const angle = Math.atan2(dy, dx);
newX -= Math.cos(angle) * strength * 10;
 newY -= Math.sin(angle) * strength * 10;
 }
 });
if (i === 0) {
 ctx.moveTo(newX, newY);
 } else {
 ctx.lineTo(newX, newY);
 }
 }
ctx.stroke();
 }
ctx.restore();
 }
// 事件監聽器
 document.getElementById('addPlanet').addEventListener('click', () => {
 const radius = 20 + Math.random() * 30;
 planets.push(new Planet(
 Math.random() * (canvas.width / view.scale - radius * 2) + radius,
 Math.random() * (canvas.height / view.scale - radius * 2) + radius,
 radius,
 radius * radius * 0.1,
 getRandomPlanetColor()
 ));
 });
document.getElementById('reset').addEventListener('click', init);
document.getElementById('toggleGravity').addEventListener('click', () => {
 params.gravity = !params.gravity;
 document.getElementById('toggleGravity').textContent =
params.gravity ? '關閉引力' : '開啟引力';
 });
document.getElementById('toggleDistortion').addEventListener('click', () => {
 params.distortion = !params.distortion;
 document.getElementById('toggleDistortion').textContent =
params.distortion ? '關閉扭曲' : '開啟扭曲';
 });
document.getElementById('resetView').addEventListener('click', resetView);
// 滑鼠拖曳事件
 canvas.addEventListener('mousedown', (e) => {
 view.isDragging = true;
 view.lastX = e.clientX;
 view.lastY = e.clientY;
 document.body.classList.add('grabbing');
 });
canvas.addEventListener('mousemove', (e) => {
 if (view.isDragging) {
 const dx = e.clientX - view.lastX;
 const dy = e.clientY - view.lastY;
view.x += dx;
 view.y += dy;
view.lastX = e.clientX;
 view.lastY = e.clientY;
 }
 });
canvas.addEventListener('mouseup', () => {
 view.isDragging = false;
 document.body.classList.remove('grabbing');
 });
canvas.addEventListener('mouseleave', () => {
 view.isDragging = false;
 document.body.classList.remove('grabbing');
 });
// 滑鼠滾輪縮放
 canvas.addEventListener('wheel', (e) => {
 e.preventDefault();
// 獲取滑鼠位置相對於畫布的座標
 const mouseX = e.clientX - canvas.getBoundingClientRect().left;
 const mouseY = e.clientY - canvas.getBoundingClientRect().top;
// 計算滑鼠在原始空間中的位置
 const worldX = (mouseX - view.x) / view.scale;
 const worldY = (mouseY - view.y) / view.scale;
// 計算縮放因子
 const delta = -e.deltaY;
 const zoomFactor = delta > 0 ? 1.1 : 0.9;
// 限制縮放範圍
 const newScale = view.scale * zoomFactor;
 if (newScale > 0.1 && newScale < 5) {
 view.scale = newScale;
// 調整視圖位置以保持滑鼠下的點不變
 view.x = mouseX - worldX * view.scale;
 view.y = mouseY - worldY * view.scale;
 }
 });
// 初始化並開始動畫
 init();
 animate();
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=engerl/space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>