Это очень увлекательный способ придать трехмерному объекту динамическую 2D-текстуру. Это может быть простой эскиз к очень сложному шаблону проектирования с использованием простого программирования на p5.js.

Приступим. Создайте новый проект с помощью p5.js Web Editor. Новый проект в веб-редакторе p5js выполняет следующие две функции. Функция setup () запускается только один раз, а функция draw () выполняется в цикле .

Создание 2D радиального массива:

Для создания радиального узора мы будем использовать полярные координаты (r, a) и преобразовать их в декартовы координаты (x, y).

Что такое полярные координаты?

Полярные координаты - это двумерная система координат, где каждая точка на плоскости определяется расстоянием от точки до опорной точки, которое составляет « r », называемый радиальной координатой, и угол, который он образует с опорной точкой, то есть« a », называемый полярным углом.

Для создания радиального массива создайте две переменные: одну для радиальной координаты r, присвойте ей значение 10, а другую для полярного угла a , присвойте ему значение 0 .

Теперь увеличьте значение переменной a в функции draw ().

На графике для вычисления полярных координат (r, a) их необходимо преобразовать в декартовы координаты (x, y). И для этого воспользуемся тригонометрией.

Поместите переменные x и y в функцию ellipse (). Круг появился, но в позиции (0,0).

Чтобы исправить это, используется функция translate (), которая переводит его (200 200). Теперь круг начинает появляться в центре холста и его вращение. Но они не образуют радиальный узор, потому что фон непрерывно прорисовывается и очищает круги.

Чтобы узор появился, давайте переместим фон из функции draw () в setup (). Теперь узор начинает появляться, но они расположены близко друг к другу. Чтобы между ними было немного места, давайте создадим переменную c и зададим интервал 20.

Теперь увеличьте переменную интервала c в draw () и добавьте переменную c в тригонометрическую формулу: x = r + c * cos (a) и y = r + c * sin (a).

Давайте изменим значение приращения переменной интервала 'c' и переменной полярного угла 'a', увидим изменение в шаблоны.

Попробуйте ввести разные переменные в fill () и посмотрите, как изменился цвет.

Сочетание 3D с 2D:

Следующим шагом является добавление параметра WEBGL к createCanvas (), чтобы преобразовать его в 3D. Поскольку в WEBGL начало координат находится в центре, а не в верхнем левом углу, translate () больше не требуется. Наш 2D-код должен находиться в функциях push () и pop (). Он будет содержать код от воздействия любого другого кода.

Когда мы запускаем код, узор все еще появляется в центре.

Создайте трехмерный блок и поместите его код в другой push () и pop ().

Теперь создайте другую угловую переменную для 3D-блока и увеличьте ее в draw (). Используйте переменные в rotateX, rotateY и rotateZ.

Поскольку background () находится в setup (), поле начинает размазываться. Это не хорошо !! Потому что в 3D фон должен быть в draw ().

Давайте вернем фон в draw (). Там он исправлен, но 2D узор начинает исчезать, как и раньше.

Чтобы исправить это, сначала создайте переменную, назовем ее искусство. Вы можете называть ее как хотите.

В setup () используйте переменную иллюстрацию для createGraphics (width, height), которая будет использоваться в других местах.

Теперь добавьте переменную иллюстрацию к ellipse () и его свойствам, таким как fill () или stroke ().

Наконец, поскольку трехмерный блок не имеет цвета или текстуры, давайте дадим ему текстуру () и передадим в него переменное искусство в качестве параметра. Ура!! , на нем начинает проявляться двухмерный узор, но он все еще проявляется из углов.

Чтобы исправить это, просто добавьте какое-то значение, в нашем случае это 200 по оси X и 200 по оси Y. Теперь узор начинает появляться посередине со всех сторон.

Поздравляем !!!.

Вы можете проверить код решения здесь.

ВЫЗОВ:

Добавьте функцию карты в трехмерную коробку и посмотрите на нее поближе. Сколько узоров вы можете сделать?

Ресурсы:

1-Начало работы с p5.js - книга о программировании для p5.js.

2- Справочник p5.js: Справочные материалы по всем функциям p5.js.

3-байтовое кодирование: веб-сайт с бесплатными учебными ресурсами для детей и начинающих.