Найти в Дзене
В.

Дерево Пифагора с элементами настройки и управления - построение на JavaScript с рекурсией.

Все помнят из школы теорему Пифагора. Есть много доказательств теоремы от разных авторов - от Евклида до Леонардо да Винчи. Одно из доказательств теоремы использует рисунок так называемых "Пифагоровых штанов": На базе этого рисунка и строится фрактал "Дерево Пифагора": Я попытался на своей веб-странице не просто построить "Дерево Пифагора", как показано выше, но и добавить как можно больше элементов настройки и управления, чтобы разнообразить полученные изображения: Вот что вышло в итоге: Главное меню программы после загрузки имеет следующие установки по умолчанию: При этом рисуется следующее "Дерево Пифагора", на мой взгляд симпатичное: А сейчас попробуем менять параметры ветра: Ветер усиливается, порывистый: И вот, наконец, почти ураган: Но можно настроить ветер, чтобы он был переменным, т.е. строго менял направление на каждом уровне итераций. Тогда может получится даже красивое дерево, похожее на ель: Можно, конечно, получить и совсем уж фантастические деревья, типа такого: Как вид

Все помнят из школы теорему Пифагора. Есть много доказательств теоремы от разных авторов - от Евклида до Леонардо да Винчи. Одно из доказательств теоремы использует рисунок так называемых "Пифагоровых штанов":

Сумма площадей квадратов, опирающихся на катеты a и b, равна площади квадрата, построенного на гипотенузе c
Сумма площадей квадратов, опирающихся на катеты a и b, равна площади квадрата, построенного на гипотенузе c

На базе этого рисунка и строится фрактал "Дерево Пифагора":

Классическое "Дерево Пифагора" (моя программа - рекурсия 15 итераций)
Классическое "Дерево Пифагора" (моя программа - рекурсия 15 итераций)

Я попытался на своей веб-странице не просто построить "Дерево Пифагора", как показано выше, но и добавить как можно больше элементов настройки и управления, чтобы разнообразить полученные изображения:

  • цвета заливки разных элементов;
  • цвета и толщины линий разных элементов;
  • отдельно раскрашиваются листья;
  • толщина ствола и степень обнажённости дерева;
  • сила, направление и характер ветра, при котором формируется дерево.

Вот что вышло в итоге:

Дерево Пифагора

Главное меню программы после загрузки имеет следующие установки по умолчанию:

Установки по умолчанию
Установки по умолчанию

При этом рисуется следующее "Дерево Пифагора", на мой взгляд симпатичное:

Дерево по умолчанию
Дерево по умолчанию
Убрать цвета заливки и добавить лёгкий ветерок
Убрать цвета заливки и добавить лёгкий ветерок
Дерево слегка "усохло" - приближается к обнажённому.
Дерево слегка "усохло" - приближается к обнажённому.

А сейчас попробуем менять параметры ветра:

Лёгкий ветер нарушил регулярность,
Лёгкий ветер нарушил регулярность,
Но дерево стало более естесственным
Но дерево стало более естесственным

Ветер усиливается, порывистый:

Кто тут вспомнит про Пифагора
Кто тут вспомнит про Пифагора
А это сильный порывистый ветер
А это сильный порывистый ветер

И вот, наконец, почти ураган:

Ветер согнул дерево почти в дугу.
Ветер согнул дерево почти в дугу.

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

Тогда может получится даже красивое дерево, похожее на ель:

Толстая ель
Толстая ель
Молодая ёлочка
Молодая ёлочка

Можно, конечно, получить и совсем уж фантастические деревья, типа такого:

Такие деревья, наверное, росли на Марсе, когда там была жизнь.
Такие деревья, наверное, росли на Марсе, когда там была жизнь.

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

-----

Отзывы и пожелания.

Если эта статья Вам понравилась, автору будет приятно получить положительный отзыв в виде символической суммы через Юmoney на кошелёк 4100117793355888.