【发布时间】：2012-08-13 01:11:52
【问题描述】：
好的，所以我正在学习 HTML5，我想更新我的作品集，使其拥有一个移动的黑洞，而不是一个静态图片。我本可以直接拍摄照片并在画布中旋转它，但我认为如果我在没有图像的情况下完成这一切会更好。我遇到的主要问题是我似乎无法理解如何计算（并因此更新）每个粒子沿圆形路径的路径。
我已经阅读了从极坐标转换为笛卡尔坐标的方程式，但显然我做错了。
以下是最相关的sn-ps代码：
粒子类
function particle(rad, vel, dist, angle, x, y){
this.rad = rad;
this.vel = vel;
this.dist = dist;
this.x = x;
this.y = y;
this.angle = angle;
}
初始化正在使用的粒子的函数
function initParticles(parts, innerCircleRad, nbr_circles, w, h){
var rad, vel, dist;
for (var i = 1; i <= nbr_circles; ++i) {
if(i < 10){
rad = (Math.random()*2.5)+1;
vel = (Math.random()*.5)+3;
dist = (Math.random()*1.5) + innerCircleRad;
angle = Math.floor(Math.random()*(360))
}else if( i < 15){
rad = (Math.random()*2.7)+1;
vel = (Math.random()*.4)+2;
dist = (Math.random()*1.5) + innerCircleRad+1;
angle = Math.floor(Math.random()*(360))
}else if( i < 18){
rad = (Math.random()*2.8)+1;
vel = (Math.random()*.3)+1;
dist = (Math.random()*1.5) + innerCircleRad+2.5;
angle = Math.floor(Math.random()*(360))
}else {
rad = (Math.random()*2.9)+1;
vel = (Math.random()*.2)+1;
dist = (Math.random()*1.5) + innerCircleRad+4;
angle = Math.floor(Math.random()*(360))
}
var x = w/2 + Math.cos(angle) * dist;
var y = h/2 + Math.sin(angle) * dist;
parts[i] = new particle(rad, vel, dist, angle, x, y);
}
}
不断调用以更新画布并绘制点的函数
function refresh(dc,width,height,frame_number, particles, nbr_circles) {
dc.clearRect(0,0,width,height);
dc.fillStyle='#000';
for (var i = 1; i <= nbr_circles; ++i) {
// set up increment for new angle based on particles velocity
var angle_incr = ((frame_number)/12.0) * Math.PI/180;
// updated new angle, make sure it is in correct range of circle
particles[i].angle = (angle_incr+particles[i].angle)%Math.PI/180
// set new x and y points based on the angle change
particles[i].x = particles[i].x + Math.cos(particles[i].angle) * particles[i].dist;
particles[i].y = particles[i].y + Math.sin(particles[i].angle) * particles[i].dist;
// draw tiny circle at x,y
dc.beginPath();
dc.arc(particles[i].x, particles[i].y, particles[i].rad, 0, 2*Math.PI, false);
dc.fill();
}
}
我设置了代码，因此我可以暂停和播放，这会打开和关闭更新方法。由于某种原因，在播放（它正在更新）时，我在画布上看不到任何东西，但是当我暂停时，所有的点都会出现。所以这是第一个问题，我认为这可能与速度太高有关，所以我将其放下，但在更新期间我无法看到粒子。每次我播放然后暂停时，点就会出现，它们没有旋转而是沿着 x 轴向右移动......我输出粒子的 x 和 y 坐标，似乎只有 x 值正在更新，并且只会上升。这解释了他们的动作。
所以我有两个问题：
如何根据每个粒子与圆心的距离、速度和当前 x y 坐标，让每个粒子遵循自己的圆形路径。
如何在遵循上述路径时显示粒子（由于某种原因，它们根本不显示，可能是因为它们的速度？）
我的最终目标是有一个空的内圈，然后靠近内圈半径的大量粒子快速移动。然后，当你移到黑洞的外半径时，粒子就会减少，那里的粒子移动得更慢。我整天都在寻找教程，除了圆形路径的方程之外，我没有发现太多相关的东西。但我似乎无法让它发挥作用。
任何解决类似问题的见解或参考资料，我将不胜感激。感谢您抽出宝贵时间阅读本文。
-艾伦
【问题讨论】：
-
你能告诉我们你是如何调用你的刷新方法的吗？我有一种感觉，这就是为什么您在暂停之前什么都看不到的原因……您还考虑过使用框架来帮助您吗？有一些很好的选择，包括mrdoob.github.com/three.js
-
@timothyclifford 虽然 three.js 很不错，但为只想制作 2d 粒子引擎的人推荐 3d 库似乎有点过头了。
-
这很有趣，你应该提出来，因为我实际上研究了three.js dled 并找到了一个关于构建更有趣的东西的教程。但我仍然想尝试弄清楚如何让它也能正常工作。我非常肯定刷新发生的地方可以正常工作，因为我使用了框架脚本并添加了我自己的代码以在刷新方法中显示。我让骨架使用基本的脚本代码。我知道寻找下一个 x y 坐标的方程式有问题，因为它们只在 x 正方向上移动。
-
@Alan 这听起来像一个非常巧妙的问题。您是否找到了可行的解决方案？
标签： javascript html canvas cartesian polar-coordinates