Наложение 2d-текстуры на 3d-объект с использованием p5.js (часть 2 — наложение паттерна на куб)

Это вторая часть проекта, в которой мы накладываем динамический 2d-паттерн на 3d-объект. Вы можете начать с первой части (Часть 1) или просто скопировать итоговый код несколькими абзацами ниже.

Некоторое время назад я создал паттерн, который генерировался при помощи нескольких строк кода в библиотеке p5.js.

p5.js — это библиотека для Javascript, созданная в 2014 году. Ее основная цель — стать окном в мир программирования для дизайнеров, художников, учителей и прочих представителей творческих профессий. Он поддерживает и анимацию, и схемы, легко переводится в веб-формат.

Сейчас я расскажу, как сделать финальную часть — наложить паттерн на 3d-объект (в данном случае — куб).

Для начала работы с нуля надо создать проект в онлайн-редакторе editor.p5js.org Мы продолжаем изменять следующий код:

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.06
  a = a + 0.3
    
}

Чтобы сделать наш холст объемным, нам надо добавить параметр WEBGL в функцию, создающую наш канвас: createCanvas(400,400,WEBGL). Поскольку точка отсчета для такого объекта и так находится в центре, нам можно (и нужно!) удалить translate(200,200), который выполнял корректировку при плоском изображении.

Чтобы разнообразить цветовую гамму и сделать более эффектное изображение, давайте заменим параметры fill() на наши переменные r,a,c — теперь с каждой новой итерацией бесконечного цикла draw() цвет эллипсов будет чуть-чуть меняться. Также давайте добавим немного расстояния между кругами и углы наклона, изменив скорость изменения переменных c и a.

  с = с + 0.06
  a = a + 0.3

В качестве последнего улучшения, давайте добавим push() перед нашим кодом паттерна и pop() после. Обрамление таким способом делает код изолированным — на него не будут влиять другие объекты, которые мы будем создавать.

let r=10
let a=0
let c=20

function setup() {
  background(220);
  createCanvas(400, 400, WEBGL);
  
}

function draw() {
  push()
  let x = r+c*cos(a);
  let y = r+c*sin(a);
  fill(r,a,c);
  ellipse (x,y,10,10);
  c = c + 0.09
  a = a + 0.8
  pop()
}

В итоге у нас получится что-то такое. Самое время создать куб.

В той же функции draw(), после pop() добавим код коробки:

  push()
  box(200)
  pop()

Сейчас коробка c размером 200 повернута к нам только одной из сторон и выглядит как просто квадрат. Чтобы оценить объем, нам надо ее развернуть. Для этого в переменные верхнего уровня к уже имеющимся там r, a,c добавим четвертую — angle с дефолтным значением 0. Чтобы этот параметр влиял на наш куб, после второго push(), но до создания коробки. добавим три функции: rotateX(), rotateY(), rotateZ() с параметром angle для каждого.

Логично, что объект с углом поворота в 0 градусов крутиться не будет, поэтому добавляем изменение значения переменной angle на 0.003 (для начала будет достаточно). В итоге мы получаем такой код:

let r=10
let a=0
let c=20
let angle = 0

function setup() {
  background(220);
  createCanvas(400, 400, WEBGL);
  
}

function draw() {
  push()
  let x = r+c*cos(a);
  let y = r+c*sin(a);
  fill(r,a,c);
  ellipse (x,y,10,10);
  c = c + 0.09
  a = a + 0.8
  pop()
  
  push()
  rotateX(angle), 
  rotateY(angle), 
  rotateZ(angle)
  box(200)
  angle = angle + 0.003
  pop()
}

Поскольку наш фон создается только один раз (он находится в setup) — мы ловим первый баг наш куб стирает фон при повороте.



Чтобы его пофиксить, можно просто перенести background(200) внутрь функции draw() Однако теперь мы ловим другую проблему — наши круги начинают пропадать, как они это делали в начале, поскольку теперь они затираются с каждым новым циклом и возникают лишь на долю секунды из небытия.

Чтобы решить эту проблему нам необходимо создать новую переменную (например, art) без дефолтного значения в самом начале рядом с другими переменными верхнего уровня.

Внутри функции setup() мы приравниваем ее к функции createGraphics(400,400), чтобы потом использовать ее в других местах.

Убедитесь, что вы задаете те же параметры, что и при создании Canvas, чтобы соблюсти размерность.

Теперь внутри кода паттерна мы добавляем переменную art через точку к эллипсу и его свойствам (таким как fill() и др, если вы их создавали).

art.fill(r,a,c);
  art.ellipse (x,y,10,10);

После этого осталось наложить паттерн на куб в качестве текстуры. Для этого уже внутри кода куба-коробки добавляем свойство texture(art). Логика следующая: мы создаем сущность графического изолированного объекта art, который вызывает функции создания паттерна с заданными свойствами, и после мы отдаем art в качестве параметра свойства текстура для куба.

let r=10
let a=0
let c=20
let angle = 0
let art

function setup() {
  createCanvas(400, 400, WEBGL);
  art = createGraphics(400,400);
}

function draw() {
  background(220);
  push()
  let x = r+c*cos(a);
  let y = r+c*sin(a);
  art.fill(r,a,c);
  art.ellipse (x,y,10,10);
  c = c + 0.09
  a = a + 0.8
  pop()
  
  push()
  texture(art)
  rotateX(angle), 
  rotateY(angle), 
  rotateZ(angle)
  box(200)
  angle = angle + 0.003
  pop()
}

Осталось решить последнюю проблему: наш паттерн начинает проявляться с углов куба. Чтобы начать с центра, мы можем просто прибавить половину ширины и длины куба к параметру x и y, чтобы сместить центр старта отрисовки паттерна.

art.ellipse (x+200,y+200,10,10);

Если вы хотите разнообразить паттерн — можете попробовать просто изменить параметры или даже добавить несколько пересекающихся узоров, например, из другого проекта — Как воссоздать эффект муарового узора в библиотеке p5.js для новичка (быстрый гайд)

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

→ Ссылка на итоги проекта