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++) {
|
for (let i = 0; i < particleCount; i++) {
|
||||||
|
const quality = Math.random() * 0.5 + 0.5
|
||||||
particles.push({
|
particles.push({
|
||||||
x: Math.random() * width,
|
x: Math.random() * width, // 粒子的位置
|
||||||
y: Math.random() * height,
|
y: Math.random() * height, // 粒子的位置
|
||||||
vx: Math.random() * 10 - 5,
|
vx: Math.random() * 10 - 5, // 粒子的速度
|
||||||
vy: Math.random() * 10 - 5,
|
vy: Math.random() * 10 - 5, // 粒子的速度
|
||||||
radius: Math.random() * 1 + 1
|
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 () {
|
function drawParticles () {
|
||||||
ctx.fillStyle = '#ff1414'
|
|
||||||
for (let i = 0; i < particleCount; i++) {
|
for (let i = 0; i < particleCount; i++) {
|
||||||
const particle = particles[i]
|
const particle = particles[i]
|
||||||
ctx.beginPath()
|
ctx.beginPath()
|
||||||
ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2)
|
ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2)
|
||||||
ctx.fill()
|
ctx.fillStyle = particle.color
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 绘制粒子的连线
|
|
||||||
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()
|
ctx.fill()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 将粒子的位置更新到下一帧
|
// 将粒子的位置更新到下一帧
|
||||||
function updateParticles () {
|
function updateParticles () {
|
||||||
|
// 1. 是每个粒子与其他粒子都有引力
|
||||||
|
// 2. 粒子距离越近,引力越大, 距离越远,引力越小
|
||||||
|
// 3. 粒子的引力是一个向量,方向是粒子与其他粒子的连线方向,大小是粒子与其他粒子的距离
|
||||||
|
// 4. 粒子的速度是一个向量,方向是粒子的引力方向,大小是粒子的引力大小
|
||||||
|
// 5. 粒子的位置是一个向量,方向是粒子的速度方向,大小是粒子的速度大小
|
||||||
|
// 6. 粒子的速度大小是一个常数,比如 0.1
|
||||||
|
// 7. 粒子的速度方向是一个随机值,比如 0 ~ 2π
|
||||||
|
|
||||||
|
// 粒子的运动
|
||||||
for (let i = 0; i < particleCount; i++) {
|
for (let i = 0; i < particleCount; i++) {
|
||||||
const particle = particles[i]
|
const particle = particles[i]
|
||||||
|
|
||||||
|
// 基本的运动
|
||||||
particle.x += particle.vx
|
particle.x += particle.vx
|
||||||
particle.y += particle.vy
|
particle.y += particle.vy
|
||||||
if (particle.x < 0) {
|
|
||||||
particle.x = width
|
//// 粒子的引力
|
||||||
}
|
//const force = {
|
||||||
if (particle.x > width) {
|
// x: 0,
|
||||||
particle.x = 0
|
// y: 0
|
||||||
}
|
//}
|
||||||
if (particle.y < 0) {
|
//// 粒子与其他粒子的引力
|
||||||
particle.y = height
|
//for (let j = 0; j < particleCount; j++) {
|
||||||
}
|
// if (i === j) {
|
||||||
if (particle.y > height) {
|
// continue
|
||||||
particle.y = 0
|
// }
|
||||||
}
|
// 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 () {
|
function draw () {
|
||||||
clear()
|
clear()
|
||||||
drawParticles()
|
drawParticles()
|
||||||
drawParticlesLine()
|
|
||||||
updateParticles()
|
updateParticles()
|
||||||
requestAnimationFrame(draw)
|
requestAnimationFrame(draw)
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue