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?
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.
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.
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.
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>
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>
À 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.
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.
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>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>
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.
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:
L'avantage de l'utilisation de traitement.js:
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!
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é.
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.
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 de p5.js?
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é.
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.
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.
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.
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!
Caractères d'échappement JavaScript
La différence entre un classeur et une feuille de calcul
Utilisation de getproperty
Quel est le nom de cette voix modifiée ?
Logiciel de surveillance de serveur
Comment définir les éléments de démarrage au démarrage
Format de courrier électronique professionnel
Comment augmenter la vitesse de téléchargement
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
