Генератор L-систем

Небольшой проект, сделанный в перерыве между сменой одной компании на другую. Теперь я понимаю, что, кажется, немного одержим фракталами. Но так или иначе, мне нравится результат.

Попробуйте интерактивный генератор ниже или откройте полноэкранную версию.

Итак, генератор фракталов на L-системах. Что такое L-система? Согласно Википедии, L-система, или система Линденмайера, — это система параллельного переписывания и разновидность формальной грамматики. L-система состоит из алфавита символов, из которых можно составлять строки; набора порождающих правил, которые расширяют каждый символ в более длинную строку символов; начальной строки-«аксиомы», с которой начинается построение; и механизма перевода полученных строк в геометрические структуры. L-системы были введены и разработаны в 1968 году Аристидом Линденмайером, венгерским биологом-теоретиком и ботаником Утрехтского университета. Линденмайер использовал L-системы для описания поведения растительных клеток и моделирования процессов роста растений. L-системы также применялись для моделирования морфологии различных организмов и могут использоваться для порождения самоподобных фракталов, таких как системы итерируемых функций.

Простыми словами: если у вас есть аксиома ‘F’ и единственное правило F → F+F−F−F+F, то на первой итерации получается

  F

затем

  F+F−F−F+F

и далее (каждая F теперь F+F−F−F+F)

  F+F−F−F+F + F+F−F−F+F − F+F−F−F+F − F+F−F−F+F + F+F−F−F+F

и если F — это отрезок на плоскости, ’-’ меняет направление на 90 градусов против часовой стрелки, а ’+’ — на 90 градусов по часовой, то получится простейший фрактал под названием линия Коха:

Довольно просто.

Ядро кода — объект LShape с методом step:

Lshape.prototype.step = function () {
  const arrState = this.currentState.split('');
  const nextStepArr = arrState.map((el) => {
    let res = el;
    if (this.rules[el]) {
      return (res = this.rules[el]);
    }
    return res;
  });
  this.currentState = nextStepArr.join('');
};

Разумеется, есть функции отрисовки на canvas и прочее — их можно посмотреть в исходном коде, код предельно простой. С этим интересно поэкспериментировать — попробуйте интерактивное демо ниже.

Выберите пресет из прокручиваемой галереи или откройте панель Controls, чтобы настроить аксиому, правила, число итераций, цвета и другое. Перетаскивайте для перемещения и прокручивайте для масштабирования. Нажмите «Download PNG», чтобы сохранить результат.

Исходный код