Canvas JS - 如何通过加速度进行随机运动

Question

我正在为这个特殊的任务而苦苦挣扎。我想用某种加速度制作随机移动的粒子动画（我知道它不可能那么随机）。我发现一个网站正在使用这种效果，但我自己无法复制它，我花了好几个小时研究解决方案，但没有成功。

这个site 具有预期的效果。我不知道如何一遍又一遍地重复运动和加速。

有一瞬间我以为我知道它是用 pixijs 制作的，但我也没有设法在 pixi 中做到这一点。我所能做的只是随机生成圆周运动，但看起来不太好。

如果有人能把我推向正确的方向，我真的很感激。

编辑： Here 是我目前得到的，正如我所说，它只使用圆周运动。

这只是我的 JS 文件：

function getRandomInt(min, max) {

min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function getLineWidth(max, min, distance) {
  if(distance < min) {return 1;}
  if(distance >= min && distance <= max) {
    return -(distance - max) / min;
  } else {
    return 0;
  }
}

function particles(numberOfParticles) {
  var canvas = document.getElementById('canvas'),
      ctx = canvas.getContext('2d');

  var W = canvas.width;
  var H = canvas.height;

  var x = 0, y = 0;

  //random properties of particle
  var particleProperties = [];
  for(i = 0; i < numberOfParticles; i++) {
    var speed = Math.random() * (0.35 - 0.1) + 0.1; //0.1 - 0.35
    var radius = getRandomInt(100, 500); // 100 - 500
    var angle = 0;
    var direction = Math.random() < 0.5 ? -1 : 1;
    var circleCenterX = getRandomInt(250, 550); //250 - 550
    var circleCenterY = getRandomInt(150, 550); //150 - 550
    var sizeOfParticle = getRandomInt(1, 3);

    particleProperties[i] = [speed, radius, angle, direction, circleCenterX, circleCenterY, sizeOfParticle];
  }

  function draw() {
      ctx.clearRect(0, 0, W, H);

      var coordinatesOfParticles = [];
      //object R
      for(i = 0; i < numberOfParticles; i++) {
          var newX = particleProperties[i][1] * Math.cos(particleProperties[i][2] * (Math.PI/180) * particleProperties[i][3]);
          var newY = particleProperties[i][1] * Math.sin(particleProperties[i][2] * (Math.PI/180) * particleProperties[i][3]);
          x = newX + particleProperties[i][4];
          y = newY + particleProperties[i][5];
          ctx.beginPath();
          ctx.arc(x, y, particleProperties[i][6], 0, 2*Math.PI);
          ctx.fillStyle = 'black';
          ctx.fill();
          ctx.stroke();
          particleProperties[i][2] += particleProperties[i][0];
          coordinatesOfParticles[i] = [x, y];
      }

      for(i = 0; i < coordinatesOfParticles.length - 1; i++) {
          for(j = i + 1; j < coordinatesOfParticles.length; j++) {
              if(math.distance(coordinatesOfParticles[i], coordinatesOfParticles[j]) < 220) {
                  ctx.beginPath();
                  ctx.lineWidth = getLineWidth(220, 90, math.distance(coordinatesOfParticles[i], coordinatesOfParticles[j]));
                  ctx.moveTo(coordinatesOfParticles[i][0], coordinatesOfParticles[i][1]);
                  ctx.lineTo(coordinatesOfParticles[j][0], coordinatesOfParticles[j][1]);
                  ctx.stroke();
              }
          }
      }
  }

  setInterval(draw, 1000/60);
}

Answer 1

我想我为我的问题找到了解决方案，即使它看起来不像我提到的网站那么好，但它可以达到目的。这是我编辑的particles.js 文件。也许它会对某人有所帮助。

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function getLineWidth(max, min, distance) {
  if(distance < min) return 1;
  if(distance >= min && distance <= max) {
    return -(distance - max) / min;
  } else {
    return 0;
  }
}

function particles(numberOfParticles) {
  var canvas = document.getElementById('canvas'),
      ctx = canvas.getContext('2d');

  var W = canvas.width;
  var H = canvas.height;

  var x = 0, y = 0;

  //random object
  var particleProperties = [];
  for(i = 0; i < numberOfParticles; i++) {
    var speed = Math.random() * (0.30 - 0.18) + 0.18; //0.1 - 0.35
    var radius = getRandomInt(100, 200); // 100 - 500
    var angle = 0;
    var direction = Math.random() < 0.5 ? -1 : 1;
    var circleCenterX = 400; //250 - 550
    var circleCenterY = getRandomInt(100, 600); //150 - 550
    var sizeOfParticle = getRandomInt(1, 3);
    var X = getRandomInt(30, 230);
    var Y = getRandomInt(290, 360);

    particleProperties[i] = [speed, radius, angle, direction, circleCenterX, circleCenterY, sizeOfParticle, X, Y];
  }

  function draw() {
      //clear rect
      ctx.clearRect(0, 0, W, H);

      var coordinatesOfParticles = [];
      //objekt R
      for(i = 0; i < numberOfParticles; i++) {
          var newX = particleProperties[i][1] * Math.cos(particleProperties[i][2] * (Math.PI/particleProperties[i][7]) * particleProperties[i][3]);
          var newY = particleProperties[i][1] * Math.tan(particleProperties[i][2] * (Math.PI/particleProperties[i][8]) * particleProperties[i][3]);
          x = newX + particleProperties[i][4];
          y = newY + particleProperties[i][5];
          ctx.beginPath();
          ctx.arc(x, y, particleProperties[i][6], 0, 2*Math.PI);
          ctx.fillStyle = 'grey';
          ctx.fill();
          ctx.stroke();
          particleProperties[i][2] += particleProperties[i][0];
          coordinatesOfParticles[i] = [x, y];
      }

      for(i = 0; i < coordinatesOfParticles.length - 1; i++) {
          for(j = i + 1; j < coordinatesOfParticles.length; j++) {
              if(math.distance(coordinatesOfParticles[i], coordinatesOfParticles[j]) < 190) {
                  ctx.beginPath();
                  ctx.lineWidth = getLineWidth(190, 90, math.distance(coordinatesOfParticles[i], coordinatesOfParticles[j]));
                  ctx.moveTo(coordinatesOfParticles[i][0], coordinatesOfParticles[i][1]);
                  ctx.lineTo(coordinatesOfParticles[j][0], coordinatesOfParticles[j][1]);
                  ctx.stroke();
              }
          }
      }
  }

  setInterval(draw, 1000/60);
}