Processing.js vs p5.js - Was ist der Unterschied?

Vor ein paar Tagen wurde P5.JS in die Wildnis entlassen. Es handelt sich um eine JavaScript -Bibliothek für visuelle Programmierung, die der Verarbeitungslehre folgt.

nach diesem Beitrag:

Verarbeitung ist eine Umgebung/Programmiersprache, die visuelle, interaktive Anwendungen extrem einfach zu schreiben ist. Es kann für alles verwendet werden, von Kindern, wie man codiert, um wissenschaftliche Daten zu visualisieren.

Es ist die Sprache, die teilweise hinter Zauberer wie folgt liegt:

und dies:

und natürlich alles, was Sie hier finden können.

Aber wenn wir vorher verarbeitete.js hatten, was ist p5.js?

Key Takeaways

• p5.js ist ein direkter JavaScript -Port der Verarbeitungssprache, der darauf abzielt, die Codierung für Künstler, Designer, Pädagogen und Anfänger zugänglich zu machen, während die Verarbeitung ein Konverter ist, der reinen Verarbeitungscode in JavaScript interpretiert.
• p5.js kann mit Addon -Bibliotheken wie P5.dom.js erweitert werden, was die Möglichkeit zum Erstellen und Manipulieren von HTML -Elementen mit P5 hinzufügt, wobei Sie Ihre Skizzen Sliders, Schaltflächen, Formularelemente und vieles mehr hinzufügen.
• In Bezug auf die Leistung scheint die Verarbeitung zu haben. und zurück bis zu 60 im Leerlauf.
• Während P5.JS offiziell von der Processing Foundation unterstützt wird und mit einem Übergangshandbuch für die Verarbeitung von Benutzern ausgestattet ist. 🎜>

zielt

Um Künstler, Designer, Pädagogen und Anfänger die Codierung zugänglich zu machen, und dies für das heutige Web

erneutin mitzunehmen

Es klingt also nach der Verarbeitung selbst. Aber was ist es wirklich ?

Leichter, verwirrter Leser, wir werden es erreichen! Sehen Sie sich zuerst ihre erstaunlich enthusiastische Einführung hier an und kommen Sie dann zurück.

Hat es geklickt? Jetzt bekommen? NEIN? OK. Lassen Sie es uns aufschlüsseln.

Unterschiede zwischen der Verarbeitung.js und p5.js

tl; dr: p5 ist ein direkter JS -Port der Verarbeitungssprache. Processing.js ist ein Konverter, der den reinen Verarbeitungscode im laufenden Fliegen in JS interpretiert. Letzteres verlangt, dass Sie die Verarbeitung lernen, aber nicht JS und umgekehrt.

Live -Kompilierung gegen Sprachübersetzung : processing Die Beispiele, die Sie in Ihrem Browser auf der Website von Processing.js ausgeführt haben, sind in der Tat ein reiner Verarbeitungscode, der live in JS übersetzt wird. Diese Konvertierung ähnelt beispielsweise dem, was Sie erhalten, wenn Sie DART2JS verwenden, um Dart-Code in Browsern ohne integriertes Dart-VM auszuführen. Auf der anderen Seite ist P5 eine vollständige Umwandlung der Verarbeitung in JS -Code - alle Funktionen werden schließlich übersetzt und Sie werden in JavaScript schreiben.

In reverse.js müssen Sie einen Leinwandbereich mit einer Datenquelle definieren, die zu einer PDE -Datei (eine Datei mit Verarbeitungsquellencode) führt. Es gibt auch alternative Ansätze, aber auf den Punkt gebracht, das ist es. In P5 schreiben Sie JS -Code direkt und er wird wie jede andere JS -Datei ausgeführt, die Sie auf Ihrer Website aufnehmen.

Erweiterung : Ein weiterer Unterschied besteht darin, dass P5 mit Addon -Bibliotheken erweitert werden kann. Zum Beispiel fügt die Addition der Bibliothek von P5.dom.js die Option zum Erstellen und Manipulieren von HTML der vorherige Abschnitt.

Beachten Sie, dass von den beiden nur p5 offiziell von der Processing Foundation unterstützt wird und es sogar ein Übergangshandbuch für die Verarbeitung von Benutzern gibt.

Demos

Sehen wir uns einen Demo -Vergleich an, um das volle Kern davon zu erhalten. Ich habe ein Github -Repository erstellt, das die gleiche Demo enthält, die mit jedem Ansatz geschrieben wurde.

<span>git clone https://github.com/Swader/processing</span>

im Verarbeitungsordner haben Sie zwei Unterordner: Verarbeitung und p5. Jedes enthält Demo1- und Demo2 -Subdirektorien, die eine Index.html -Datei enthalten. Dies können Sie in Ihrem Browser und Test ausführen. Die erste Stichprobe stammt von der P5 -Website - eine ständig gezeichnete Ellipse, die schwarz wird, wenn die Maus geklickt wird.

Beachten Sie, dass Processing.js die PDE-Datei mit einer AJAX-Anforderung (über XHR) lädt, sodass Sie einen Cross-Origin-Fehler erhalten, wenn Sie versuchen, sie in Ihrem Browser zu öffnen, indem Sie index.html nur ausgeführt werden. Damit es ordnungsgemäß ausgeführt werden kann, sollten Sie wahrscheinlich einen virtuellen Server einrichten, über den Sie auf die Samples zugreifen können. Das ist am besten mit einer Instanz von Homestead in einer Vagrant -Box - Sie werden in fünf Minuten flach gelaufen.

p5.js

In diesem Fall benötigen wir die Sketch.js -Datei, die unseren Sketch -Code enthält, und die Index.html -Datei, in der sie ausgeführt wird. Der Code von Sketch.js lautet wie folgt:

<span>function setup() {
</span><span>  createCanvas(640, 480);
</span><span>}
</span><span>
</span><span>function draw() {
</span><span>  if (mouseIsPressed) {
</span><span>    fill(0);
</span><span>  } else {
</span><span>    fill(255);
</span><span>  }
</span><span>  ellipse(mouseX, mouseY, 80, 80);
</span><span>}</span>

Die Datei index.html enthält nur Folgendes:

<span><head>
</span><span>  <script language="javascript" src="../p5.js"></script>
</span><span>  <!-- uncomment lines below to include extra p5 libraries -->
</span><span>    <!--<script language="javascript" src="../addons/p5.dom.js"></script>-->
</span><span>  <!--<script language="javascript" src="../addons/p5.sound.js"></script>-->
</span><span>  <script language="javascript" src="sketch.js"></script>
</span><span></head>
</span><span>
</span><span><body>
</span><span></body></span>

processing.js

Für dieses Beispiel benötigen wir eine PDE -Datei mit Verarbeitungscode. In unserem Fall ist das Sketch.pde mit dem folgenden p5-translierten Code:

<span>void setup() {
</span><span>  size(640, 480);
</span><span>}
</span><span>
</span><span>void draw() {
</span><span>  if (mousePressed) {
</span><span>    fill(0);
</span><span>  } else {
</span><span>    fill(255);
</span><span>  }
</span><span>  ellipse(mouseX, mouseY, 80, 80);
</span><span>}</span>

Dann haben wir unsere Index.html -Datei:

<span>git clone https://github.com/Swader/processing</span>

Analyse

Auf den ersten Blick gibt es keinen erkennbaren Unterschied. Beide Proben laufen mit ungefähr der gleichen Geschwindigkeit, führen gut ab und haben eine ähnliche Syntax. Wenn Sie jedoch Google Chrome verwenden und zu Chrome: // Flags wechseln, aktivieren Sie den Bildrate -Zähler (siehe Bild unten), dass das Zeichnen in der Verarbeitung festgelegt wird. Etwa 58 bis 60, während P5 beim Zeichnen bis zu 50 geht und im Leerlauf auf 60 zurückbleibt. Eine weitere interessante Tatsache ist, dass die Verarbeitung die Hardware -Beschleunigung ständig verwendet, selbst wenn sich Ihr Cursor außerhalb des Leinwandbereichs befindet. P5 hingegen macht das Rendering in der Pause, wenn keine Änderungen der Leinwand ausstehend sind (Ihr Cursor liegt außerhalb des Zeichenbereichs), und hellen Sie daher die Last auf, während Sie nicht zeichnen.

Demos 2

Lassen Sie uns jetzt eine weitere Demo durchführen - ein einfacher Partikeleffekt. Dieser Partikelemitter wird in zufälligen Richtungen gravitativ empfindliche Partikel hervorbringen, und wir werden uns die Bildrate noch einmal ansehen. Das Beispiel, das wir verwenden (und übersetzen auf P5), ist dies.

processing.js

Der Code für Sketch.pde ist der aus dem oben verlinkten Beispiel:

<span>function setup() {
</span><span>  createCanvas(640, 480);
</span><span>}
</span><span>
</span><span>function draw() {
</span><span>  if (mouseIsPressed) {
</span><span>    fill(0);
</span><span>  } else {
</span><span>    fill(255);
</span><span>  }
</span><span>  ellipse(mouseX, mouseY, 80, 80);
</span><span>}</span>

p5

Der Code für P5, wenn er aus dem obigen übersetzt wird, lautet wie folgt:

<span><head>
</span><span>  <script language="javascript" src="../p5.js"></script>
</span><span>  <!-- uncomment lines below to include extra p5 libraries -->
</span><span>    <!--<script language="javascript" src="../addons/p5.dom.js"></script>-->
</span><span>  <!--<script language="javascript" src="../addons/p5.sound.js"></script>-->
</span><span>  <script language="javascript" src="sketch.js"></script>
</span><span></head>
</span><span>
</span><span><body>
</span><span></body></span>

Analyse

Wieder sehen wir eine etwas bessere Bildrate bei der Verarbeitung.js. P5 unterhält es bei rund 56, während die Verarbeitung mit 58 zu stehend ist. In beiden Fällen hat sich Processing.js als siegreich erwiesen, leistungsfähig.

Schlussfolgerung

p5js ist ein junges und ehrgeiziges Projekt, das darauf abzielt, die Massen visuelles Programmieren auf eine Weise zu bringen, die zugänglicher ist als die Verarbeitung bisher. Während es derzeit gezwungen ist, in Bezug auf die Funktion zu verblüfft, ist das Team schwierig, um den Rest der Verarbeitungssprache auf dieses JS-Gegenstück zu portieren.

Die Vorteile der Verwendung von p5 gegenüber der Verarbeitung.js sind:

• JS -Code schreiben, mit dem Sie wahrscheinlich bereits vertraut sind
• offiziell unterstützt von der Processing Foundation
• HTML -DOM -Manipulation mit dem DOM -Bibliothek -Addon - Hinzufügen gemeinsamer HTML -Elemente zu Ihren P5 -Skizzen und mehr
• leichter auf den Ressourcen, wenn Sie nicht
zeichnen

Der Vorteil der Verwendung von Verarbeitung.js:

• Sie lernen die Verarbeitung und können sie in Umgebungen verwenden, in denen es schneller und tragbarer für Nicht-Web-Umgebungen
ist
• scheint eine stetigere Bildrate zu haben und leistet in beiden Demos, die wir
versucht haben, besser ab

wir werden diese Bibliothek im Auge behalten und regelmäßig damit herumspielen. Willst du? Lassen Sie uns wissen, wenn Sie einige interessante Beispiele aufschlagen, würden wir gerne darüber schreiben!

häufig gestellte Fragen (FAQs) zur Verarbeitung.js und P5.js

Was sind die Hauptunterschiede zwischen processing.js und p5.js? Sie haben jedoch einige wichtige Unterschiede. Processing.js ist ein Port der ursprünglichen Verarbeitungssprache, die in Java zu JavaScript geschrieben wurde. Es ist so konzipiert, dass es mit vorhandenem Verarbeitungscode kompatibel ist, was bedeutet, dass die Verarbeitungsskizzen nicht modifiziert werden können. Andererseits ist P5.JS eine neue Interpretation der Verarbeitungsprinzipien, die von Grund auf für das Web entwickelt wurden. Es hat eine einfachere, javaScript-ähnliche Syntax und einen moderneren, webfreundlicheren Ansatz für die Handhabung von Medien und Interaktivität. , P5.JS wird im Allgemeinen als leichter zu lernen als processing.js, insbesondere für Anfänger, angesehen. Dies liegt daran, dass P5.JS eine einfachere, intuitivere Syntax hat, die näher am Standard -JavaScript liegt. Es hat auch einen benutzerfreundlicheren Ansatz für die Umgang mit Medien und Interaktivität mit integrierten Funktionen für Dinge wie Maus- und Tastatureingabe, Bild und Schalllast sowie Leinwandzeichnung. Darüber hinaus verfügt P5.JS über eine sehr aktive Gemeinschaft und eine Fülle von Lernressourcen, einschließlich Tutorials, Beispielen und einem freundlichen Forum.

Während es technisch gesehen möglich ist, sowohl Processing.js als auch P5.Js im selben Projekt zu verwenden, wird es im Allgemeinen nicht empfohlen. Dies liegt daran, dass die beiden Bibliotheken unterschiedliche Syntaxe und Ansätze für die Behandlung von Medien und Interaktivität haben, was zu Verwirrungs- und Kompatibilitätsproblemen führen kann. Stattdessen ist es normalerweise besser, eine Bibliothek auszuwählen und für die Dauer des Projekts dabei zu bleiben. Procing.js ist seine Kompatibilität mit vorhandenem Verarbeitungscode. Wenn Sie eine Verarbeitungsskizze haben, die Sie im Web ausführen möchten, können Sie dies mit minimalen Änderungen mithilfe von Processing.js durchführen. Darüber hinaus hat Processing.js eine traditionellere, javaähnliche Syntax, die einigen Programmierern möglicherweise besser bekannt ist. Mehrere Vorteile gegenüber der Verarbeitung.js. Erstens hat es eine einfachere, intuitivere Syntax, die näher am Standard -JavaScript liegt, was das Lernen und die Verwendung erleichtert. Zweitens hat es einen moderneren, weberfreundlicheren Ansatz für die Umgang mit Medien und Interaktivität mit integrierten Funktionen für Dinge wie Maus- und Tastatureingabe-, Bild- und Sound-Lade- und Leinwandzeichnung. Schließlich hat P5.JS eine sehr aktive Gemeinschaft und eine Fülle von Lernressourcen zur Verfügung, was es zu einer guten Wahl für Anfänger und erfahrene Programmierer macht.

Kann ich Processing.js oder P5.Js für kommerzielle Projekte verwenden? Es ist jedoch immer eine gute Idee, die spezifischen Lizenzbedingungen einer Bibliothek oder eines in einem kommerziellen Projekt verwendeten Tools zu überprüfen, um sicherzustellen, dass Sie die Einhaltung von Compliance haben. JS für mein Projekt? Wenn Sie vorhandenen Verarbeitungscode haben, den Sie im Web ausführen möchten oder wenn Sie eine traditionellere Java-ähnliche Syntax bevorzugen, ist die Verarbeitung.js möglicherweise die bessere Wahl. Wenn Sie dagegen ein neues Projekt von Grund auf neu starten oder wenn Sie eine einfachere, javaScript-ähnliche Syntax und einen moderneren, webfreundlicheren Ansatz für die Behandlung von Medien und Interaktivität bevorzugen, können P5.Js das sein Bessere Wahl. sanft. Die Leistung einer JavaScript -Bibliothek kann jedoch durch eine Vielzahl von Faktoren beeinflusst werden, einschließlich der Komplexität des Codes, der Funktionen des Geräts, das den Code ausführt, und der Effizienz der JavaScript -Engine im Webbrowser. Daher ist es immer eine gute Idee, Ihren Code auf einer Vielzahl von Geräten und Browsern zu testen, um eine optimale Leistung zu gewährleisten.

Das obige ist der detaillierte Inhalt vonProcessing.js vs p5.js - Was ist der Unterschied?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!