diff --git a/main.js b/main.js index a06801c..b2c7d36 100644 --- a/main.js +++ b/main.js @@ -26,75 +26,78 @@ const particleCount = 1000 // 生成粒子 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 + x: Math.random() * width, // 粒子的位置 + y: Math.random() * height, // 粒子的位置 + vx: Math.random() * 10 - 5, // 粒子的速度 + vy: Math.random() * 10 - 5, // 粒子的速度 + radius: Math.random() * 1 + 1, // 粒子的大小 + quality, // 粒子的质量 + color: `rgb(${Math.floor(255 * (1 - quality))}, ${Math.floor(255 * (1 - quality))}, ${Math.floor(255 * (1 - quality))})` // 粒子的颜色(质量越大,颜色越深) }) } // 绘制粒子 function drawParticles () { - ctx.fillStyle = '#ff1414' for (let i = 0; i < particleCount; i++) { const particle = particles[i] ctx.beginPath() ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2) - ctx.fill() - } -} - -// 绘制粒子的连线 -function drawParticlesLine () { - ctx.strokeStyle = '#ff1414' - for (let i = 0; i < particleCount; i++) { - const particle = particles[i] - for (let j = 0; j < particleCount; j++) { - const otherParticle = particles[j] - const dx = particle.x - otherParticle.x - const dy = particle.y - otherParticle.y - const dist = Math.sqrt(dx * dx + dy * dy) - if (dist < 100) { - ctx.beginPath() - ctx.moveTo(particle.x, particle.y) - ctx.lineTo(otherParticle.x, otherParticle.y) - ctx.stroke() - } - } - } -} - -// 粒子颜色为红色, 大小为 2px -function drawParticles2 () { - ctx.fillStyle = '#ff1414' - for (let i = 0; i < particleCount; i++) { - const particle = particles[i] - ctx.beginPath() - ctx.arc(particle.x, particle.y, 2, 0, Math.PI * 2) + ctx.fillStyle = particle.color ctx.fill() } } // 将粒子的位置更新到下一帧 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 - if (particle.x < 0) { - particle.x = width - } - if (particle.x > width) { - particle.x = 0 - } - if (particle.y < 0) { - particle.y = height - } - if (particle.y > height) { - particle.y = 0 - } + + //// 粒子的引力 + //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 } } @@ -107,7 +110,6 @@ function clear () { function draw () { clear() drawParticles() - drawParticlesLine() updateParticles() requestAnimationFrame(draw) }