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);
}

Canvas JS - 如何加速随机移动

Canvas JS - how to do random movement with acceleration

javascript

canvas

random

pixi.js