能量空间物质相互转化途径(能量与空间转换相对论公式)
ztj100 2025-07-09 00:28 2 浏览 0 评论
代码实现
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>几何统一理论 - 增强标注版</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #0f0c29, #1a1a40, #0d0d26);
color: #e0e0ff;
min-height: 100vh;
overflow-x: hidden;
padding: 20px;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
header {
text-align: center;
padding: 20px 0;
margin-bottom: 30px;
border-bottom: 2px solid rgba(100, 150, 255, 0.4);
position: relative;
}
h1 {
font-size: 3.2rem;
margin-bottom: 15px;
background: linear-gradient(90deg, #ff7eee, #7ebcff, #4dffea);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 20px rgba(126, 188, 255, 0.4);
letter-spacing: 1px;
}
.subtitle {
font-size: 1.4rem;
margin-top: 15px;
max-width: 800px;
margin: 15px auto 0;
color: #a0c4ff;
}
.content {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin-bottom: 40px;
}
.canvas-container {
flex: 1;
min-width: 300px;
background: rgba(10, 15, 35, 0.6);
border-radius: 20px;
padding: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
border: 2px solid rgba(100, 150, 255, 0.3);
position: relative;
overflow: hidden;
}
.controls {
width: 350px;
background: rgba(15, 20, 45, 0.85);
border-radius: 20px;
padding: 25px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
border: 2px solid rgba(100, 150, 255, 0.3);
}
canvas {
background: #0a0f20;
border-radius: 15px;
width: 100%;
height: 500px;
display: block;
}
.panel-title {
font-size: 1.6rem;
margin-bottom: 25px;
color: #7ebcff;
text-align: center;
padding-bottom: 15px;
border-bottom: 2px solid rgba(100, 150, 255, 0.3);
}
.control-group {
margin-bottom: 30px;
padding: 15px;
background: rgba(20, 25, 60, 0.4);
border-radius: 12px;
}
.control-label {
display: flex;
justify-content: space-between;
margin-bottom: 12px;
font-size: 1.1rem;
align-items: center;
}
.icon {
font-size: 1.3rem;
margin-right: 10px;
}
.slider-container {
margin: 15px 0;
}
input[type="range"] {
width: 100%;
height: 10px;
background: linear-gradient(90deg, #1e1b4b, #7ebcff);
border-radius: 5px;
outline: none;
-webkit-appearance: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 24px;
height: 24px;
border-radius: 50%;
background: #ff7eee;
cursor: pointer;
box-shadow: 0 0 15px rgba(255, 126, 238, 0.8);
border: 2px solid white;
}
.value-display {
font-size: 1rem;
text-align: center;
margin-top: 10px;
color: #7ebcff;
font-style: italic;
}
.button-group {
display: flex;
gap: 15px;
margin-top: 20px;
flex-wrap: wrap;
}
button {
flex: 1;
min-width: 120px;
padding: 12px;
border: none;
border-radius: 8px;
background: linear-gradient(90deg, #1e1b4b, #5e60ce);
color: white;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
button:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(126, 188, 255, 0.5);
}
button:active {
transform: translateY(1px);
}
.reset-btn {
background: linear-gradient(90deg, #63302b, #e63946);
}
.theory-explanation {
margin-top: 40px;
background: rgba(10, 15, 35, 0.7);
border-radius: 20px;
padding: 30px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
border: 2px solid rgba(100, 150, 255, 0.3);
}
.theory-explanation h2 {
color: #7ebcff;
margin-bottom: 25px;
text-align: center;
font-size: 2rem;
}
.theory-points {
display: flex;
flex-wrap: wrap;
gap: 25px;
margin-top: 20px;
}
.point {
flex: 1;
min-width: 250px;
background: rgba(20, 30, 60, 0.7);
padding: 20px;
border-radius: 15px;
border-left: 4px solid #ff7eee;
transition: transform 0.3s ease;
}
.point:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(126, 188, 255, 0.2);
}
.point h3 {
color: #ff7eee;
margin-bottom: 15px;
font-size: 1.3rem;
display: flex;
align-items: center;
gap: 10px;
}
.formula {
font-family: 'Cambria', serif;
font-style: italic;
text-align: center;
margin: 20px 0;
padding: 15px;
background: rgba(0, 0, 0, 0.3);
border-radius: 10px;
border: 2px solid rgba(100, 150, 255, 0.2);
font-size: 1.3rem;
color: #a0c4ff;
}
footer {
text-align: center;
margin-top: 50px;
padding: 25px;
font-size: 1rem;
opacity: 0.8;
border-top: 2px solid rgba(100, 150, 255, 0.3);
color: #a0c4ff;
}
@media (max-width: 768px) {
.content {
flex-direction: column;
}
.controls {
width: 100%;
}
h1 {
font-size: 2.4rem;
}
}
.legend {
position: absolute;
top: 20px;
right: 20px;
background: rgba(15, 20, 45, 0.85);
padding: 15px;
border-radius: 10px;
border: 2px solid rgba(100, 150, 255, 0.3);
z-index: 10;
}
.legend-item {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.legend-color {
width: 20px;
height: 20px;
border-radius: 50%;
margin-right: 10px;
}
.energy-color { background: #ff3860; }
.space-color { background: #4d8aff; }
.matter-color { background: #b967ff; }
.generator-color { background: #ffffff; }
.connection-color { background: #ffd166; }
</style>
</head>
<body>
<div class="container">
<header>
<h1>几何统一理论可视化模拟器</h1>
<p class="subtitle">清晰标注版:直观展示能量、空间与物质的几何本质及其相互转化关系</p>
</header>
<div class="content">
<div class="canvas-container">
<h2 class="panel-title">宇宙几何画布(元素标注版)</h2>
<div class="legend">
<h3>图例说明</h3>
<div class="legend-item">
<div class="legend-color generator-color"></div>
<span>几何生成元 (G)</span>
</div>
<div class="legend-item">
<div class="legend-color connection-color"></div>
<span>代谢联络 (Γ)</span>
</div>
<div class="legend-item">
<div class="legend-color energy-color"></div>
<span>能量 (E)</span>
</div>
<div class="legend-item">
<div class="legend-color space-color"></div>
<span>空间 (S)</span>
</div>
<div class="legend-item">
<div class="legend-color matter-color"></div>
<span>物质 (M)</span>
</div>
</div>
<canvas id="universeCanvas"></canvas>
</div>
<div class="controls">
<h2 class="panel-title">理论控制面板</h2>
<div class="control-group">
<div class="control-label">
<span><span class="icon">ω</span>几何势 (ω)</span>
<span id="omega-value">0.75</span>
</div>
<div class="slider-container">
<input type="range" id="omega-slider" min="0" max="100" value="75">
</div>
<div class="value-display">控制宇宙基本结构强度</div>
</div>
<div class="control-group">
<div class="control-label">
<span><span class="icon">v</span>速度 (v/c)</span>
<span id="velocity-value">0.25</span>
</div>
<div class="slider-container">
<input type="range" id="velocity-slider" min="0" max="100" value="25">
</div>
<div class="value-display">当 v → 0 时,能量冻结为空间</div>
</div>
<div class="control-group">
<div class="control-label">
<span><span class="icon">R</span>曲率 (R)</span>
<span id="curvature-value">0.5</span>
</div>
<div class="slider-container">
<input type="range" id="curvature-slider" min="0" max="100" value="50">
</div>
<div class="value-display">曲率振荡表现为能量,零曲率形成空间</div>
</div>
<div class="control-group">
<div class="control-label">
<span><span class="icon">M</span>物质拓扑荷 (n)</span>
<span id="topology-value">3</span>
</div>
<div class="slider-container">
<input type="range" id="topology-slider" min="1" max="8" value="3">
</div>
<div class="value-display">M = n · h/c (n ∈ Z)</div>
</div>
<div class="button-group">
<button id="quantum-fluctuation">
<span class="icon"></span>量子涨落
</button>
<button id="double-slit">
<span class="icon"></span>双缝干涉
</button>
<button class="reset-btn" id="reset-btn">
<span class="icon"></span>重置模拟
</button>
</div>
</div>
</div>
<div class="theory-explanation">
<h2>几何统一理论核心概念</h2>
<div class="formula">G = e<sup>v</sup> · Γ = E ⊕ S ⊕ M</div>
<div class="theory-points">
<div class="point">
<h3><span class="icon"></span>几何本体定律</h3>
<p>宇宙的基本实体是几何势 ω,其微分产生代谢联络 Γ = dω</p>
<div class="formula">Γ = dω</div>
<p>Γ 决定了时空的几何结构,类比电磁理论中 F = dA</p>
</div>
<div class="point">
<h3><span class="icon"></span>存在形式定律</h3>
<p>万物是几何的三种表现形式:</p>
<ul>
<li>能量 ε = 1/2 R (曲率振荡)</li>
<li>空间 S = lim<sub>R→0</sub>Γ (零曲率冻结)</li>
<li>物质 M = (1/4π)∮<sub>V</sub>Γ (联络的拓扑荷)</li>
</ul>
</div>
<div class="point">
<h3><span class="icon"></span>动力学演化定律</h3>
<div class="formula">d(ε, S, M) = -κΓ</div>
<p>能量、空间、物质的演化由几何联络 Γ 驱动,其中 d 是外微分算子,κ 是霍奇对偶算子。</p>
</div>
</div>
</div>
<footer>
<p>几何统一理论宇宙模拟器 (c) 2023 | 万物皆几何:能量、空间、物质统一于几何本质</p>
<p>可视化标注版 - 清晰展示核心元素及其相互关系</p>
</footer>
</div>
<script>
// 获取Canvas元素和上下文
const canvas = document.getElementById('universeCanvas');
const ctx = canvas.getContext('2d');
// 设置Canvas大小
function resizeCanvas() {
canvas.width = canvas.parentElement.clientWidth - 40;
canvas.height = 500;
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
// 模拟状态
let simulationState = {
omega: 0.75,
velocity: 0.25,
curvature: 0.5,
topology: 3,
quantumFluctuation: false,
doubleSlit: false,
time: 0
};
// 初始化控制元素
const omegaSlider = document.getElementById('omega-slider');
const velocitySlider = document.getElementById('velocity-slider');
const curvatureSlider = document.getElementById('curvature-slider');
const topologySlider = document.getElementById('topology-slider');
const omegaValue = document.getElementById('omega-value');
const velocityValue = document.getElementById('velocity-value');
const curvatureValue = document.getElementById('curvature-value');
const topologyValue = document.getElementById('topology-value');
const quantumBtn = document.getElementById('quantum-fluctuation');
const doubleSlitBtn = document.getElementById('double-slit');
const resetBtn = document.getElementById('reset-btn');
// 更新状态函数
function updateState() {
simulationState.omega = omegaSlider.value / 100;
simulationState.velocity = velocitySlider.value / 100;
simulationState.curvature = curvatureSlider.value / 100;
simulationState.topology = parseInt(topologySlider.value);
omegaValue.textContent = simulationState.omega.toFixed(2);
velocityValue.textContent = simulationState.velocity.toFixed(2);
curvatureValue.textContent = simulationState.curvature.toFixed(2);
topologyValue.textContent = simulationState.topology;
}
// 事件监听器
omegaSlider.addEventListener('input', updateState);
velocitySlider.addEventListener('input', updateState);
curvatureSlider.addEventListener('input', updateState);
topologySlider.addEventListener('input', updateState);
quantumBtn.addEventListener('click', () => {
simulationState.quantumFluctuation = !simulationState.quantumFluctuation;
quantumBtn.innerHTML = simulationState.quantumFluctuation ?
'<span class="icon"></span>量子涨落(开)' : '<span class="icon"></span>量子涨落(关)';
});
doubleSlitBtn.addEventListener('click', () => {
simulationState.doubleSlit = !simulationState.doubleSlit;
doubleSlitBtn.innerHTML = simulationState.doubleSlit ?
'<span class="icon"></span>双缝干涉(开)' : '<span class="icon"></span>双缝干涉(关)';
});
resetBtn.addEventListener('click', () => {
omegaSlider.value = 75;
velocitySlider.value = 25;
curvatureSlider.value = 50;
topologySlider.value = 3;
simulationState.quantumFluctuation = false;
simulationState.doubleSlit = false;
quantumBtn.innerHTML = '<span class="icon"></span>量子涨落';
doubleSlitBtn.innerHTML = '<span class="icon"></span>双缝干涉';
updateState();
});
// 初始更新状态
updateState();
// 绘制函数
function draw() {
// 清除画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 更新模拟时间
simulationState.time += 0.02;
// 绘制几何势背景
drawGeometricPotential();
// 绘制几何生成元 (中心涡旋)
drawGenerator();
// 绘制联络曲线网络
drawConnectionNetwork();
// 根据速度绘制能量或空间
if (simulationState.velocity > 0.1) {
drawEnergyWaves();
} else {
drawSpaceGrid();
}
// 绘制物质拓扑纽结
drawTopologicalKnots();
// 绘制双缝干涉效果
if (simulationState.doubleSlit) {
drawDoubleSlit();
}
// 请求下一帧
requestAnimationFrame(draw);
}
// 绘制几何势背景
function drawGeometricPotential() {
const gradient = ctx.createRadialGradient(
canvas.width/2, canvas.height/2, 0,
canvas.width/2, canvas.height/2, canvas.width/2
);
gradient.addColorStop(0, `rgba(100, 70, 200, ${0.2 + simulationState.omega * 0.3})`);
gradient.addColorStop(0.7, `rgba(50, 30, 100, ${0.1 + simulationState.omega * 0.2})`);
gradient.addColorStop(1, 'rgba(10, 15, 35, 0.8)');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 添加背景标签
ctx.fillStyle = 'rgba(180, 180, 255, 0.2)';
ctx.font = 'italic 24px Arial';
ctx.textAlign = 'center';
ctx.fillText('几何势 ω', canvas.width/2, canvas.height/2);
}
// 绘制几何生成元(中心涡旋)
function drawGenerator() {
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const baseRadius = 40 + simulationState.curvature * 30;
const pulse = Math.sin(simulationState.time) * 10;
const radius = baseRadius + pulse;
// 涡旋主体
const gradient = ctx.createRadialGradient(
centerX, centerY, radius * 0.3,
centerX, centerY, radius
);
gradient.addColorStop(0, 'rgba(255, 255, 255, 0.9)');
gradient.addColorStop(0.6, 'rgba(200, 150, 255, 0.6)');
gradient.addColorStop(1, 'rgba(100, 70, 200, 0.3)');
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
ctx.fillStyle = gradient;
ctx.fill();
// 涡旋细节 - 螺旋
ctx.strokeStyle = 'rgba(255, 220, 255, 0.7)';
ctx.lineWidth = 2;
ctx.beginPath();
for (let i = 0; i < 5; i++) {
const startAngle = simulationState.time + i * Math.PI * 0.4;
ctx.arc(centerX, centerY, radius * 0.7, startAngle, startAngle + Math.PI * 1.8);
}
ctx.stroke();
// 绘制标签
ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
ctx.font = 'bold 20px Arial';
ctx.textAlign = 'center';
ctx.fillText('几何生成元 G', centerX, centerY + 6);
// 添加公式标签
ctx.fillStyle = 'rgba(200, 220, 255, 0.8)';
ctx.font = 'italic 16px Arial';
ctx.fillText('G = e · Γ', centerX, centerY + 40);
}
// 绘制联络曲线网络
function drawConnectionNetwork() {
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const density = 15 + simulationState.omega * 10;
const lineCount = 20 + simulationState.omega * 20;
const fluctuation = simulationState.quantumFluctuation ? 3 : 0;
ctx.strokeStyle = `rgba(255, 200, 100, ${0.3 + simulationState.omega * 0.3})`;
ctx.lineWidth = 1.5;
for (let i = 0; i < lineCount; i++) {
const angle = (i / lineCount) * Math.PI * 2;
const length = 150 + Math.sin(simulationState.time + i) * 30;
const endX = centerX + Math.cos(angle) * length;
const endY = centerY + Math.sin(angle) * length;
// 添加量子涨落效果
const fluctuateX = Math.random() * fluctuation - fluctuation/2;
const fluctuateY = Math.random() * fluctuation - fluctuation/2;
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.bezierCurveTo(
centerX + Math.cos(angle + 0.3) * length * 0.3,
centerY + Math.sin(angle + 0.3) * length * 0.3,
centerX + Math.cos(angle - 0.3) * length * 0.6,
centerY + Math.sin(angle - 0.3) * length * 0.6,
endX + fluctuateX, endY + fluctuateY
);
ctx.stroke();
// 在曲线末端添加标签
if (i % 4 === 0) {
ctx.fillStyle = 'rgba(255, 220, 100, 0.9)';
ctx.font = 'bold 14px Arial';
ctx.textAlign = 'center';
ctx.fillText('联络 Γ', endX + fluctuateX, endY + fluctuateY - 15);
}
}
}
// 绘制能量波纹
function drawEnergyWaves() {
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const maxRadius = Math.max(canvas.width, canvas.height) * 0.8;
const amplitude = 5 + simulationState.curvature * 30;
const frequency = 0.03;
// 绘制多个同心圆波纹
for (let r = 50; r < maxRadius; r += 20) {
ctx.beginPath();
// 绘制波动圆
for (let angle = 0; angle < Math.PI * 2; angle += 0.1) {
const wave = Math.sin(angle * 8 + simulationState.time * 2) * amplitude * (r/100);
const x = centerX + Math.cos(angle) * (r + wave);
const y = centerY + Math.sin(angle) * (r + wave);
if (angle === 0) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
}
ctx.closePath();
// 设置样式
const alpha = 0.4 - (r / maxRadius) * 0.3;
ctx.strokeStyle = `rgba(255, 50, 100, ${alpha})`;
ctx.lineWidth = 2;
ctx.stroke();
}
// 添加能量标签
ctx.fillStyle = 'rgba(255, 100, 120, 0.9)';
ctx.font = 'bold 28px Arial';
ctx.textAlign = 'center';
ctx.fillText('能量 E', centerX, centerY - 100);
ctx.fillStyle = 'rgba(255, 180, 190, 0.7)';
ctx.font = 'italic 16px Arial';
ctx.fillText('ε = 1/2 R (曲率振荡)', centerX, centerY - 70);
}
// 绘制空间网格
function drawSpaceGrid() {
const gridSize = 30 - simulationState.velocity * 20;
const alpha = 0.6 - simulationState.velocity * 0.5;
const fluctuation = simulationState.quantumFluctuation ? 3 : 0;
ctx.strokeStyle = `rgba(100, 150, 255, ${alpha})`;
ctx.lineWidth = 1;
// 绘制垂直线
for (let x = 0; x < canvas.width; x += gridSize) {
ctx.beginPath();
ctx.moveTo(x, 0);
for (let y = 0; y < canvas.height; y += 5) {
const wave = Math.sin(x * 0.1 + y * 0.05 + simulationState.time) * fluctuation;
ctx.lineTo(x + wave, y);
}
ctx.stroke();
}
// 绘制水平线
for (let y = 0; y < canvas.height; y += gridSize) {
ctx.beginPath();
ctx.moveTo(0, y);
for (let x = 0; x < canvas.width; x += 5) {
const wave = Math.sin(x * 0.05 + y * 0.1 + simulationState.time) * fluctuation;
ctx.lineTo(x, y + wave);
}
ctx.stroke();
}
// 添加空间标签
ctx.fillStyle = 'rgba(100, 180, 255, 0.9)';
ctx.font = 'bold 28px Arial';
ctx.textAlign = 'center';
ctx.fillText('空间 S', canvas.width/2, canvas.height/2 - 100);
ctx.fillStyle = 'rgba(180, 210, 255, 0.7)';
ctx.font = 'italic 16px Arial';
ctx.fillText('S = lim_{R→0}Γ (零曲率冻结)', canvas.width/2, canvas.height/2 - 70);
}
// 绘制物质拓扑纽结
function drawTopologicalKnots() {
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const knots = simulationState.topology;
const size = 40 + simulationState.curvature * 20;
for (let i = 0; i < knots; i++) {
const angle = (i / knots) * Math.PI * 2 + simulationState.time * 0.5;
const distance = 150 + Math.sin(simulationState.time * 0.5 + i) * 30;
const x = centerX + Math.cos(angle) * distance;
const y = centerY + Math.sin(angle) * distance;
// 绘制拓扑纽结(环形)
ctx.beginPath();
ctx.arc(x, y, size, 0, Math.PI * 2);
const gradient = ctx.createRadialGradient(
x, y, size * 0.3,
x, y, size
);
gradient.addColorStop(0, 'rgba(200, 100, 255, 0.8)');
gradient.addColorStop(1, 'rgba(100, 50, 150, 0.3)');
ctx.fillStyle = gradient;
ctx.fill();
// 绘制纽结细节
ctx.strokeStyle = 'rgba(255, 200, 255, 0.7)';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.arc(x, y, size * 0.7, 0, Math.PI * 2);
ctx.stroke();
// 绘制纽结扭曲
ctx.beginPath();
for (let j = 0; j < 3; j++) {
const startAngle = simulationState.time + j * Math.PI * 0.7;
ctx.arc(x, y, size * 0.5, startAngle, startAngle + Math.PI);
}
ctx.stroke();
// 绘制标签
ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
ctx.font = 'bold 16px Arial';
ctx.textAlign = 'center';
ctx.fillText(`物质 M${i+1}`, x, y + size + 25);
// 添加公式标签
ctx.fillStyle = 'rgba(220, 180, 255, 0.8)';
ctx.font = 'italic 14px Arial';
ctx.fillText(`M${i+1} = ${i+1}·h/c`, x, y + size + 45);
}
// 添加总体物质标签
ctx.fillStyle = 'rgba(180, 100, 255, 0.9)';
ctx.font = 'bold 24px Arial';
ctx.textAlign = 'center';
ctx.fillText('物质 M (拓扑扭曲态)', centerX, centerY + 180);
}
// 绘制双缝干涉效果
function drawDoubleSlit() {
const centerX = canvas.width / 2;
const centerY = canvas.height * 0.8;
const width = 300;
const height = 200;
// 绘制双缝
ctx.fillStyle = 'rgba(100, 100, 150, 0.7)';
ctx.fillRect(centerX - width/2, centerY, width, 10);
// 绘制缝隙
ctx.clearRect(centerX - 30, centerY, 20, 15);
ctx.clearRect(centerX + 10, centerY, 20, 15);
// 绘制干涉条纹
ctx.strokeStyle = 'rgba(100, 200, 255, 0.6)';
ctx.lineWidth = 2;
for (let i = 0; i < 10; i++) {
const y = centerY + 30 + i * 15;
const amplitude = 50 - i * 4;
ctx.beginPath();
ctx.moveTo(centerX - 150, y);
for (let x = centerX - 150; x < centerX + 150; x += 2) {
const wave = Math.sin(x * 0.1 + simulationState.time * 3) * amplitude * (1 - i/10);
ctx.lineTo(x, y + wave);
}
ctx.stroke();
}
// 绘制标签
ctx.fillStyle = 'rgba(200, 220, 255, 0.9)';
ctx.font = 'bold 16px Arial';
ctx.textAlign = 'center';
ctx.fillText('双缝干涉实验', centerX, centerY - 20);
ctx.fillStyle = 'rgba(180, 200, 255, 0.8)';
ctx.font = 'italic 14px Arial';
ctx.fillText('观测改变几何联络 → 波函数坍缩', centerX, centerY - 45);
}
// 启动绘制循环
draw();
</script>
</body>
</html>
- 上一篇:从零开始的Flex布局掌握(flex布局实战)
- 已经是最后一篇了
相关推荐
- 能量空间物质相互转化途径(能量与空间转换相对论公式)
-
代码实现<!DOCTYPEhtml><htmllang="zh"><head>...
- 从零开始的Flex布局掌握(flex布局实战)
-
前言在现代网页设计中,布局是一个至关重要的环节,在过去的一段时间里,页面的布局还都是通过table...
- flex布局在css中的使用,一看就会!
-
1.认识flex布局我们在写前端页面的时候可能会遇到这样的问题:同样的一个页面在1920x1080的大屏幕中显示正常,但是在1366x768的小屏幕中却显示的非常凌乱。...
- 前端入门——弹性布局(Flex)(web前端弹性布局)
-
前言在css3Flex技术出现之前制作网页大多使用浮动(float)、定位(position)以及显示(display)来布局页面,随着互联网快速发展,移动互联网的到来,已无法满足需求,它对于那些...
- CSS Flex 容器完整指南(css flex-shrink)
-
概述CSSFlexbox是现代网页布局的强大工具。本文详细介绍用于flex容器的CSS属性:...
- Centos 7 network.service 启动失败
-
执行systemctlrestartnetwork重启网络报如下错误:Jobfornetwork.servicefailedbecausethecontrolprocessex...
- CentOS7 执行systemctl start iptables 报错:...: Unit not found.
-
#CentOS7执行systemctlstartiptables报错:Failedtostartiptables.service:Unitnotfound.在CentOS7中...
- systemd入门6:journalctl的详细介绍
-
该来的总会来的,逃是逃不掉的。话不多说,man起来:manjournalctl洋洋洒洒几百字的描述,是说journalctl是用来查询systemd日志的,这些日志都是systemd-journa...
- Linux上的Systemctl命令(systemctl命令详解)
-
LinuxSystemctl是一个系统管理守护进程、工具和库的集合,用于取代SystemV、service和chkconfig命令,初始进程主要负责控制systemd系统和服务管理器。通过Syste...
- 如何使用 systemctl 管理服务(systemctl添加服务)
-
systemd是一个服务管理器,目前已经成为Linux发行版的新标准。它使管理服务器变得更加容易。了解并利用组成systemd的工具将有助于我们更好地理解它提供的便利性。systemctl的由来...
- 内蒙古2024一分一段表(文理)(内蒙古考生2020一分一段表)
-
分数位次省份...
- 2016四川高考本科分数段人数统计,看看你有多少竞争对手
-
昨天,四川高考成绩出炉,全省共220,196人上线本科,相信每个考生都查到了自己的成绩。而我们都清楚多考1分就能多赶超数百人,那你是否知道,和你的分数一样的人全省有几个人?你知道挡在你前面的有多少人?...
- 难怪最近电脑卡爆了,微软确认Win11资源管理器严重BUG
-
近期,Win11操作系统的用户普遍遭遇到了一个令人头大的问题:电脑卡顿,CPU占用率异常增高。而出现该现象的原因竟然与微软最近的一次补丁更新有关。据报道,微软已经确认,问题源于Win11资源管...
- 微软推送Win11正式版22621.1702(KB5026372)更新
-
IT之家5月10日消息,微软今天推送了最新的Win11系统更新,21H2正式版通道推送了KB5026368补丁,版本号升至22000.1936,22H2版本推送了KB50263...
- 骗子AI换脸冒充亲戚,女子转账10万元后才发现异常……
-
“今天全靠你们,不然我这被骗的10万元肯定就石沉大海了。”7月19日,家住石马河的唐女士遭遇了“AI”换脸诈骗,幸好她报警及时,民警对其转账给骗子的钱成功进行止付。当天13时许,唐女士收到一条自称是亲...
你 发表评论:
欢迎- 一周热门
- 最近发表
-
- 能量空间物质相互转化途径(能量与空间转换相对论公式)
- 从零开始的Flex布局掌握(flex布局实战)
- flex布局在css中的使用,一看就会!
- 前端入门——弹性布局(Flex)(web前端弹性布局)
- CSS Flex 容器完整指南(css flex-shrink)
- Centos 7 network.service 启动失败
- CentOS7 执行systemctl start iptables 报错:...: Unit not found.
- systemd入门6:journalctl的详细介绍
- Linux上的Systemctl命令(systemctl命令详解)
- 如何使用 systemctl 管理服务(systemctl添加服务)
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)
- vmware17pro最新密钥 (34)
- mysql单表最大数据量 (35)