DS制作的SVG小球动画

马黑黑 发表于 2025-2-26 13:18

马黑黑 发表于 2025-2-26 13:18

代码

<svg id="container" width="500" height="500" style="border: 1px solid #ccc"></svg>
<div style="margin-top: 10px">
<button id="pauseBtn">暂停</button>
<button id="resumeBtn">继续</button>
</div>

<script>
const svg = document.getElementById('container');
const centerX = 250;
const centerY = 250;
const R = 200; // 大球半径
const r = 5; // 小球半径
const balls = [];
const numBalls = 50;

// 物理参数
const physics = {
boundaryDampening: 0.95,// 边界碰撞能量损失
collisionDampening: 0.98, // 小球碰撞能量损失
maxSpeed: 4,          // 最大速度限制
repelDistance: 2*r + 2 // 碰撞检测距离
};

// 动画控制变量
let isAnimating = true;
let animationFrameId = null;

// 创建大球容器
const container = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
container.setAttribute('cx', centerX);
container.setAttribute('cy', centerY);
container.setAttribute('r', R);
container.setAttribute('fill', 'none');
container.setAttribute('stroke', '#333');
svg.appendChild(container);

// 创建小球
function createBall() {
const angle = Math.random() * Math.PI * 2;
const radius = Math.random() * (R - r - 10);
const ball = document.createElementNS('http://www.w3.org/2000/svg', 'circle');

const x = centerX + Math.cos(angle) * radius;
const y = centerY + Math.sin(angle) * radius;

ball.setAttribute('cx', x);
ball.setAttribute('cy', y);
ball.setAttribute('r', r);
ball.setAttribute('fill', `hsl(${Math.random()*360}, 70%, 50%)`);

return {
   element: ball,
   x,
   y,
   vx: 0,
   vy: 0
};
}

// 初始化小球
for (let i = 0; i < numBalls; i++) {
const ball = createBall();
svg.appendChild(ball.element);

// 设置随机初始速度
const speed = 1 + Math.random() * 2;
const dir = Math.random() * Math.PI * 2;
ball.vx = Math.cos(dir) * speed;
ball.vy = Math.sin(dir) * speed;

balls.push(ball);
}

// 碰撞响应函数
function handleCollision(b1, b2) {
// 计算相对位置
const dx = b2.x - b1.x;
const dy = b2.y - b1.y;
const distance = Math.sqrt(dx*dx + dy*dy);

// 碰撞法线方向
const nx = dx / distance;
const ny = dy / distance;

// 相对速度
const relativeVelocity = {
   x: b1.vx - b2.vx,
   y: b1.vy - b2.vy
};

// 速度沿法线方向的分量
const speedAlongNormal = relativeVelocity.x * nx + relativeVelocity.y * ny;

// 确保小球正在接近（避免重复处理）
if (speedAlongNormal > 0) return;

// 弹性系数
const e = physics.collisionDampening;

// 冲量计算
const impulse = -(1 + e) * speedAlongNormal / (1/1 + 1/1); // 质量都为1

// 应用冲量
b1.vx -= impulse * nx;
b1.vy -= impulse * ny;
b2.vx += impulse * nx;
b2.vy += impulse * ny;

// 位置修正（防止重叠）
const penetration = 2*r - distance;
const correction = penetration / (1/1 + 1/1) * 0.8;
b1.x -= nx * correction;
b1.y -= ny * correction;
b2.x += nx * correction;
b2.y += ny * correction;
}

// 边界碰撞检测
function checkBoundary(ball) {
const dx = ball.x - centerX;
const dy = ball.y - centerY;
const distance = Math.sqrt(dx*dx + dy*dy);
const maxDistance = R - r;

if (distance > maxDistance) {
   const nx = dx / distance;
   const ny = dy / distance;

   // 位置修正
   ball.x = centerX + nx * maxDistance;
   ball.y = centerY + ny * maxDistance;

   // 速度反射
   const dot = ball.vx * nx + ball.vy * ny;
   ball.vx = (ball.vx - 2 * dot * nx) * physics.boundaryDampening;
   ball.vy = (ball.vy - 2 * dot * ny) * physics.boundaryDampening;
}
}

// 速度限制
function clampSpeed(ball) {
const speed = Math.sqrt(ball.vx*ball.vx + ball.vy*ball.vy);
if (speed > physics.maxSpeed) {
   ball.vx = ball.vx / speed * physics.maxSpeed;
   ball.vy = ball.vy / speed * physics.maxSpeed;
}
}

// 动画循环
function animate() {
// 更新位置
balls.forEach(ball => {
   ball.x += ball.vx;
   ball.y += ball.vy;
});

// 检测小球碰撞（双重循环优化版）
for (let i = 0; i < balls.length; i++) {
   const b1 = balls;

   // 先检测边界碰撞
   checkBoundary(b1);

   // 检测与其他小球的碰撞
   for (let j = i + 1; j < balls.length; j++) {
         const b2 = balls;

         // 快速距离平方检测
         const dx = b2.x - b1.x;
         const dy = b2.y - b1.y;
         const distSq = dx*dx + dy*dy;

         if (distSq < physics.repelDistance*physics.repelDistance) {
            handleCollision(b1, b2);
         }
   }

   // 限制最大速度
   clampSpeed(b1);

   // 更新显示
   balls.forEach(b => {
         b.element.setAttribute('cx', b.x);
         b.element.setAttribute('cy', b.y);
   });
}

// 条件请求动画帧
if (isAnimating) {
   animationFrameId = requestAnimationFrame(animate);
}
}

// 初始化启动动画
animate();

// 添加控制事件监听
document.getElementById('pauseBtn').addEventListener('click', () => {
isAnimating = false;
cancelAnimationFrame(animationFrameId); // 立即停止当前帧
});

document.getElementById('resumeBtn').addEventListener('click', () => {
if (!isAnimating) {
   isAnimating = true;
   animate(); // 重新启动动画循环
}
});
</script>

马黑黑 发表于 2025-2-26 13:22

第 159 行，在论坛发布时，原始代码需要写成：

const b1 = balls[ i ];

不然会被论坛相关程序写成：

const b1 = balls<i>;

浏览器会报错，脚本不能运行。

马黑黑 发表于 2025-2-26 13:30

这组代码，我一问二追问再整合而得，实际上如果设计好问题、一次性给出完整任务，DeepSeek会一次性给出答案。

一问：用svg生成50个小球，让它们在一个大球里移动，不能跑出来

   DS思考后生成的代码立马可以在线运行。它在分析过程中提到了小球彼此间碰撞问题，说用户没有问道所以忽略了。于是我追问：

二问：处理小球碰撞问题

   DS很快给出答案，也能在线运行。

三问：加入暂停、继续机制

   这回DS给出的代码有点偷懒，只给改变和添加的部分，需要讲两组代码（二问和三问所得的代码）整合一下，然后就得出二楼的代码和一楼的效果。

梦江南 发表于 2025-2-26 16:44

老师又出新作！辛苦了！{:4_190:}

花飞飞 发表于 2025-2-26 18:36

高手和高手的碰撞，一个会问，一个会答。。。{:4_173:}产生的作品完美。。

花飞飞 发表于 2025-2-26 18:41

二楼的说明是白老师自己优化组合之后加上的吧。。。{:4_173:}小白最需要了。。
这DS给的代码体量足够。。二百多行
感觉之前老师自己写的小球运动的并没有这么多。。

花飞飞 发表于 2025-2-26 18:47

粒子之间互相碰撞并不反方向运行，而是擦肩，继续向前。。对方向的影响不大。。
跑得速度有点快。看着还有白色的残影。。
颜色漂亮，花花绿绿跟糖果似的

红影发表于 2025-2-26 19:15

记得黑黑说过可以让DS写代码，这个就是实例了呢。DS强大，黑黑能把它给的代码重新加工并能使用到论坛中，这个也需要本事呢{:4_199:}

红影发表于 2025-2-26 19:16

这个代码够长的，DS没遵守最简洁的潜规则啊，只是按需求给答案呢{:4_173:}

红影发表于 2025-2-26 19:17

让代码组成的软件去写代码，这感觉很奇妙{:4_173:}

马黑黑 发表于 2025-2-26 19:25

红影发表于 2025-2-26 19:17
让代码组成的软件去写代码，这感觉很奇妙

是不是啊？

上海有一个AI搜索，如果用户的搜索量不太高（一天100次），完全可以用它来做搜索引擎，叫秘塔AI搜索，网址 https://metaso.cn/，去年上线。它也可以写代码，现在还引入了DeepSeek。要它写代码和做网络搜索一样都占日次数。

此外，阿里的通义千问可能更强大，性能和速度有保障。目前我还不太了解它是否收费，也没有深入试用过，检测性的试用感觉良好。

几乎所有的AI可能都应该注册，秘塔可以用微信注册，通义都可以用支付宝和淘宝注册。

马黑黑 发表于 2025-2-26 19:26

红影发表于 2025-2-26 19:16
这个代码够长的，DS没遵守最简洁的潜规则啊，只是按需求给答案呢

这可能也是必须的吧，毕竟功能太多

马黑黑 发表于 2025-2-26 19:27

红影发表于 2025-2-26 19:15
记得黑黑说过可以让DS写代码，这个就是实例了呢。DS强大，黑黑能把它给的代码重新加工并能使用到论坛中，这 ...

不懂代码的或不太懂代码的，也完全可以通过DS做APP或网页之类的

马黑黑 发表于 2025-2-26 19:27

梦江南发表于 2025-2-26 16:44
老师又出新作！辛苦了！

这是人工智能生成的代码

马黑黑 发表于 2025-2-26 19:29

花飞飞发表于 2025-2-26 18:47
粒子之间互相碰撞并不反方向运行，而是擦肩，继续向前。。对方向的影响不大。。
跑得速度有点快。看着还有 ...

整个原理和我们之前做的差不多，差别是它考虑的更多。比如方向，它是根据碰撞角度改变方向的。至于残影，那可能是你的显示设备（显卡和显示器分辨率、刷新率）达不到要求造成的，理论上应该非常流畅。

马黑黑 发表于 2025-2-26 19:30

花飞飞发表于 2025-2-26 18:41
二楼的说明是白老师自己优化组合之后加上的吧。。。小白最需要了。。
这DS给的代码体量足够。。 ...

它的功能更齐全，所以代码量会大一些

马黑黑 发表于 2025-2-26 19:30

花飞飞发表于 2025-2-26 18:36
高手和高手的碰撞，一个会问，一个会答。。。产生的作品完美。。

果酱果酱

红影发表于 2025-2-26 22:32

马黑黑发表于 2025-2-26 19:25
是不是啊？

上海有一个AI搜索，如果用户的搜索量不太高（一天100次），完全可以用它来做搜索引擎，叫 ...

现在这么多的好软件啊，谢谢黑黑推荐{:4_187:}

红影发表于 2025-2-26 22:34

马黑黑发表于 2025-2-26 19:26
这可能也是必须的吧，毕竟功能太多

对它来说可能还感觉不长，我们跟着黑黑玩的都是最最简洁的，才感觉它长{:4_173:}

页: [1] 2 3 4

花潮论坛's Archiver

DS制作的SVG小球动画