javascript - 使用 JavaScript 的 Canvas 动画。每次启动时的随机坐标和速度

Question

已编辑:感谢所有宝贵的时间和精力。最后我做了这个 )) JSfiddle

我只是在玩 Canvas 并制作了这个。 fiddle 链接 here .

... some code here ...

var cords = [];

for(var i = 50; i <= width; i += 100) {
  for(var j = 50; j <= height; j += 100) {
    cords.push({ cor: i+','+j});
  }
}

console.log(cords);

var offset = 15,
    speed = 0.01,
    angle = 0.01;

cords.forEach(function(e1) {
  e1.base = parseInt(Math.random()*25);
  e1.rgb = 'rgb('+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+')';
});

setInterval(function() {
  cords.forEach(function(e1) {
    e1.base = parseInt(Math.random()*25);
    e1.rgb = 'rgb('+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+')';
  });
},5000);

function render() {

  ctx.clearRect(0,0,width,height);

  cords.forEach(function(e1) {
    //console.log(e1);
    ctx.fillStyle = e1.rgb;
    ctx.beginPath();
    var r = e1.base + Math.abs(Math.sin(angle)) * offset;
    var v = e1.cor.split(',');
    ctx.arc(v[0],v[1],r,0,Math.PI * 2, false);
    ctx.fill();
  });
  angle += speed;
  requestAnimationFrame(render);
}

render();

想知道是否 -

1. 坐标可以随机设置，现在如您所见，它们是固定的。 5000 mil 之后，球会出现在各种随机绳索中，但即使在最饱满的情况下，它们也不会相互接触。
2. 每个球的大小变化速度都相同，我希望它也不同。意思是，在 5000 mil 之后，它们也会以不同的动画速度出现。

也非常感谢任何关于改进代码并使其更好/更快/更轻的建议。谢谢!

Answer 1

TL;DR - 看到它正在运行 here .

使坐标随机:

这需要您向 x 和 y 坐标添加一些随机位移。所以我在坐标中添加了一个随机值。但是小于 1 的位移并不明显。因此，您需要将该随机数放大一个倍数。这就是 randomizationFactor 发挥作用的地方。我将其设置为 100，因为这是您在每次迭代中移动坐标的值。因此，这为动画提供了真正随机的外观。

使速度随机:

这花了我一段时间才弄清楚，但理想的方法是将速度值插入坐标数组。这让您可以确保在动画持续期间，速度将保持恒定，从而给您带来更流畅的感觉。但是再次将半径 r 乘以 0 到 1 之间的值会显着降低某些圆的速度。所以我在 3 的基础上增加了一个乘数来稍微补偿一下。

理想情况下，我会输入 2，因为 Math.random() 的平均值为 0.5，因此乘数 2 就足以弥补这一点。但是一点点实验表明，3 的乘数要好得多。您可以根据自己的喜好选择值。

您生成坐标的逻辑更改如下:

for(var i = 50; i <= width;i += 100)  {
  for(var j = 51; j <= height;j += 100) {
    var x = i + (Math.random() - 0.5)*randomizationFactor;
    var y = j + (Math.random() - 0.5)*randomizationFactor;
    cords.push({ cor: x+','+y, speed: Math.random()});
  }
}

放大圆圈的逻辑变化如下:

function render() {

  ctx.clearRect(0,0,width,height);

  cords.forEach(function(e1) {
    //console.log(e1);
    ctx.fillStyle = e1.rgb;
    ctx.beginPath();
    var r = e1.base + Math.abs(Math.sin(angle)) * offset * e1.speed * 3;
    var v = e1.cor.split(',');
    ctx.arc(v[0],v[1],r,0,Math.PI * 2, false);
    ctx.fill();
  });
  angle += speed ;
  requestAnimationFrame(render);
}

建议:用颜色更新坐标

我可能还会每 5 秒更新一次圆圈的位置以及颜色。这也很简单。 Here我刚刚创建了一个函数 resetCoordinates，它与 setBaseRgb 函数一起每 5 秒运行一次。

var cords = [];
function resetCoordinates() {
  cords = [];

  for(var i = 50; i <= width;i += 100)  {
    for(var j = 51; j <= height;j += 100) {
      var x = i + (Math.random() - 0.5)*randomizationFactor;
      var y = j + (Math.random() - 0.5)*randomizationFactor;
      cords.push({ cor: x+','+y, speed: Math.random()});
    }
  }
}