diff --git a/main.js b/main.js index b2c7d36..21bc55c 100644 --- a/main.js +++ b/main.js @@ -22,18 +22,18 @@ const offsetY = 0 // 准备一千个小圆点作为粒子 const particles = [] -const particleCount = 1000 +const particleCount = 100 // 生成粒子 for (let i = 0; i < particleCount; i++) { const quality = Math.random() * 0.5 + 0.5 particles.push({ - x: Math.random() * width, // 粒子的位置 - y: Math.random() * height, // 粒子的位置 - vx: Math.random() * 10 - 5, // 粒子的速度 - vy: Math.random() * 10 - 5, // 粒子的速度 - radius: Math.random() * 1 + 1, // 粒子的大小 - quality, // 粒子的质量 + x: Math.random() * width, // 粒子的位置 + y: Math.random() * height, // 粒子的位置 + vx: 0, // 粒子的速度 + vy: 0, // 粒子的速度 + radius: Math.random() * 1 + 1, // 粒子的大小 + quality, // 粒子的质量 color: `rgb(${Math.floor(255 * (1 - quality))}, ${Math.floor(255 * (1 - quality))}, ${Math.floor(255 * (1 - quality))})` // 粒子的颜色(质量越大,颜色越深) }) } @@ -51,53 +51,35 @@ function drawParticles () { // 将粒子的位置更新到下一帧 function updateParticles () { - // 1. 是每个粒子与其他粒子都有引力 - // 2. 粒子距离越近,引力越大, 距离越远,引力越小 - // 3. 粒子的引力是一个向量,方向是粒子与其他粒子的连线方向,大小是粒子与其他粒子的距离 - // 4. 粒子的速度是一个向量,方向是粒子的引力方向,大小是粒子的引力大小 - // 5. 粒子的位置是一个向量,方向是粒子的速度方向,大小是粒子的速度大小 - // 6. 粒子的速度大小是一个常数,比如 0.1 - // 7. 粒子的速度方向是一个随机值,比如 0 ~ 2π - - // 粒子的运动 for (let i = 0; i < particleCount; i++) { const particle = particles[i] - - // 基本的运动 - particle.x += particle.vx - particle.y += particle.vy - //// 粒子的引力 - //const force = { - // x: 0, - // y: 0 - //} - //// 粒子与其他粒子的引力 - //for (let j = 0; j < particleCount; j++) { - // if (i === j) { - // continue - // } - // const other = particles[j] - // const dx = other.x - particle.x - // const dy = other.y - particle.y - // const distance = Math.sqrt(dx * dx + dy * dy) - // const forceSize = 0.1 * particle.radius * other.radius / distance / distance - // force.x += forceSize * dx / distance - // force.y += forceSize * dy / distance - //} - //// 粒子与中心点的引力 - //const dx = centerX - particle.x - //const dy = centerY - particle.y - //const distance = Math.sqrt(dx * dx + dy * dy) - //const forceSize = 0.1 * particle.radius * 10 / distance / distance - //force.x += forceSize * dx / distance - //force.y += forceSize * dy / distance - //// 粒子的速度 - //particle.vx += force.x - //particle.vy += force.y - //// 粒子的位置 - //particle.x += particle.vx - //particle.y += particle.vy + particle.vx = 0 + particle.vy = 0 + + // 粒子与其他每个粒子在坐标轴上的距离, 最近距离引力为1, 距离每增加1则引力减少1/2 + for (let j = 0; j < particleCount; j++) { + if (i === j) { + continue + } + const other = particles[j] // 其他粒子 + const dx = particle.x - other.x // 粒子与其他粒子在x轴上的距离 + const dy = particle.y - other.y // 粒子与其他粒子在y轴上的距离 + const distance = Math.sqrt(dx * dx + dy * dy) // 粒子与其他粒子在坐标轴上的距离 + const forceValue = 1 / (distance * distance) // 粒子与其他粒子的引力 + const forceAngle = Math.atan2(dy, dx) // 粒子与其他粒子的引力角度 + particle.vx += forceValue * Math.cos(forceAngle) // 粒子在x轴上的速度 + particle.vy += forceValue * Math.sin(forceAngle) // 粒子在y轴上的速度 + } + + // 模拟引力 + particle.x += particle.vx * 1000 + particle.y += particle.vy * 1000 + + // 只打印第一个粒子的速度 + if (i === 0) { + console.log(particle.vx, particle.vy) + } } }