Теперь давайте рассмотрим такую интересную тему как работа с Processing в вебе, в браузере и на сайтах. Прелесть этой темы состоит в том, что можно легко использовать потрясающие графические (и не только) возможности Processing для добавления анимации и интерактивной графики на веб-страницы как в локальном варианте, так и на полноценных «больших» сайтах в интернете.
Варианты работы Processing в вебе
Существует несколько вариантов реализации работы Processing-кода на веб-страницах, например:
- использование специально разработанной для этого технологии p5.js
- непосредственное исполнение Processing-скетчей на веб-страницах при помощи специализированной библиотеки
В этой статье мы рассмотрим оба варианта и дадим практические примеры такой интеграции Processing в HTML страницы.
p5.js
p5.js — это специально разработанная технология для интеграции Processing-кода на веб-ресурсы. Эта технология включает специализированный сайт, обширную документацию, онлайн интерактивный редактор кода, специализированную Javascript библиотеку и т. д. Как и в прочих областях разработки на Processing существует большое сообщество энтузиастов и огромное количество бесплатных примеров кода.
Давайте рассмотрим типичный пример работы с этой технологией и снабдим его подробными пояснениями и комментариями.
Сначала мы заходим на основной сайт системы в раздел Examples (Примеры) и не мудрствуя лукаво выбираем пример Geometries из раздела 3D.
Здесь мы видим 6 3D объектов и код, который их генерирует. Скопируем этот код для дальнейшей работы.
Далее заходим в онлайн редактор системы и видим базовый пример скетча, который можно запустить на выполнение и сразу же увидеть результат.
Поскольку базовый пример нам не нужен, то мы его удаляем и вставляем вместо него ранее скопированный код понравившегося нам примера.
function setup() {
createCanvas(710, 400, WEBGL);
}
function draw() {
background(250);
translate(-240, -100, 0);
normalMaterial();
push();
rotateZ(frameCount * 0.01);
rotateX(frameCount * 0.01);
rotateY(frameCount * 0.01);
plane(70);
pop();
translate(240, 0, 0);
push();
rotateZ(frameCount * 0.01);
rotateX(frameCount * 0.01);
rotateY(frameCount * 0.01);
box(70, 70, 70);
pop();
translate(240, 0, 0);
push();
rotateZ(frameCount * 0.01);
rotateX(frameCount * 0.01);
rotateY(frameCount * 0.01);
cylinder(70, 70);
pop();
translate(-240 * 2, 200, 0);
push();
rotateZ(frameCount * 0.01);
rotateX(frameCount * 0.01);
rotateY(frameCount * 0.01);
cone(70, 70);
pop();
translate(240, 0, 0);
push();
rotateZ(frameCount * 0.01);
rotateX(frameCount * 0.01);
rotateY(frameCount * 0.01);
torus(70, 20);
pop();
translate(240, 0, 0);
push();
rotateZ(frameCount * 0.01);
rotateX(frameCount * 0.01);
rotateY(frameCount * 0.01);
sphere(70);
pop();
}
Тут не происходит ничего сложного, просто задаётся размер холста, цвет фона, и производятся трансформации объектов, которые и порождают 6 различных 3D фигур.
Далее мы редактируем скопированный код так, как нам нравится, в данном случае мы убираем 4 объекта, меняем размер холста и цвет фона.
function setup() {
createCanvas(500, 300, WEBGL);
}
function draw() {
background(240);
translate(-140, -20, 0);
normalMaterial();
push();
rotateZ(frameCount * 0.01);
rotateX(frameCount * 0.01);
rotateY(frameCount * 0.01);
plane(70);
pop();
translate(240, 0, 0);
push();
rotateZ(frameCount * 0.01);
rotateX(frameCount * 0.01);
rotateY(frameCount * 0.01);
box(70, 70, 70);
pop();
}
И сразу же запускаем скетч на выполнение:
Очень удобно: что-то поменяли в скетче и сразу увиден результат. Таким образом мы можем разработать и отладить нужную нам 3D графику и добавить нужную нам интерактивность.
Ок, мы создали свой цифровой шедевр, а что же делать дальше и как поместить его на веб-страницу? Нет ничего проще и сейчас вы сами в этом убедитесь.
Переходим в раздел Download (Загрузка) и скачиваем complete library со всеми нужными нам файлами.
Далее разархивируем скачанный файл и заходим в папку empty-example и меняем содержимое файла sketch.js на код нашего примера.
Это всё! Далее нажимаем мышкой на файл index.html и видим результат:
Наш код с 3D объектами работает на веб-страничке. Таким образом можно разрабатывать любую Processing графику и размещать её на HTML страницах.
Интеграция Processing скетчей на веб-страницы
Теперь давайте рассмотрим второй вариант: интеграцию непосредственно самих Processing скетчей на веб-страницы. Здесь речь идёт о тех скетчах которые вы разрабатываете в Processing IDE на своём компьютере.
В качестве примера мы рассмотрим случай, когда код Processing скетча будет интегрирован в веб-сайт и доступ к его странице будет осуществляться по сети по HTTP протоколу.
Начнём с выбора скетча и запуска его в Processing IDE. В данном случае наш выбор пал на «психоделический» скетч Orecuho (Hypnotic animation).
Вот его полный код:
/*
Hypnotic animation
*/
Bug[] orecuho = new Bug[200];
void setup() {
size(400, 400);
smooth();
noStroke();
fill(255);
for (int i = 0; i < orecuho.length; i++) {
float x = width/2 + cos(i/10.0) * i;
float y = height/2 + sin(i/10.0) * i;
orecuho[i] = new Bug(x, y, 0.05 + i/1000.0);
}
}
void mouseMoved() {
float k1 = map(mouseX, 0, width, 1, 15);
float k2 = map(mouseY, 0, height, 900, 1100);
for (int i = 0; i < orecuho.length; i++) {
float x = width/2 + cos(i/k1) * i;
float y = height/2 + sin(i/k1) * i;
orecuho[i].change(x, y, 0.05 + i/k2);
}
}
void draw() {
background(150, 0, 0);
for (int i = 0; i < orecuho.length; i++) {
orecuho[i].live();
}
}
class Bug {
float x;
float y;
float t;
float speed;
Bug(float tx, float ty, float tspeed) {
x = tx;
y = ty;
t = 0;
speed = tspeed;
}
void change(float tx, float ty, float tspeed) {
x = tx;
y = ty;
speed = tspeed;
}
void live() {
float sz = map(sin(t), -1, 1, 10, 20);
ellipse(x, y, sz, sz);
t = t + speed;
}
}
В данном случае нас интересует только принцип интеграции Processing скетчей на веб-страницы, поэтому мы не будем рассматривать работу самого кода (и оставим это заинтересованному читателю в качестве увлекательного домашнего задания).
Теперь помещаем фал orecuho.pde (сам скетч в неизменном виде) и специализированную библиотеку processing.js в корневую директорию нашего веб-сайта (в данном случае это сайт test.loc) и добавляем немного HTML магии.
Набираем в адресной строке браузера test.loc и видим результат непосредственной работы Processing скетча на веб-сайте.
В процессе переноса скетча в нём был только немного изменён размер холста, чтобы лучше соответствовать пропорциям окна браузера.
Это готовая интерактивная графика, которую можно использовать на любом сайте в качестве «живого» фона или декоративного элемента.
Заключение
Мы рассмотрели два способа интеграции Processing-кода на веб-страницы. Учитывая, без преувеличения, фантастические возможности Processing по созданию интерактивных визуализаций и невероятное количество свободного и талантливого кода, вы можете значительно украсить и расширить функционал ваших интернет-сайтов и встроенных IT систем (об интеграции Processing-кода во встроенные системы и микроконтроллеры мы поговорим в наших следующих статьях).
