Образовательный рисунок с математикой
Даже когда я действительно хочу изучить новый язык программирования, фреймворк или инструмент, процесс начала работы с ним может показаться утомительным. Но это помогает, когда награда высока, и еще больше помогает, если вы можете быстро увидеть награду.
Это был мой опыт создания фракталов в p5.js. Имея менее 40 строк кода JavaScript, вы также можете создать собственное настраиваемое и настраиваемое фрактальное дерево.
Я также рекомендую посмотреть Видео Coding Train о создании фрактальных деревьев.
Единственный ресурс, который вам понадобится для начала, - это библиотека p5 с веб-сайта p5. Ссылка p5.js complete дает вам библиотеку в файле с именем p5.js, на который вы можете ссылаться в другом файле JavaScript, включив его в заголовок вашего HTML-файла:
<script src='./p5.js'></script> <script src='./index.js></script>
Чтобы проинструктировать p5 нарисовать изображение, подобное изображенному в верхней части этой статьи, нам нужно разбить то, что мы пытаемся построить, и задать вопрос ...
Что такое фрактал?
Даже если мы видели их много раз раньше, оксфордское определение помогает прояснить:
«Кривая или геометрическая фигура, каждая часть которой имеет тот же статистический характер, что и целое».
Прежде чем вдаваться в подробности, мы могли бы уже представить, что любые команды, которые мы пишем, могут повторяться, возможно, с некоторой незначительной модификацией или прогрессивной миниатюризацией, чтобы продолжить рендеринг все более и более мелких частей, которые имеют «тот же статистический характер», что и их родительская часть.
Какую роль в этом играет p5?
P5 делает все за нас.
Мы даем всего несколько инструкций p5, и если мы напишем их таким образом, что параметры инструкций рекурсивно (самореференциально) изменяются сами по себе, мы можем заставить p5 выполнять большое количество операций, записывая только несколько инструкций.
Пора рисовать
Если мы собираемся нарисовать одну из самых простых фрактальных форм, дерево с ветвями за ветвями за ветвями, мы можем начать с рисования первой ветки. Но сначала давайте настроим наш index.js файл:
function setup() {
createCanvas(800, 600)
}
Мы можем написать это в первой строке. Как следует из названия, он создает наш холст.
Следующий:
function draw() {
background(0)
}
Setup() и draw() - первые две функции, которые появляются в каждом файле p5.
Следующая важная функция - translate(). Инструкции, которые мы даем для перевода, - это координаты x и y на экране, указывающие направление и расстояние, на которое должна двигаться виртуальная кисть.
Важно следить за положением кисти, поскольку последующие движения основываются на движениях, сделанных ранее. В функции рисования мы можем ссылаться на ширину и высоту холста, чтобы найти нижнюю часть следующим образом:
translate(width / 2, height)
Теперь, когда мы заняли позицию, мы можем нарисовать линию с помощью функции line() с помощью функции stroke(), которая определяет цвет нашей линии:
stroke(50, 50, 250) line(0,0,0, -150)
Все это вместе дает нам одну линию внизу холста. Если то, что мы нарисовали, является нашей первой ветвью, и мы хотим нарисовать дальнейшие ветки, давайте выделим эту ветвь в отдельную функцию и вызовем ее в нашей функции рисования.
Поскольку мы хотим изменить длину ветви, функция может принимать аргумент ее длины. В целом наш код теперь выглядит так:
Чтобы нарисовать следующую линию, нам нужно начать рисование с конца последней линии под новым углом. Угол определяется относительно числа пи, поэтому мы можем добавить к нашей функции рисования вот так:
Обратите внимание, мы переводим второй раз. Это приводит нас к вершине ветки. Оттуда мы поворачиваем нашу ориентацию на 45 градусов и рисуем новую ветку, длина которой составляет 3/4 длины последней.
Следующим естественным шагом будет нарисовать нашу следующую ветку, которая начинается в том же месте, что и предыдущая.
Мы могли бы переводить обратно туда, но затем, когда мы будем создавать все больше и больше ветвей, нам придется переводить вверх и вниз каждую вилку, что станет очень трудно масштабировать. Вот почему так полезен следующий инструмент p5.
pop () и push ()
Эти функции позволяют нам рисовать на холсте, а затем возвращаться в предыдущее положение перед рисованием следующего элемента.
В следующий раз мы повернем на противоположный угол и нарисуем ту же ветку в том же направлении. Функция рисования теперь выглядит так:
Это дает нам две ветви. Мы в пути! Но чтобы повторить эту функцию, нам все равно нужно перевести следующую ветвь вверх, затем обратно и вернуться в следующий способ, чтобы нарисовать дальнейшие ветки.
Это по-прежнему очень часто выполнять без права…
Рекурсия
Рекурсия поможет нам выполнить все наши последующие операции, не выписывая каждую из них. Рекурсия довольно мощная - достаточно мощная, она может сломать ваш код, пытаясь работать вечно, если вы не установите для него точку останова.
Я выбрал точку останова, когда длина ветви достигнет 1. Это заняло у моего браузера несколько секунд для запуска. Вы можете установить минимальную длину 3 или 5 или выше в зависимости от скорости вашего компьютера.
Путем перемещения функций push, pop, rotate и branch внутрь нашей функции ветвления наш код теперь выглядит следующим образом:
Что, наконец, рендерит наш первый фрактал:
Что дальше?
Если вы сами запускали этот код, возможно, у вас уже есть идеи, как экспериментировать и настраивать. Вы можете изменить угол поворота, длину ветви, добавить больше ветвей, изменить цвет или значительно изменить функцию.
Иногда вам может потребоваться уменьшить минимальную длину, установленную в операторе if, если визуализация занимает слишком много времени.
Ниже приведена измененная версия приведенного выше кода с добавлением ползунка, который позволяет пользователю изменять угол в прямом эфире в браузере.
Удачи, создавая этот проект по своему усмотрению. P5 - мощный инструмент, и, немного зная об общих функциях и их поведении, вы уже на правильном пути.
Чтобы запустить этот код, вы можете клонировать его из моего репозитория GitHub.
