119 lines
3.6 KiB
JavaScript
119 lines
3.6 KiB
JavaScript
// 清理默认样式
|
|
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()
|