3.2 KiB
3.2 KiB
title | localeTitle |
---|---|
Particle Sim | Частица Да |
Моделирование частиц в холсте
В этом руководстве мы собираемся создать базовое моделирование частиц в Canvas, используя простые принципы анимации.
Мы захотим создать массив частиц с ускорениями и скоростями. Мы создадим 100 частиц в случайных точках на холсте.
canvas = document.getElementById("canvas");
ctx = canvas.getContext('2d');
var particles = [];
for(var i=0; i<100; i++) {
particles.push(
{
x:Math.random()*canvas.width,
y:Math.random()*canvas.height,
vx:0,
vy:0,
ax:0,
ay:0
}
);
}
В нашем рисовальном цикле мы делаем эти частицы.
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for(var i=0; i<particles.length; i++) {
// update state
// render state
ctx.beginPath();
ctx.arc(particles[i].x, particles[i].y, 5, 0, 2*Math.PI);
ctx.fill();
}
window.requestAnimationFrame(draw);
}
window.requestAnimationFrame(draw);
Теперь нам нужно только обновить скорость и ускорить каждый кадр. Мы добавим ускорение к скорости и добавим скорость в позицию.
function draw() {
for(var i=0; i<particles.length; i++) {
// update state
particles[i].x+=particles[i].vx;
particles[i].y+=particles[i].vy;
particles[i].vx+=particles[i].ax;
particles[i].vy+=particles[i].ay;
/* render code */
}
window.requestAnimationFrame(draw);
}
window.requestAnimationFrame(draw);
Это оно! Все, что нам нужно сделать, это создать где-то силу. Давайте сделаем это с помощью прослушивателя кликов.
canvas.addEventListener("click", function(e) {
var clickX = e.clientX-canvas.offsetLeft;
var clickY = e.clientY-canvas.offsetTop;
for(var i=0; i<particles.length; i++) {
var delx = particles[i].x-clickX;
var dely = particles[i].y-clickY;
var magnitudeSquared = Math.pow(delx, 2)+Math.pow(dely, 2);
particles[i].ax = 0.1*delx/magnitudeSquared;
particles[i].ay = 0.1*dely/magnitudeSquared;
}
});
Это добавляет силу через закон обратного квадрата. См. Эту страницу для получения более подробной информации.
Это все! Окончательный код:
См. « Ручной элементный симулятор» (FCC) Алана Ло ( @alanluo ) на CodePen .