基于自制类弦理论的物理模拟

原创于 2025-12-17 16:49:47 发布 · 233 阅读

CC 4.0 BY-SA版权

文章标签：

基本实体：宇宙的基本实体是旋转的线段。线段属性:线段突然出现 → 逐渐缩短 → 消失。线段有颜色，颜色在拼接时色散，分配到相邻线段。线段会旋转，旋转速度与平移速度成反比，线段是局部时间的具象化：线段的存在与消失对应局部时间的产生与流逝。2. 结构假设，拼接结构：线段通过离散拼接构成网络。拼接处有节点，节点约束旋转幅度。拼接必定扭曲。引力本质：线段网络的结构体现为引力，节点处的约束与色散传递对应引力相互作用，空间生成：线段碰到空间边界会使边界向外扩散，空间由此膨胀。3. 宇宙初始条件，初始宇宙是一个球体，球内每个整数坐标点产生一条线段。线段消失后，同一位置会有新线段补充（守恒或循环）。<!DOCTYPE html>

<head>

<title>自定义引力线段模拟器</title>

<style>

body { margin: 0; display: flex; flex-direction: column; align-items: center; background: #000; color: #fff; font-family: Arial; }

#canvas { border: 2px solid #444; background: #111; }

.controls { margin: 10px 0; display: flex; gap: 10px; align-items: center; }

button { padding: 5px 15px; cursor: pointer; background: #333; color: #fff; border: 1px solid #666; }

input { width: 100px; padding: 5px; background: #222; color: #fff; border: 1px solid #666; }

</style>

</head>

<body>

</div>

const canvas = document.getElementById('canvas');

const ctx = canvas.getContext('2d');

let timeScale = 1;

let segments = [];

let polygons = [];

const MAX_SEGMENTS = 200;

const NODE_DIST = 15;

const MAX_LIFE = 100; // 线段最大生命周期

class Segment {

constructor(x, y) {

this.x = x; this.y = y;

this.len = Math.random() * 30 + 20;

this.angle = Math.random() * Math.PI * 2;

this.angleSpeed = (Math.random() - 0.5) * 0.02;

this.lenDecay = 0.01;

this.color = `hsl(${Math.random() * 360}, 80%, 50%)`;

this.nodes = [{x: this.x, y: this.y}, this.getEndPoint()];

this.life = MAX_LIFE; // 新增：生命周期

}

getEndPoint() {

return {

x: this.x + Math.cos(this.angle) * this.len,

y: this.y + Math.sin(this.angle) * this.len

};

}

update() {

this.angle += this.angleSpeed * timeScale;

this.len -= this.lenDecay * timeScale;

this.life -= 1 * timeScale; // 生命周期随时间减少

// 生命周期耗尽或长度过短则重置

if (this.life <= 0 || this.len < 5) {

this.len = Math.random() * 20 + 10;

this.life = MAX_LIFE;

this.color = `hsl(${Math.random() * 360}, 80%, 50%)`;

}

this.nodes[1] = this.getEndPoint();

// 颜色亮度随生命周期调整

const hue = parseInt(this.color.match(/hsl\((\d+)/)[1]);

const alpha = this.life / MAX_LIFE; // 透明度与生命周期正相关

this.displayColor = `hsla(${hue}, 80%, 50%, ${alpha})`;

}

draw() {

// 线段颜色使用带透明度的displayColor，不再是黑色

ctx.beginPath();

ctx.moveTo(this.nodes[0].x, this.nodes[0].y);

ctx.lineTo(this.nodes[1].x, this.nodes[1].y);

ctx.strokeStyle = this.displayColor;

ctx.lineWidth = 2;

ctx.stroke();

// 节点绘制

this.nodes.forEach(node => {

ctx.beginPath();

ctx.arc(node.x, node.y, 3, 0, Math.PI * 2);

ctx.fillStyle = `rgba(255,255,255,${this.life/MAX_LIFE})`;

ctx.fill();

});

}

function checkCollisionAndMerge() {

const nodeMap = new Map();

segments.forEach((seg, segIdx) => {

seg.nodes.forEach((node, nodeIdx) => {

const key = `${Math.round(node.x / NODE_DIST)}_${Math.round(node.y / NODE_DIST)}`;

if (!nodeMap.has(key)) nodeMap.set(key, []);

nodeMap.get(key).push({seg, node, segIdx, nodeIdx});

});

for (const [key, nodes] of nodeMap) {

if (nodes.length < 2) continue;

const vertices = nodes.map(item => item.node);

const uniqueVerts = vertices.filter((v, i) =>

vertices.findIndex(u => u.x === v.x && u.y === v.y) === i

);

if (uniqueVerts.length >= 3) {

// 多边形透明度随线段平均生命周期调整

const avgLife = nodes.reduce((sum, item) => sum + item.seg.life, 0) / nodes.length;

const polyColor = nodes[0].seg.displayColor.replace(/[^,]+(?=\))/, avgLife/MAX_LIFE);

polygons.push({ vertices: [...uniqueVerts], color: polyColor });

nodes.forEach(item => item.seg.angleSpeed *= 0.5);

}

function drawPolygons() {

polygons.forEach(poly => {

ctx.beginPath();

ctx.moveTo(poly.vertices[0].x, poly.vertices[0].y);

poly.vertices.forEach(v => ctx.lineTo(v.x, v.y));

ctx.closePath();

ctx.fillStyle = poly.color.replace('50%,', '20%,');

ctx.strokeStyle = poly.color;

ctx.lineWidth = 1;

ctx.fill();

ctx.stroke();

});

if (polygons.length > 50) polygons.shift();

}

function initSim() {

segments = [];

polygons = [];

for (let i = 0; i < MAX_SEGMENTS; i++) {

const x = Math.floor(Math.random() * (canvas.width - 40)) + 20;

const y = Math.floor(Math.random() * (canvas.height - 40)) + 20;

segments.push(new Segment(x, y));

}

function resetSim() {

initSim();

}

function animate() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

timeScale = parseFloat(document.getElementById('timeScale').value) || 1;

segments.forEach(seg => seg.update());

segments.forEach(seg => seg.draw());

checkCollisionAndMerge();

drawPolygons();

requestAnimationFrame(animate);

}

window.addEventListener('resize', () => {

canvas.width = Math.min(window.innerWidth - 40, 800);

canvas.height = Math.min(window.innerHeight - 100, 600);

});

initSim();

animate();

</script>

</body>

</html>