Небольшой проект, сделанный под влиянием ещё одного видео Дэвида Шиффмана. Реализация показалась мне довольно любопытной, и её было интересно повторить в SVG. Вот моя попытка — я взял код из репозитория Coding Train для исламских звёздных узоров и полностью переписал его на чистом JavaScript с отрисовкой в SVG. Этот проект помог мне разобраться с парадигмой ООП в JS, сильно пригодился в следующем проекте (скоро увидите) и помог понять, как работает анимация в SVG.

Если есть предложения — напишите мне в twitter. Весь код доступен на моём Github — на этот раз я решил, что проект достаточно большой для отдельного репозитория, так что не стесняйтесь заводить issue/PR/форк и т.д. Улучшать есть что — другие объекты (треугольники и прочее), настройка через CSS и так далее.

Интересная часть проекта — реализация стандартных векторных объектов из P5.JS. Лучший способ что-то понять для меня — переписать это самому. Чтобы всё заработало, понадобилось много векторных методов. Вот, например, функция поворота:

Vector.prototype.rotate = function (angle) {
  x =
    Math.round(10000 * (this.x * Math.cos(angle) - this.y * Math.sin(angle))) /
    10000;
  y =
    Math.round(10000 * (this.x * Math.sin(angle) + this.y * Math.cos(angle))) /
    10000;
  return new Vector(x, y);
};

И многое другое — загляните в репозиторий.

Экспериментируйте и делитесь мыслями.

DELTA: ANGLE:
deltainc: angleinc: