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. ??>

Was ist p5.js?

p5.js ist eine JavaScript -Bibliothek, die

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.

Ja, sowohl Processing Es ist jedoch wichtig, potenzielle Kompatibilit?tsprobleme zu bewusst und Ihren Code gründlich zu testen, um sicherzustellen, dass alles wie erwartet funktioniert. > Sowohl processing.js als auch p5.js haben eine Fülle von Lernressourcen zur Verfügung. Für die Verarbeitung.js k?nnen Sie mit der offiziellen Verarbeitungswebsite beginnen, die Tutorials, Beispiele und einen Referenzhandbuch verfügt. Für P5.JS k?nnen Sie mit der offiziellen P5.JS -Website beginnen, die Tutorials, Beispiele, einen Referenzleitfaden und ein freundliches Forum verfügt. Darüber hinaus gibt es viele Online -Tutorials, Videos und Kurse für beide Bibliotheken.

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!