Canvas JS - как сделать случайное движение с ускорением - PullRequest
Новая
       29

Canvas JS - как сделать случайное движение с ускорением

0 голосов
/ 07 декабря 2018

Я борюсь с этой конкретной задачей.Я хочу сделать анимацию частиц, которые движутся случайно (я знаю, что это не может быть так много случайных) с ускорением.Я нашел один веб-сайт, который использует этот эффект, и я не могу сам его воспроизвести, и я потратил немало часов на поиск решения, но безуспешно.

Этот сайт дает желаемый эффект.Я не знаю, как сделать движение и ускорение, чтобы повторять снова и снова.

На мгновение мне показалось, что я понял, что это сделано в pixijs, но мне не удалось это сделать вПикси тоже.Все, что я мог сделать, - это просто генерировать случайные круговые движения, но это выглядит не очень хорошо.

Я бы по-настоящему оценил, если бы кто-то мог подтолкнуть меня в правильном направлении.

РЕДАКТИРОВАТЬ: Здесь это то, что я получил, как я уже сказал, он использует только круговое движение.

Это просто мой файл 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);
}

1 Ответ

0 голосов
/ 10 декабря 2018

Я думаю, что нашел решение для своего вопроса, даже если он не выглядит так же хорошо, как веб-сайт, который я упомянул, он служит цели.Вот мой отредактированный файл частиц.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);
}
...