[Веб-дизайн, JavaScript, Графический дизайн, Дизайн, Processing] Наложение 2d-текстуры на 3d-объект с использованием p5.js (часть 1 — создание паттерна)

Автор Сообщение
news_bot ®

Стаж: 2 года 7 месяцев
Сообщений: 44557

Создавать темы news_bot ® написал(а)
03-Июн-2020 22:32


Наложение плоского рисунка или узора на объемный объект — это всегда нетрививальная задача, а если при этом хочется сделать это с какой-то анимацией, сложность возрастает в разы.
При этом есть достаточно простая библиотека p5.js, с помощью которой можно создать сложные эффектные паттерны буквально нескольким десятком строк кода. Я недавно создавал такой проект и теперь хочу привести пример.
Проще всего начать с создания нового проекта в онлайн редакторе editor.p5js.org
По умолчанию новый проект имеет следующий вид:
function setup() {
  createCanvas(400, 400);
}
function draw() {
  background(220);
}

function setup() — задает функцию, которая выполняется только раз
function draw() — повторяется в бесконечном цикле
Начинаем мы с создания 2D радиального узора, который потом наложим на наш куб. При его создании мы сначала будем использовать Полярные координаты, а уже потом переведем их в привычные большинству декартовые координаты вида x,y.
Что важно понимать: полярная координата точки определяется двумя числами:
r — расстояние от исходной точки (например, центра холста) до целевой точки.
a — угол воображаемой линии, относительно исходной точки, на которой находится целевая точка
Таким образом первый параметр может меняться от 0 до бесконечности, а второй — от 0 до 360.
Прелесть такого подхода в том, что он позволяет чертить достаточно сложные узоры буквально одной формулой.

Полярная роза задана уравнением r(φ )=2\sin φ

Для создания переменных давайте в самом начале проекта добавим две переменные: первая ответственная за расстояние от центра и вторая за угол: let r=10 let a=0
После чего в функцию draw(), которая выполняется в бесконечном цикле, добавим изменение переменной: a = a + 0.4
В итоге у вас получится следующий код:
let r =10
let a =0
function setup() {
  createCanvas(400, 400);
}
function draw() {
  background(220);
    a = a + 0.4
}

Теперь приступим к переводу координат в привычные нам Декартовые координаты x y. Если хотите понимать, что именно здесь происходит в коде, то лучше почитать учебник по тригонометрии, но поскольку для результата это не так важно, можно просто вставить код в ту же функцию draw():
let x = r*cos(a)
let y = r*sin(a)

Чтобы наконец увидеть итоги наших математических вычислений, нам надо сделать две вещи:
— закрасить объекты цветом (можно использовать внутренний словарь цветов или указать привычный код формата RGB — три числа)
— задать форму распределения точек. Например, эллипс.
function draw() {
  background(220);
  let x = r*cos(a);
  let y = r*sin(a);
  fill(255,0,0);
  ellipse (x,y,10,10);
  r = r + 0.4
}


Параметры эллипса (положение по X, положение по Y, диаметр по X, диаметр по Y) мы задаем при помощи переменных по x и y. Поскольку переменная x зависит от переменной r, которая в нашем цикле постоянно увеличивается на 0.4, тот красный кружок, который мы увидим будет постоянно двигаться в левом верхнем углу.
Чтобы переместить точку отсчета в центр, добавим функцию translate(200,200) перед переменной x. Теперь круг будет появляться по середине нашего холста.
И давайте решим еще одну проблему — сейчас все круги, которые появляются, стираются с каждым новым циклом. Чтобы выйти из этого замкнутого круга, нам нужно вынести создание нашего canvas() за пределы функции draw() и перенести ее в функцию setup(), которая отвечает за создание окружения.

После этого изменения мы увидим что-то похожее на кружок загрузки. Главная проблема — что сейчас они расположены очень тесно к друг другу. Давайте добавим немного пространства, задав переменную верхнего порядка С со значением 20 и добавив ее изменение с каждым циклом на 0.6 (рядом с a). Ну и внедрим ее в наши тригонометрические формулы: x=r+c*cos(a) and y=r+c*sin(a)
let r=10
let a=0
let с=20
function setup() {
  background(220);
  createCanvas(400, 400);
}
function draw() {
translate(200,200)
  let x = r+с*cos(a);
  let y = r+с*sin(a);
  fill(255,0,0);
  ellipse (x,y,10,10);
  с = с + 0.6
  a = a + 0.4
}


Кажется, что-то начинает вырисовываться. Финально давайте уменьшим значение a до 0.3, с до 0.06
с = с + 0.06
a = a + 0.3


Заготовка для паттерна готова, время добавлять его на объем. О том, как это делать, я напишу в следующей части.
Здесь будет ссылка на часть 2: холдер

Идея и часть исходного кода взята из статьи Nazia Fakhruddin:Creating 2D texture on a 3D shape in p5.js
Ссылка на итоги проекта: вот

===========
Источник:
habr.com
===========

Похожие новости: Теги для поиска: #_vebdizajn (Веб-дизайн), #_javascript, #_graficheskij_dizajn (Графический дизайн), #_dizajn (Дизайн), #_processing, #_processing, #_p5.js, #_generative_art, #_generative_design, #_dizajn (дизайн), #_javascript, #_vebdizajn (
Веб-дизайн
)
, #_javascript, #_graficheskij_dizajn (
Графический дизайн
)
, #_dizajn (
Дизайн
)
, #_processing
Профиль  ЛС 
Показать сообщения:     

Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы

Текущее время: 21-Сен 07:54
Часовой пояс: UTC + 5