Add particle quality and color

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,
+    x: Math.random() * width,           // 粒子的位置
-    y: Math.random() * height,
+    y: Math.random() * height,          // 粒子的位置
-    vx: Math.random() * 10 - 5,
+    vx: Math.random() * 10 - 5,         // 粒子的速度
-    vy: Math.random() * 10 - 5,
+    vy: Math.random() * 10 - 5,         // 粒子的速度
-    radius: Math.random() * 1 + 1
+    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()
+    ctx.fillStyle = particle.color
-  }
-}
-
-// 绘制粒子的连线
-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.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
+    //// 粒子的引力
-    }
+    //const force = {
-    if (particle.x > width) {
+    //  x: 0,
-      particle.x = 0
+    //  y: 0
-    }
+    //}
-    if (particle.y < 0) {
+    //// 粒子与其他粒子的引力
-      particle.y = height
+    //for (let j = 0; j < particleCount; j++) {
-    }
+    //  if (i === j) {
-    if (particle.y > height) {
+    //    continue
-      particle.y = 0
+    //  }
-    }
+    //  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)
 }