Il y a quelques jours, P5.JS a été libéré dans la nature. C'est une bibliothèque JavaScript pour la programmation visuelle qui suit la doctrine de traitement.

Selon ce post:

Le traitement est un langage environnement / programmation qui est destiné à rendre les applications interactives visuelles extrêmement faciles à écrire. Il peut être utilisé pour tout, de l'enseignement aux enfants à coder à la visualisation des données scientifiques.

C'est la langue qui est en partie derrière la magie comme ceci:

et ceci:

Et, bien s?r, tout ce que vous pouvez trouver ici.

mais, si nous avions déjà du traitement.js, qu'est-ce que P5.js?

Les plats clés

• p5.js est un port JavaScript direct de la langue de traitement, visant à rendre le codage accessible pour les artistes, les concepteurs, les éducateurs et les débutants, tandis que Processing.js est un convertisseur qui interprète le code de traitement pur en JavaScript à la volée.
• p5.js peuvent être étendus avec des bibliothèques addon, telles que p5.dom.js, qui ajoute la possibilité de créer et de manipuler des éléments HTML avec P5, ajoutant des curseurs, des boutons, des éléments de forme et bien plus encore à vos croquis.
• En termes de performances, le traitement.js semble avoir une fréquence d'images plus stable et fonctionne mieux dans les deux démos essayées dans le texte, en maintenant une fréquence d'images régulière d'environ 58 à 60 ans, tandis que P5 va aussi bas que 50 lors du dessin, et sauvegarder jusqu'à 60 quand on soit inactif.
• Alors que P5.js est officiellement pris en charge par la Fondation Traitement et est livré avec un manuel de transition pour le traitement des utilisateurs, le traitement.js vous permet d'apprendre le traitement et de l'utiliser dans des environnements où il est plus rapide et plus portable pour les environnements non Web.

Qu'est-ce que P5.js?

p5.js est une bibliothèque JavaScript visant

pour rendre le codage accessible pour les artistes, les designers, les éducateurs et les débutants, et réinterprète ceci pour le Web aujourd'hui

Donc, cela ressemble à un traitement lui-même. Mais qu'est-ce que c'est vraiment ?

faciliter le lecteur confus, nous y arriverons! Tout d'abord, regardez leur introduction incroyablement enthousiaste ici, puis revenez.

A-t-il cliqué? L'obtenir maintenant? Non? D'accord. Décomposons-le.

Différences entre le traitement.js et p5.js

TL; DR: P5 est un port JS direct de la langue de traitement. Processing.js est un convertisseur qui interprète le code de traitement pur en JS à la volée. Ce dernier vous oblige à apprendre le traitement, mais pas JS, et vice versa.

Compilation en direct vs traduction linguistique : Processing.js est une bibliothèque qui prend du code de traitement brut (qui est similaire à Java, avec des types et tout) et le convertit en JavaScript à la volée. Les exemples que vous voyez en cours d'exécution dans votre navigateur sur le site Web.js sont, en fait, du code de traitement pur traduit en direct en js. Cette conversion est, par exemple, similaire à ce que vous obtenez lorsque vous utilisez DART2JS pour exécuter le code DART dans les navigateurs sans machine virtuelle DART intégrée. D'un autre c?té, P5 est une conversion complète du traitement en code JS - toutes les fonctions seront finalement traduites, et vous écrirez en JavaScript.

Dans Processing.js, vous devez définir une zone de canevas avec une source de données qui conduit à un fichier PDE (un fichier avec le code source de traitement). Il existe également des approches alternatives, mais en un mot, c'est tout. En P5, vous écrivez directement le code JS, et il est exécuté comme tout autre fichier JS que vous incluez sur votre site Web.

Extension : Une autre différence est que P5 peut être étendu avec les bibliothèques addon. Par exemple, l'ajout de la bibliothèque p5.dom.js ajoute la possibilité de créer et de manipuler des éléments HTML avec P5, en ajoutant des curseurs, des boutons, des éléments de forme et bien plus encore à vos croquis - tout comme les manifestants l'ont fait dans la vidéo Hello la section précédente.

Notez que des deux, seul P5 est officiellement soutenu par la Fondation Traitement et il existe même un manuel de transition pour le traitement des utilisateurs ici.

démos

Voyons une comparaison de démonstration pour en obtenir toute l'essentiel. J'ai fait un référentiel GitHub contenant la même démo écrite avec chaque approche.

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

Dans le dossier de traitement, vous avez deux sous-dossiers: le traitement et P5. Chacun contiendra des sous-répertoires Demo1 et Demo2, qui contiennent un fichier index.html. C'est ce que vous pouvez exécuter dans votre navigateur et tester. Le premier échantillon provient du site Web P5 - une ellipse continuellement dessinée qui devient noir lorsque la souris est cliquée.

Notez que Processing.js charge le fichier PDE avec une demande AJAX (via XHR), vous obtiendrez donc une erreur d'origine croisée si vous essayez de l'ouvrir dans votre navigateur en exécutant simplement index.html. Pour que le faire fonctionner correctement, vous devriez probablement configurer un serveur virtuel à travers lequel accéder aux échantillons. Cela est mieux fait avec une instance de propriété familiale améliorée dans une bo?te vagabonde - vous serez opérationnel en cinq minutes à plat.

p5.js

Dans ce cas, nous avons besoin du fichier sketch.js qui contient notre code de croquis et le fichier index.html dans lequel il s'exécute. Le code sketch.js est le suivant:

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

Le fichier index.html ne contient que ceci:

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

traitement.js

Pour cet exemple, nous avons besoin d'un fichier PDE avec le code de traitement. Dans notre cas, c'est Sketch.pde avec le code traduit suivant P5:

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

Ensuite, nous avons notre fichier index.html:

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

Analyse

à première vue, il n'y a pas de différence perceptible. Les deux échantillons fonctionnent à peu près à la même vitesse, fonctionnent bien et ont une syntaxe similaire. Cependant, si vous utilisez Google Chrome et accédez à Chrome: // Flags, puis activez le compteur de fréquence d'images (voir l'image ci-dessous), vous remarquerez que le dessin dans la toile Processing.js maintient une fréquence d'images stable de Environ 58 à 60, tandis que P5 va aussi bas que 50 lors du dessin, et sauvegardez jusqu'à 60 lorsqu'il est inactif. Un autre fait intéressant est que le traitement utilise l'accélération matérielle tout le temps , même lorsque votre curseur est à l'extérieur de la zone de toile. P5, en revanche, pause le rendu si aucune modification de la toile n'est en attente (votre curseur est en dehors de la zone de dessin), d'où l'alluence de la charge sans dessin.

démos 2

faisons maintenant une autre démo - un simple effet de particules. Cet émetteur de particules engendrera des particules sensibles gravitationnelles dans des directions aléatoires, et nous allons examiner la fréquence d'images. L'exemple que nous utiliserons (et traduire en p5) est le suivant.

traitement.js

Le code pour sketch.pde est celui de l'exemple lié ci-dessus:

<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

Le code de P5 lorsqu'il est traduit de ce qui précède est le suivant:

<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

Encore une fois, nous voyons une fréquence d'images légèrement meilleure avec Processing.js. P5 le maintient à environ 56 ans, tandis que le traitement.js semble se tenir debout à environ 58 ans. Dans les deux cas, Processing.js s'est avéré victorieux, en termes de performance.

Conclusion

P5JS est un projet jeune et ambitieux qui vise à apporter une programmation visuelle aux masses d'une manière plus accessible que le traitement jusqu'à présent. Bien qu'il soit actuellement obligé d'être stupide en termes de fonctionnalités, l'équipe est difficile à travailler pour le reste du langage de traitement à cet homologue JS.

Les avantages de l'utilisation de P5 sur le traitement.js sont:

• écriture de code js Vous êtes probablement déjà familier avec
• officiellement soutenu par la Fondation de traitement
• Manipulation HTML DOM avec l'addon de la bibliothèque Dom - ajoutant des éléments HTML communs à vos croquis P5 et plus
• plus léger sur les ressources lors du non-dessin

L'avantage de l'utilisation de traitement.js:

• Vous apprenez le traitement et pouvez l'utiliser dans des environnements où il est plus rapide et plus portable pour les environnements non Web
• semble avoir une fréquence d'images plus stable et fonctionne mieux dans les deux démos que nous avons essayé

Nous gardons un ?il sur cette bibliothèque et jouerons régulièrement avec. Veux-tu? Faites-nous savoir si vous conduisez des exemples intéressants, nous serions ravis d'écrire à leur sujet!

Questions fréquemment posées (FAQ) sur le traitement.js et p5.js

Quelles sont les principales différences entre le traitement.js et p5.js?

Processing.js et p5.js sont tous deux des bibliothèques JavaScript qui sont utilisées pour créer des visualisations, des animations et du contenu interactif sur le Web. Cependant, ils ont des différences clés. Processing.js est un port de la langue de traitement d'origine, qui a été écrit en Java, à JavaScript. Il est con?u pour être compatible avec le code de traitement existant, ce qui signifie qu'il peut exécuter des croquis de traitement non modifiés. D'un autre c?té, P5.JS est une nouvelle interprétation des principes de traitement, con?us à partir de zéro pour le Web. Il a une syntaxe plus simple et plus javascript et une approche plus moderne et conviviale pour gérer les médias et l'interactivité.

est P5.js plus facile à apprendre que le traitement.js?

Oui , P5.js est généralement considéré comme plus facile à apprendre que le traitement.js, en particulier pour les débutants. En effet, P5.JS a une syntaxe plus simple et plus intuitive qui est plus proche du JavaScript standard. Il a également une approche plus conviviale pour gérer les supports et l'interactivité, avec des fonctions intégrées pour des choses comme la souris et l'entrée du clavier, la charge d'image et le son, et le dessin de la toile. De plus, P5.js a une communauté très active et une richesse de ressources d'apprentissage disponibles, y compris des tutoriels, des exemples et un forum amical.

Puis-je utiliser ensemble Processing.js et P5.js dans le même projet?

Bien qu'il soit techniquement possible d'utiliser à la fois le traitement.js et p5.js dans le même projet, il n'est généralement pas recommandé. En effet, les deux bibliothèques ont des syntaxes et des approches différentes pour gérer les médias et l'interactivité, ce qui peut entra?ner des problèmes de confusion et de compatibilité. Au lieu de cela, il est généralement préférable de choisir une bibliothèque et de s'en tenir à la durée du projet.

Quels sont les avantages de l'utilisation Processing.js est sa compatibilité avec le code de traitement existant. Si vous avez un croquis de traitement que vous souhaitez exécuter sur le Web, vous pouvez le faire avec des modifications minimales à l'aide de traitement.js. De plus, Processing.js a une syntaxe plus traditionnelle de type Java, qui peut être plus familière à certains programmeurs.

Quels sont les avantages de l'utilisation de p5.js?

p5.js Plusieurs avantages par rapport au traitement.js. Premièrement, il a une syntaxe plus simple et plus intuitive qui est plus proche du JavaScript standard, ce qui facilite l'apprentissage et l'utilisation. Deuxièmement, il a une approche plus moderne et conviviale pour gérer les médias et l'interactivité, avec des fonctions intégrées pour des choses comme la souris et l'entrée du clavier, l'image et le chargement sonore et le dessin de toile. Enfin, P5.JS a une communauté très active et une richesse de ressources d'apprentissage disponibles, ce qui en fait un excellent choix pour les débutants et les programmeurs expérimentés.

Puis-je utiliser Processing.js ou P5.js pour les projets commerciaux?

Oui, TRACHETH.JS et P5.J sont des bibliothèques open source qui peuvent être utilisées pour des projets commerciaux. Cependant, c'est toujours une bonne idée de vérifier les termes de licence spécifiques de toute bibliothèque ou outil que vous utilisez dans un projet commercial pour vous assurer que vous êtes en conformité.

Comment choisir entre traitement.js et p5. JS pour mon projet?

Le choix entre traitement.js et p5.js dépend en grande partie de vos besoins et préférences spécifiques. Si vous avez un code de traitement existant que vous souhaitez exécuter sur le Web, ou si vous préférez une syntaxe plus traditionnelle de type Java, le traitement.js peut être le meilleur choix. D'un autre c?té, si vous démarrez un nouveau projet à partir de zéro, ou si vous préférez une syntaxe plus simple et plus javascript et une approche plus moderne et conviviale pour gérer les médias et l'interactivité, alors les P5.J peuvent être les meilleur choix.

Y a-t-il des différences de performances entre le traitement.js et p5.js?

Tant.js et p5.js sont capables d'exécuter des visualisations complexes et Animations en douceur. Cependant, les performances de toute bibliothèque JavaScript peuvent être affectées par une variété de facteurs, y compris la complexité du code, les capacités de l'appareil exécutant le code et l'efficacité du moteur JavaScript dans le navigateur Web. En tant que tel, c'est toujours une bonne idée de tester votre code sur une variété d'appareils et de navigateurs pour garantir des performances optimales.

Puis-je utiliser le traitement.js ou p5.js avec d'autres bibliothèques ou frameworks JavaScript?

Oui, Traitement.js et P5.js peuvent être utilisés en conjonction avec d'autres bibliothèques ou frameworks JavaScript. Cependant, il est important d'être conscient des problèmes de compatibilité potentiels et de tester votre code en profondeur pour s'assurer que tout fonctionne comme prévu.

où puis-je trouver des ressources d'apprentissage pour le traitement.js et p5.js?

Les deux traitements.js et p5.js disposent d'une richesse de ressources d'apprentissage disponibles. Pour le traitement.js, vous pouvez commencer par le site Web officiel de traitement, qui propose des tutoriels, des exemples et un guide de référence. Pour P5.JS, vous pouvez commencer par le site Web officiel P5.JS, qui propose des tutoriels, des exemples, un guide de référence et un forum amical. De plus, il existe de nombreux tutoriels, vidéos et cours en ligne disponibles pour les deux bibliothèques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!