Add particle quality and color
This commit is contained in:
parent
1b0a6f7ece
commit
b24665ae2f
102
main.js
102
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,
|
||||
y: Math.random() * height,
|
||||
vx: Math.random() * 10 - 5,
|
||||
vy: Math.random() * 10 - 5,
|
||||
radius: Math.random() * 1 + 1
|
||||
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 () {
|
||||
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.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
|
||||
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
|
||||
}
|
||||
|
||||
//// 粒子的引力
|
||||
//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
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -107,7 +110,6 @@ function clear () {
|
|||
function draw () {
|
||||
clear()
|
||||
drawParticles()
|
||||
drawParticlesLine()
|
||||
updateParticles()
|
||||
requestAnimationFrame(draw)
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue