Черная молния на JavaScript - графика и анимация

Дополнительные возможности: фрактальная молния и эффекты

1. Рекурсивная генерация фрактальной молнии

Для более реалистичной формы используется рекурсивное деление отрезков. Каждый отрезок делится на две части со случайным смещением середины.

function fractalLightning(ctx, x1, y1, x2, y2, displacement, detail) {
  if (detail < 1) {
    ctx.lineTo(x2, y2);
    return;
  }
  let midX = (x1 + x2) / 2 + (Math.random() - 0.5) * displacement;
  let midY = (y1 + y2) / 2 + (Math.random() - 0.5) * displacement;
  fractalLightning(ctx, x1, y1, midX, midY, displacement * 0.6, detail - 1);
  ctx.lineTo(midX, midY);
  fractalLightning(ctx, midX, midY, x2, y2, displacement * 0.6, detail - 1);
}

// Использование
ctx.beginPath();
ctx.moveTo(50, 50);
fractalLightning(ctx, 50, 50, 350, 250, 100, 6);
ctx.strokeStyle = 'black';
ctx.lineWidth = 2;
ctx.stroke();

Результат - ломаная с сильно изогнутыми ответвлениями, похожая на настоящую молнию.

// При detail=6 линия состоит из 2^6 = 64 отрезков, образующих хаотичный зигзаг.

2. Ветвление молнии (создание ответвлений)

Дополнительные боковые «усики» добавляются случайным образом от точек основного ствола.

function addBranch(ctx, x, y, angle, length, displacement) {
  if (length < 5) return;
  let endX = x + Math.cos(angle) * length + (Math.random() - 0.5) * displacement;
  let endY = y + Math.sin(angle) * length + (Math.random() - 0.5) * displacement;
  ctx.moveTo(x, y);
  ctx.lineTo(endX, endY);
  // рекурсивно создать ответвления от конца ветки
  addBranch(ctx, endX, endY, angle + Math.random() * 0.5 - 0.25, length * 0.7, displacement * 0.8);
}

Результат - молния с боковыми разрядами, как у настоящей грозы.

// При вызове addBranch от нескольких точек основного ствола получается ветвистая структура.

3. Эффект свечения (blur) вокруг чёрной линии

Имитация свечения достигается с помощью ctx.shadowBlur и ctx.shadowColor. Чтобы свечение было заметным на светлом фоне, можно задать серый или белый цвет тени.

ctx.shadowColor = 'rgba(0,0,0,0.5)';  // тень чёрная, но полупрозрачная
ctx.shadowBlur = 10;
// затем рисовать молнию как обычно

Результат - линия с размытой полупрозрачной окантовкой, создающей иллюзию свечения.

// Чёрная линия окружена мягким серым ореолом, что добавляет глубины.

4. Анимация с постепенным рисованием (эффект проявления)

Используется техника рисования молнии по частям: каждый кадр добавляется один сегмент.

let progress = 0;
const points = []; // массив точек, заранее вычисленный

function drawProgressive() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.moveTo(points[0].x, points[0].y);
  for (let i = 1; i <= progress; i++) {
    ctx.lineTo(points[i].x, points[i].y);
  }
  ctx.stroke();
  if (progress < points.length - 1) {
    progress++;
    requestAnimationFrame(drawProgressive);
  }
}

Результат - молния «вырисовывается» от начала к концу.

// За 30 кадров (около 0.5 сек) молния полностью появляется.

5. Множественные молнии с разной задержкой

Несколько независимых молний, запускаемых с задержкой, создают картину грозы.

function createMultiLightning(count) {
  for (let i = 0; i < count; i++) {
    setTimeout(() => {
      // рисовать одну молнию со случайными координатами
      drawLightning(ctx, Math.random()*400, Math.random()*100, Math.random()*400, 300, 15, 50);
    }, i * 200);
  }
}

Результат - последовательное появление нескольких молний.

// Каждые 200 мс появляется новая чёрная молния в случайном месте.