Холст искровые линии

Question

Я хотел бы создать линии искр различной длины и анимировать их, перемещая их от центра к концу холста, и процесс должен повторяться на холсте. Чтобы достичь этого, я начал с системы частиц.

Пожалуйста, проверьте код ниже, и вот ссылка на кодовый блок https://codepen.io/yesvin/pen/XPKNYW

window.onload = function() {
  var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d"),
    w = canvas.width = window.innerWidth,
    h = canvas.height = window.innerHeight,
    centerX = w / 2,
    centerY = h / 2,
    speed = 0,
    time = 0,
    numObjects = 5,
    x, y, vx, vy, life, maxLife;

  var lines = {},
    lineIndex = 0;

  function Line() {
    this.x = centerX;
    this.y = centerY;
    this.vx = Math.random() * 16 - 8;
    this.vy = Math.random() * 16 - 8;
    this.life = 0;
    this.maxLife = Math.random() * 10 + 20;
    lineIndex++;
    lines[lineIndex] = this;
    this.id = lineIndex;
  }

  Line.prototype.draw = function() {
    this.x += this.vx;
    this.y += this.vy;
    this.life++;
    if (this.life >= this.maxLife) {
      delete lines[this.id];
    }
    context.fillStyle = "#000";
    context.fillRect(this.x, this.y, 3, 3)
  }

  setInterval(function() {
    context.fillStyle = 'rgba(255,255,255,.05)';
    context.fillRect(0, 0, w, h);
    new Line();
    for (var i in lines) {
      lines[i].draw();
    }
  }, 30)
};

body {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
}

<canvas id="canvas"></canvas>

Итак, как мы можем создать этот же эффект, используя методы lineTo() и moveTo()? Я попытался с помощью следующего кода (который прокомментирован в коде)

context.beginPath();
context.moveTo(centerX, centerY);     
context.lineTo(this.x * Math.random() * w, this.y * Math.random() * h);
context.lineWidth = 1;
context.stroke();
context.strokeStyle = "#000";

Образец GIF

Заранее спасибо.

Answer 1

Вот один подход ...
Со строками вы получите более непрерывный эффект:

The change I'm making to your code is to keep track of the start and end points.

window.onload = function() {
  var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d"),
    w = canvas.width = window.innerWidth,
    h = canvas.height = window.innerHeight,
    centerX = w / 2,
    centerY = h / 2;

  var lines = {},
    lineIndex = 0;

  function Line() {
    this.start = { x: centerX, y: centerY };
    this.end = { x: centerX, y: centerY };
    this.vx = Math.random() * 16 - 8;
    this.vy = Math.random() * 16 - 8;
    this.life = 0;
    this.maxLife = Math.random() * 10 + 20;
    lineIndex++;
    lines[lineIndex] = this;
    this.id = lineIndex;
  }

  Line.prototype.draw = function() {
    this.end.x += this.vx;
    this.end.y += this.vy;
    this.life++;
    if (this.life >= this.maxLife) {
      delete lines[this.id];
    }
    //context.fillStyle = "#000";
    //context.fillRect(this.x, this.y, 1, 1)
    context.beginPath();
    context.moveTo(this.start.x, this.start.y);
    context.lineTo(this.end.x, this.end.y);
    context.lineWidth = 1;
    context.stroke();
    context.strokeStyle = "#000";
  }

  setInterval(function() {
    context.fillStyle = 'rgba(255,255,255,.05)';
    context.fillRect(0, 0, w, h);
    new Line();
    for (var i in lines) {
      lines[i].draw();
    }
  }, 30)
};

body {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
}

<canvas id="canvas"></canvas>