- PVSM.RU - https://www.pvsm.ru -
Язык Processing [1], основанный на Java, был написан в 2001 году для создания графики и анимаций. Для использования этого языка в интернете в 2008 году Джон Резиг написал библиотеку Processing.js [2]. Библиотека быстро завоевала популярность и активно развивалась в течение нескольких лет после релиза. Часы на кривых Безье [3], о которых на Хабре писали несколько дней назад, были созданы именно с помощью Processing.js.
В прошлом году команда разработчиков Processing объявила о планах создать собственную JavaScript-библиотеку. В августе бета-версия p5.js была представлена широкой публике. Библиотека p5.js [4] сильно отличается от Processing.js по архитектуре. Главные отличия — отсутствие необходимости изучать язык Processing и более тесная интеграция с HTML. Processing.js — это транслятор Processing в JavaScript. Основное назначение этой библиотеки — рендеринг файлов PDE с исходным кодом Processing. При использовании этой библиотеки программист может вообще не знать JavaScript. Возможно, в 2008 году это была весьма удачная идея, но сейчас, после нескольких лет бурного развития JavaScript и появления множества графических библиотек сформировалось поколение программистов и дизайнеров, для которых JavaScript намного «роднее» и понятнее Java-подобного Processing.
Пример анимации, созданной с помощью языка Processing
p5.js предоставляет набор функций, объектов и констант для рисования произвольных форм, их преобразования и взаимодействия с пользователем. С возможностями p5.js можно ознакомиться, взглянув на справочник библиотеки [5]. p5.js использует для рендеринга элемент canvas, однако умеет взаимодействовать и с другими элементами HTML, поддерживает работу со звуком и видео. Вживую оценить возможности библиотеки можно по презентации [6] на сайте проекта и по многочисленным примерам [7] там же.
Для тех, кто знает язык Processing, разработчики составили подробное описание основных отличий [8]. Кроме того, несколько примеров сравнения кода Processing и p5 есть в этой статье [9]. Подключить библиотеку можно как с собственного сервера, так и с 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 имеет все шансы в ближайшее время стать одной из самых популярных библиотек для создания интерактивной графики и анимаций в интернете.
Автор: ilya42
Источник [10]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/69889
Ссылки в тексте:
[1] Язык Processing: http://habrahabr.ru/post/58314//
[2] Processing.js: http://habrahabr.ru/post/59402/
[3] Часы на кривых Безье: http://habrahabr.ru/post/236455/
[4] Библиотека p5.js: http://p5js.org/
[5] справочник библиотеки: http://p5js.org/reference/
[6] презентации: http://hello.p5js.org/
[7] многочисленным примерам: http://p5js.org/learn/
[8] описание основных отличий: https://github.com/lmccart/p5.js/wiki/Processing-transition
[9] в этой статье: http://www.sitepoint.com/processing-js-vs-p5-js-whats-difference/
[10] Источник: http://habrahabr.ru/post/236621/
Нажмите здесь для печати.