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++) {
  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
  })
}

// 绘制粒子
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.fill()
  }
}

// 将粒子的位置更新到下一帧
function updateParticles () {
  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
    }
  }
}

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

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

// 开始绘制
draw()