Пару дней назад P5.js был выпущен в дикую природу. Это библиотека JavaScript для визуального программирования, которая следует доктрине обработки.
Согласно этому сообщению :
Обработка — это среда / язык программирования, призванный сделать наглядные интерактивные приложения чрезвычайно простыми в написании. Он может быть использован для всего: от обучения детей программированию до визуализации научных данных.
Это язык, который частично стоит за волшебством, вот так:
и это:
и, конечно же, все, что вы можете найти здесь .
Но, если бы у нас был processing.js раньше, что такое P5.js?
Что такое P5.js?
P5.js — библиотека JavaScript
сделать кодирование доступным для художников, дизайнеров, педагогов и начинающих, и переосмыслить это для современной сети
Итак, это звучит как сама обработка. Но что это на самом деле ?
Облегчи, запутанный читатель, мы к этому доберемся! Сначала посмотрите на их удивительно восторженное вступление, а затем возвращайтесь.
Это щелкнуло? Получи это сейчас? Нет? Ok. Давайте разберемся с этим.
Различия между Processing.js и P5.js
TL; DR: P5 — прямой порт JS языка обработки. Processing.js — это конвертер, который на лету интерпретирует чистый код обработки в JS. Последнее требует, чтобы вы изучали обработку, но не JS, и наоборот.
Живая компиляция vs Language Translation : Processing.js — это библиотека, которая берет необработанный код обработки (который похож на Java, с типами и всем) и конвертирует его в JavaScript на лету. Примеры, которые вы видите в своем браузере на веб-сайте Processing.js , на самом деле представляют собой чистый код обработки, переведенный в реальном времени на JS. Это преобразование, например, похоже на то, что вы получаете, когда используете Dart2js для запуска кода Dart в браузерах без встроенной виртуальной машины Dart. С другой стороны, P5 — это полное преобразование Processing в код JS — все функции в конечном итоге будут переведены, и вы будете писать на JavaScript.
В Processing.js необходимо определить область холста с источником данных, который ведет к файлу PDE (файлу с исходным кодом обработки). Есть и альтернативные подходы, но в двух словах, вот и все. В P5 вы пишете код JS напрямую, и он исполняется так же, как любой другой файл JS, который вы включаете на свой веб-сайт.
Расширение : Другое отличие состоит в том, что P5 может быть расширен за счет дополнительных библиотек . Например, дополнение библиотеки p5.dom.js добавляет возможность создания и управления HTML-элементами с помощью P5, добавления ползунков, кнопок, элементов формы и многого другого в ваши эскизы — так же, как это сделали демонстраторы в видео Hello, с которым мы связались в предыдущий раздел.
Обратите внимание на то, что из этих двух приложений только Фонд поддержки официально поддерживает P5, и здесь есть даже руководство по переходу для пользователей обработки.
демос
Давайте посмотрим демо-сравнение, чтобы получить полную суть этого. Я создал Github-репозиторий, содержащий ту же демонстрацию, написанную для каждого подхода.
git clone https://github.com/Swader/processing В папке processingprocessingp5 Каждый будет содержать подкаталоги demo1demo2index.html Это то, что вы можете запустить в своем браузере и протестировать. Первый пример взят с веб-сайта P5 — непрерывно нарисованный эллипс, который становится черным при щелчке мыши.
Обратите внимание, что Processing.js загружает файл pdeindex.html Чтобы заставить его работать должным образом, вам, вероятно, следует настроить виртуальный сервер для доступа к образцам. Лучше всего это сделать с экземпляром Homestead Improved в коробке Vagrant — вы заработаете пять минут подряд.
P5.js
В этом случае нам нужен файл sketch.jsindex.html Код sketch.js
function setup() {
createCanvas(640, 480);
}
function draw() {
if (mouseIsPressed) {
fill(0);
} else {
fill(255);
}
ellipse(mouseX, mouseY, 80, 80);
}
Файл index.html
<head>
<script language="javascript" src="../p5.js"></script>
<!-- uncomment lines below to include extra p5 libraries -->
<!--<script language="javascript" src="../addons/p5.dom.js"></script>-->
<!--<script language="javascript" src="../addons/p5.sound.js"></script>-->
<script language="javascript" src="sketch.js"></script>
</head>
<body>
</body>
Processing.js
Для этого примера нам нужен файл pde В нашем случае это sketch.pde
void setup() {
size(640, 480);
}
void draw() {
if (mousePressed) {
fill(0);
} else {
fill(255);
}
ellipse(mouseX, mouseY, 80, 80);
}
Затем у нас есть файл index.html
<head>
<script language="javascript" src="../processing.min.js"></script>
</head>
<body>
<canvas data-processing-sources="sketch.pde"></canvas>
</body>
Анализ
На первый взгляд, заметной разницы нет. Оба образца работают примерно с одинаковой скоростью, работают хорошо и имеют одинаковый синтаксис. Однако, если вы используете Google Chrome и перейдете к chrome://flags Еще один интересный факт заключается в том, что при обработке все время используется аппаратное ускорение, даже когда курсор находится за пределами области холста. P5, с другой стороны, приостанавливает рендеринг, если не ожидают изменения холста (ваш курсор находится за пределами области рисования), следовательно, облегчает нагрузку, не рисуя.
Демос 2
Давайте сделаем еще одну демонстрацию — эффект простых частиц. Этот эмиттер частиц будет порождать гравитационно чувствительные частицы в случайных направлениях, и мы еще раз посмотрим на частоту кадров. Вот пример, который мы будем использовать (и переведем на P5):
Processing.js
Код для sketch.pde
ParticleSystem ps;
void setup() {
size(640,360);
ps = new ParticleSystem(new PVector(width/2,50));
}
void draw() {
background(0);
ps.addParticle();
ps.run();
}
// A simple Particle class
class Particle {
PVector location;
PVector velocity;
PVector acceleration;
float lifespan;
Particle(PVector l) {
acceleration = new PVector(0,0.05);
velocity = new PVector(random(-1,1),random(-2,0));
location = l.get();
lifespan = 255.0;
}
void run() {
update();
display();
}
// Method to update location
void update() {
velocity.add(acceleration);
location.add(velocity);
lifespan -= 1.0;
}
// Method to display
void display() {
stroke(255,lifespan);
fill(255,lifespan);
ellipse(location.x,location.y,8,8);
}
// Is the particle still useful?
boolean isDead() {
if (lifespan < 0.0) {
return true;
} else {
return false;
}
}
}
// A class to describe a group of Particles
// An ArrayList is used to manage the list of Particles
class ParticleSystem {
ArrayList<Particle> particles;
PVector origin;
ParticleSystem(PVector location) {
origin = location.get();
particles = new ArrayList<Particle>();
}
void addParticle() {
particles.add(new Particle(origin));
}
void run() {
for (int i = particles.size()-1; i >= 0; i--) {
Particle p = particles.get(i);
p.run();
if (p.isDead()) {
particles.remove(i);
}
}
}
}
P5
Код для P5 при переводе из приведенного выше выглядит следующим образом:
var ps;
function setup() {
createCanvas(640, 360);
ps = new ParticleSystem(new p5.Vector(width/2, 50));
}
function draw() {
background(0);
ps.addParticle();
ps.run();
}
function Particle(lvector) {
this.location = lvector.get();
this.acceleration = new p5.Vector(0,0.05);
var random1 = Math.random() * ((Math.random() > 0.5) ? -1 : 1);
var random2 = Math.random() - ((Math.random() > 0.5) ? 1 : 2);
this.velocity = new p5.Vector(random1, random2);
this.lifespan = 255.0;
}
Particle.prototype.run = function() {
this.update();
this.display();
}
Particle.prototype.update = function() {
this.velocity.add(this.acceleration);
this.location.add(this.velocity);
this.lifespan -= 1.0;
}
Particle.prototype.display = function() {
stroke(255, this.lifespan);
fill(255, this.lifespan);
ellipse(this.location.x, this.location.y, 8, 8);
}
Particle.prototype.isDead = function() {
return (this.lifespan < 0);
}
function ParticleSystem(location) {
this.origin = location.get();
this.particles = [];
}
ParticleSystem.prototype.addParticle = function() {
this.particles.push(new Particle(this.origin));
}
ParticleSystem.prototype.run = function() {
var p;
for (var i = this.particles.length - 1; i >= 0; i--) {
p = this.particles[i];
p.run();
if (p.isDead()) {
this.particles.splice(i, 1);
}
}
}
Анализ
Еще раз, мы видим немного лучшую частоту кадров с Processing.js. P5 поддерживает его на уровне около 56, тогда как Processing.js, похоже, стоит около 58 или около того. В обоих случаях Processing.js показал себя победителем в плане производительности.
Вывод
P5js — это молодой и амбициозный проект, целью которого является доведение визуального программирования до широких масс таким способом, который был бы более доступным, чем обработка до сих пор. В то время как в настоящее время он вынужден быть несколько тупым в функциональном отношении, команда усердно работает над переносом оставшейся части языка обработки на этот аналог JS.
Преимущества использования P5 перед Processing.js:
- Написание кода JS, с которым вы, вероятно, уже знакомы
- Официально поддерживается Фондом обработки
- Управление HTML DOM с помощью дополнения библиотеки DOM — добавление общих элементов HTML в эскизы P5 и многое другое
- Легче на ресурсах, когда не рисует
Преимущество использования Processing.js:
- Вы изучаете обработку и можете использовать ее в средах, где она быстрее и более переносима в другие среды
- Кажется, у нас более стабильная частота кадров, и она лучше работает в обеих демонстрациях, которые мы пробовали.
Мы будем следить за этой библиотекой и регулярно играть с ней. Вы будете? Дайте нам знать, если вы соберете несколько интересных примеров, мы с удовольствием напишем о них!