logo
+7 (495) 997-37-74
Москва, ул.Международная, 15

Работа Processing в браузере и на сайте

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

P. S.

Поскольку мы рассказываем об интеграции Processing-кода и интерактивных анимаций на страницы сайтов, то почему бы нам не интегрировать рассматриваемый пример прямо на эту страницу? Нет проблем:

Ссылки по теме

Система программирования Processing

Processing и Ардуино. Работа по Serial

Сетевые возможности Processing

Работа Processing в браузере и на сайте