Команда разработчиков графического языка 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 имеет все шансы в ближайшее время стать одной из самых популярных библиотек для создания интерактивной графики и анимаций в интернете.

    • +46
    • 23.3k
    • 3
    Нордавинд
    0.00
    Company
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 3

      +6
      hello.p5js.org/ — какой позитивный и одновременно интерактивный ролик :)
        0
        processing.js позволяет писать на js: If you love JavaScript and want to write processing examples with it you can. Тогда в чём разница с p5, кроме того, что оно от разработчиков самого processing?
          0
          По умолчанию все функции p5 доступны непосредственно в глобальном пространстве имён

          Вот это пугает :) А как же работа с другими библиотеками, кодом? Или расчет на то, что другие библиотеки не засоряют глобальное пространство, а вот p5.js будет…

          Only users with full accounts can post comments. Log in, please.