distributed/main.js

// 清理默认样式
document.body.style.margin = 0
document.body.style.padding = 0
document.body.style.overflow = 'hidden'

// 创建一个画布
const canvas = document.createElement('canvas')
document.body.appendChild(canvas)

// 画布填满屏幕
const ctx = canvas.getContext('2d')
const width = canvas.width = window.innerWidth
const height = canvas.height = window.innerHeight

// 画布中心点
const centerX = width / 2
const centerY = height / 2

// 画布中心点的偏移量
const offsetX = 0
const offsetY = 0

// 准备一千个小圆点作为粒子
const particles = []
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,      // 粒子的大小
    quality, // 粒子的质量
    color: `rgb(${Math.floor(255 * (1 - quality))}, ${Math.floor(255 * (1 - quality))}, ${Math.floor(255 * (1 - quality))})` // 粒子的颜色(质量越大，颜色越深)
  })
}

// 绘制粒子
function drawParticles () {
  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.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

    //// 粒子的引力
    //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
  }
}

// 清空画布
function clear () {
  ctx.clearRect(0, 0, width, height)
}

// 绘制
function draw () {
  clear()
  drawParticles()
  updateParticles()
  requestAnimationFrame(draw)
}

// 开始绘制
draw()