扩散

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,           // 粒子的位置
+    x: Math.random() * width,      // 粒子的位置
-    y: Math.random() * height,          // 粒子的位置
+    y: Math.random() * height,     // 粒子的位置
-    vx: Math.random() * 10 - 5,         // 粒子的速度
+    vx: 0,                         // 粒子的速度
-    vy: Math.random() * 10 - 5,         // 粒子的速度
+    vy: 0,                         // 粒子的速度
-    radius: Math.random() * 1 + 1,      // 粒子的大小
+    radius: Math.random() * 1 + 1, // 粒子的大小
-    quality, // 粒子的质量
+    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
 
-    //// 粒子的引力
+    particle.vx = 0
-    //const force = {
+    particle.vy = 0
-    //  x: 0,
+
-    //  y: 0
+    // 粒子与其他每个粒子在坐标轴上的距离, 最近距离引力为1, 距离每增加1则引力减少1/2
-    //}
+    for (let j = 0; j < particleCount; j++) {
-    //// 粒子与其他粒子的引力
+      if (i === j) {
-    //for (let j = 0; j < particleCount; j++) {
+        continue
-    //  if (i === j) {
+      }
-    //    continue
+      const other = particles[j]                       // 其他粒子
-    //  }
+      const dx = particle.x - other.x                  // 粒子与其他粒子在x轴上的距离
-    //  const other = particles[j]
+      const dy = particle.y - other.y                  // 粒子与其他粒子在y轴上的距离
-    //  const dx = other.x - particle.x
+      const distance = Math.sqrt(dx * dx + dy * dy)    // 粒子与其他粒子在坐标轴上的距离
-    //  const dy = other.y - particle.y
+      const forceValue = 1 / (distance * distance)     // 粒子与其他粒子的引力
-    //  const distance = Math.sqrt(dx * dx + dy * dy)
+      const forceAngle = Math.atan2(dy, dx)            // 粒子与其他粒子的引力角度
-    //  const forceSize = 0.1 * particle.radius * other.radius / distance / distance
+      particle.vx += forceValue * Math.cos(forceAngle) // 粒子在x轴上的速度
-    //  force.x += forceSize * dx / distance
+      particle.vy += forceValue * Math.sin(forceAngle) // 粒子在y轴上的速度
-    //  force.y += forceSize * dy / distance
+    }
-    //}
+
-    //// 粒子与中心点的引力
+    // 模拟引力
-    //const dx = centerX - particle.x
+    particle.x += particle.vx * 1000
-    //const dy = centerY - particle.y
+    particle.y += particle.vy * 1000
-    //const distance = Math.sqrt(dx * dx + dy * dy)
+
-    //const forceSize = 0.1 * particle.radius * 10 / distance / distance
+    // 只打印第一个粒子的速度
-    //force.x += forceSize * dx / distance
+    if (i === 0) {
-    //force.y += forceSize * dy / distance
+      console.log(particle.vx, particle.vy)
-    //// 粒子的速度
+    }
-    //particle.vx += force.x
-    //particle.vy += force.y
-    //// 粒子的位置
-    //particle.x += particle.vx
-    //particle.y += particle.vy
   }
 }