Теперь давайте рассмотрим такую интересную тему как работа с 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-кода во встроенные системы и микроконтроллеры мы поговорим в наших следующих статьях).