Изучение генеративного типа и текста
Этот код написан в библиотеке JavaScript P5.js. P5.js — это клиентская библиотека, которая упрощает процесс создания интерактивной графики и анимации в JavaScript, предоставляя набор интуитивно понятных функций рисования и обработчиков событий.
Этот код создает интерактивную программу, которая позволяет пользователю рисовать кривую Безье и добавлять к ней текст. Код создает пустой массив с именем points
, в котором будут храниться контрольные точки кривой Безье. Код также создает переменную с именем draggingPoint
и устанавливает для нее значение null, которое будет использоваться позже для отслеживания, когда пользователь перетаскивает контрольную точку.
Функция setup()
создает холст и устанавливает белый цвет фона. Он также создает элемент ввода HTML и настраивает его на вызов функции updateInputText()
всякий раз, когда пользователь вводит в него текст. Функция updateInputText()
отвечает за обновление переменной inputText
текстом, введенным пользователем, и настройку массива с именем textPositionOffsets
, который будет использоваться для позиционирования текста на кривой Безье.
Функция draw()
отвечает за обновление и рисование кривой Безье, контрольных точек и текста на кривой. Функции mousePressed()
, mouseDragged()
и mouseReleased()
позволяют пользователю перетаскивать контрольные точки на холсте с помощью мыши. Функция drawPoints()
отвечает за отрисовку контрольных точек в виде кругов. Функция drawBezierCurve()
отвечает за построение кривой Безье. Функция updatePointsWithPerlinNoise()
обновляет положение контрольных точек с помощью шума Перлина, что создает плавное и органичное движение. Функция drawTextOnBezierCurve()
рисует текст на кривой Безье.
Наконец, функция getBezierPoint()
вычисляет точку на кривой Безье с учетом четырех контрольных точек и значения t
между 0 и 1. Эта функция используется drawTextOnBezierCurve()
для позиционирования текста вдоль кривой. Программа также позволяет пользователю увеличивать или уменьшать размер шрифта текста с помощью клавиш со стрелками вверх и вниз.