This commit is contained in:
parent
b24665ae2f
commit
2584423c58
74
main.js
74
main.js
|
@ -22,7 +22,7 @@ const offsetY = 0
|
||||||
|
|
||||||
// 准备一千个小圆点作为粒子
|
// 准备一千个小圆点作为粒子
|
||||||
const particles = []
|
const particles = []
|
||||||
const particleCount = 1000
|
const particleCount = 100
|
||||||
|
|
||||||
// 生成粒子
|
// 生成粒子
|
||||||
for (let i = 0; i < particleCount; i++) {
|
for (let i = 0; i < particleCount; i++) {
|
||||||
|
@ -30,8 +30,8 @@ for (let i = 0; i < particleCount; i++) {
|
||||||
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: 0, // 粒子的速度
|
||||||
vy: Math.random() * 10 - 5, // 粒子的速度
|
vy: 0, // 粒子的速度
|
||||||
radius: Math.random() * 1 + 1, // 粒子的大小
|
radius: Math.random() * 1 + 1, // 粒子的大小
|
||||||
quality, // 粒子的质量
|
quality, // 粒子的质量
|
||||||
color: `rgb(${Math.floor(255 * (1 - quality))}, ${Math.floor(255 * (1 - quality))}, ${Math.floor(255 * (1 - quality))})` // 粒子的颜色(质量越大,颜色越深)
|
color: `rgb(${Math.floor(255 * (1 - quality))}, ${Math.floor(255 * (1 - quality))}, ${Math.floor(255 * (1 - quality))})` // 粒子的颜色(质量越大,颜色越深)
|
||||||
|
@ -51,53 +51,35 @@ function drawParticles () {
|
||||||
|
|
||||||
// 将粒子的位置更新到下一帧
|
// 将粒子的位置更新到下一帧
|
||||||
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.vx = 0
|
||||||
particle.x += particle.vx
|
particle.vy = 0
|
||||||
particle.y += particle.vy
|
|
||||||
|
|
||||||
//// 粒子的引力
|
// 粒子与其他每个粒子在坐标轴上的距离, 最近距离引力为1, 距离每增加1则引力减少1/2
|
||||||
//const force = {
|
for (let j = 0; j < particleCount; j++) {
|
||||||
// x: 0,
|
if (i === j) {
|
||||||
// y: 0
|
continue
|
||||||
//}
|
}
|
||||||
//// 粒子与其他粒子的引力
|
const other = particles[j] // 其他粒子
|
||||||
//for (let j = 0; j < particleCount; j++) {
|
const dx = particle.x - other.x // 粒子与其他粒子在x轴上的距离
|
||||||
// if (i === j) {
|
const dy = particle.y - other.y // 粒子与其他粒子在y轴上的距离
|
||||||
// continue
|
const distance = Math.sqrt(dx * dx + dy * dy) // 粒子与其他粒子在坐标轴上的距离
|
||||||
// }
|
const forceValue = 1 / (distance * distance) // 粒子与其他粒子的引力
|
||||||
// const other = particles[j]
|
const forceAngle = Math.atan2(dy, dx) // 粒子与其他粒子的引力角度
|
||||||
// const dx = other.x - particle.x
|
particle.vx += forceValue * Math.cos(forceAngle) // 粒子在x轴上的速度
|
||||||
// const dy = other.y - particle.y
|
particle.vy += forceValue * Math.sin(forceAngle) // 粒子在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
|
particle.x += particle.vx * 1000
|
||||||
//}
|
particle.y += particle.vy * 1000
|
||||||
//// 粒子与中心点的引力
|
|
||||||
//const dx = centerX - particle.x
|
// 只打印第一个粒子的速度
|
||||||
//const dy = centerY - particle.y
|
if (i === 0) {
|
||||||
//const distance = Math.sqrt(dx * dx + dy * dy)
|
console.log(particle.vx, particle.vy)
|
||||||
//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
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue