为了学习一些javascript,我在codepen中创建了一个小粒子系统。你可以在这里看到:Particles
这是js代码:
const canvas = document.querySelector('#canvas');
const canvasHeight = canvas.height;
const canvasWidth = canvas.width;
const ctx = canvas.getContext('2d');
let amountOfParticles = 300;
let rate = 50;
const velocity = 2;
let size = 2;
let allParticles = [];
const rateInput = document.querySelector('#rate-range');
const amountInput = document.querySelector('#amount-range');
const sizeInput = document.querySelector('#size-range');
const rateNumber = document.querySelector('#rate-number');
const amountNumber = document.querySelector('#amount-number');
const sizeNumber = document.querySelector('#size-number');
class Particle {
constructor(xPos, yPos) {
this.xPos = xPos;
this.yPos = yPos;
this.size = size;
this.particleColor = 'rgba(255, 255, 255, .5)';
this.originalX = xPos;
this.originalY = yPos;
this.colors = ['rgba(255, 255, 255, .75)',
'rgba(107, 185, 240, .75)',
'rgba(37, 116, 169, .75)',
'rgba(103, 65, 114, .75)',
'rgba(207, 0, 15, .75)',
'rgba(230, 126, 34, .75)',
'rgba(245, 215, 110, .75)'];
}
createSquare() {
ctx.fillStyle = this.particleColor;
ctx.fillRect(this.xPos, this.yPos, this.size, this.size);
}
moveParticle() {
let directionX = Math.random() * 100;
if (directionX < 40) {
this.xPos -= velocity;
} else if (directionX > 60) {
this.xPos += velocity;
}
let directionY = Math.random() * 100;
if (directionY < 40) {
this.yPos -= velocity;
} else if (directionY > 60) {
this.yPos += velocity;
}
this.setColor();
this.createSquare();
}
setColor() {
let distance = Math.hypot(this.originalX - this.xPos, this.originalY - this.yPos);
if (distance < 10) {
this.particleColor = this.colors[0];
} else if (distance >= 20 && distance < 40) {
this.particleColor = this.colors[1];
} else if (distance >= 41 && distance < 60) {
this.particleColor = this.colors[2];
} else if (distance >= 61 && distance < 90) {
this.particleColor = this.colors[3];
} else if (distance >= 91 && distance < 120) {
this.particleColor = this.colors[4];
} else if (distance >= 121 && distance < 160) {
this.particleColor = this.colors[5];
} else {
this.particleColor = this.colors[6];
}
}
} // end of Particle class
function makeParticles() {
for(let i = 0; i < amountOfParticles; i++) {
let randomX = Math.floor(Math.random() * canvasWidth);
let randomY = Math.floor(Math.random() * canvasHeight);
let newParticle = new Particle(randomX, randomY);
newParticle.createSquare();
allParticles.push(newParticle);
}
}
makeParticles();
setInitialValues();
drawInterval = setInterval(function(){ move(); }, rate);
function move() {
ctx.clearRect(0, 0, canvas.width, canvas.height);;
for (let i = 0; i < allParticles.length; i++) {
allParticles[i].moveParticle();
}
}
function setInitialValues() {
rateInput.value = rate;
rateNumber.innerHTML = rate;
amountInput.value = amountOfParticles;
amountNumber.innerHTML = amountOfParticles;
sizeInput.value = size;
sizeNumber.innerHTML = size;
}
function updateRate() {
let newRate = parseInt(rateInput.value);
rateNumber.innerHTML = newRate;
rate = newRate;
clearInterval(drawInterval);
drawInterval = setInterval(function(){ move(); }, rate);
}
function updateAmount() {
let newAmount = parseInt(amountInput.value);
amountNumber.innerHTML = newAmount;
amountOfParticles = newAmount;
remakeParticles();
}
function updateSize() {
let newSize = parseInt(sizeInput.value);
sizeNumber.innerHTML = newSize;
size = newSize;
remakeParticles();
}
function remakeParticles() {
allParticles = [];
makeParticles();
}
我现在想补充一个新想法。如果两个粒子接触,那么我希望它们能够生长。
我想我可以用所有粒子循环遍历数组,并将当前粒子位置与阵列上的每个粒子进行比较。由于浏览器“块”,我无法真正实现这一点。
做这样的事情最好的方法是什么?
检测碰撞肯定是人们经常做的事情,我想有一种很好的方法可以做到这一点。
谢谢!
=)
正如史蒂文指出的那样,将webworker用于单独的JS运行时。您可以通过以下方式执行此操作:
if (window.Worker) {
const myWorker = new Worker('worker.js');
// where worker.js is the URI of your script
}
这将创建一个web worker,它是一个单独的javascript线程。请记住,这将有自己的qazxsw poi对象,因此拥有可变范围。
如果您需要进行长时间计算,并且不想阻止UI,请使用Web工作者。
window
您的编译代码将放在另一个脚本中,您将使用窗口消息传递来发送参数并检索值。