Команда разработчиков графического языка Processing представила официальную JavaScript-библиотеку p5.js

Язык Processing, основанный на Java, был написан в 2001 году для создания графики и анимаций. Для использования этого языка в интернете в 2008 году Джон Резиг написал библиотеку Processing.js. Библиотека быстро завоевала популярность и активно развивалась в течение нескольких лет после релиза. Часы на кривых Безье, о которых на Хабре писали несколько дней назад, были созданы именно с помощью Processing.js.

В прошлом году команда разработчиков Processing объявила о планах создать собственную JavaScript-библиотеку. В августе бета-версия p5.js была представлена широкой публике. Библиотека p5.js сильно отличается от Processing.js по архитектуре. Главные отличия — отсутствие необходимости изучать язык Processing и более тесная интеграция с HTML. Processing.js — это транслятор Processing в JavaScript. Основное назначение этой библиотеки — рендеринг файлов PDE с исходным кодом Processing. При использовании этой библиотеки программист может вообще не знать JavaScript. Возможно, в 2008 году это была весьма удачная идея, но сейчас, после нескольких лет бурного развития JavaScript и появления множества графических библиотек сформировалось поколение программистов и дизайнеров, для которых JavaScript намного «роднее» и понятнее Java-подобного Processing.

Пример анимации, созданной с помощью языка Processing

p5.js предоставляет набор функций, объектов и констант для рисования произвольных форм, их преобразования и взаимодействия с пользователем. С возможностями p5.js можно ознакомиться, взглянув на справочник библиотеки. p5.js использует для рендеринга элемент canvas, однако умеет взаимодействовать и с другими элементами HTML, поддерживает работу со звуком и видео. Вживую оценить возможности библиотеки можно по презентации на сайте проекта и по многочисленным примерам там же.

Для тех, кто знает язык Processing, разработчики составили подробное описание основных отличий. Кроме того, несколько примеров сравнения кода Processing и p5 есть в этой статье. Подключить библиотеку можно как с собственного сервера, так и с CDN:

<script src="../p5.min.js"></script>

или

<script src="//cdn.jsdelivr.net/p5.js/0.0.0/p5.min.js"></script>

Каждая отдельная графическая работа в p5.js называется «скетч». По умолчанию все функции p5 доступны непосредственно в глобальном пространстве имён (это, странное на первый взгляд, решение, по-видимому связано с тем, что основная целевая аудитория Processing — дизайнеры и художники, которым бывает трудно объяснить, почему плохо захламлять глобальное пространство и что это вообще такое). Каждый скетч состоит как минимум из двух функций — setup и draw. Вот пример простейшего скетча, который рисует на холсте белые круги под указателем мыши если кнопка не нажата, и чёрные — если нажата:

function setup() {
  createCanvas(640, 480);
}

function draw() {
  if (mouseIsPressed) {
    fill(0);
  } else {
    fill(255);
  }
  ellipse(mouseX, mouseY, 80, 80);
}

В случае, если p5 используется не для создания отдельного скетча, а в составе большой программы, содержащей другие библиотеки или несколько скетчей p5, лучше обернуть каждый отдельный скетч в функцию. В терминологии p5.js это называется «instance mode»:

var sketch = function( s ) {

  s.setup = function() {
    s.createCanvas(640, 480);
  };

  s.draw = function() {
    if (s.mouseIsPressed) {
      s.fill(0);
    } else {
      s.fill(255);
    };
    s.ellipse(s.mouseX, s.mouseY, 80, 80);
  };
};

var myp5 = new p5(sketch);

Судя по активности, с которой ведётся разработка, стремлению не только писать код, но и создавать качественную документацию и примеры, а так же официальному происхождению от Processing, p5.js имеет все шансы в ближайшее время стать одной из самых популярных библиотек для создания интерактивной графики и анимаций в интернете.