Qu’est-ce que p5.js et Comment l’utiliser?
Aujourd’hui, je veux expliquer p5.js. Je suis aussi un p5.js débutant alors essayons de nous familiariser avec p5.js ensemble!
p5.js est écrit en JavaScript mais à l’origine, il est en traitement (https://processing.org/). Le traitement est un outil de codage visuel pour les arts visuels. Ce qui est intéressant, c’est que le traitement n’est pas seulement pour les développeurs, mais aussi pour les artistes, les concepteurs, les chercheurs et ceux qui veulent profiter de la création artistique. p5.js est utilisé en JavaScript afin que nous puissions l’utiliser avec DOM.
Voici le p5.site officiel de js.
https://p5js.org/
Comment utiliser p5.js
Faisons un truc simple aujourd’hui. Notre objectif est de connaître de petits conseils et de faire une animation.
Étape 1: Créez un fichier HTML et créez un lien vers p5.js et votre propre fichier JavaScript.
Le moyen le plus simple d’obtenir un lien est d’aller sur le site officiel et de trouver CDN. Copiez quelque chose …/p5.min.js et collez-le dans votre code HTML.
Étape 2: Faire un cercle
La fonction creativeCanvas (largeur de la toile, hauteur de la toile) définit la taille de la toile.
la fonction background() définit une couleur du canevas que nous créons. * J’utilise le paramètre de couleur mais vous pouvez utiliser d’autres paramètres. Veuillez vous référer au site officiel (https://p5js.org/reference/#/p5/background).
La fonction noStroke() ne signifie pas de contour de l’ellipse.
ellipse (emplacement x de l’ellipse, emplacement y de l’ellipse, largeur de l’ellipse, hauteur de l’ellipse).la fonction dessine l’ellipse.
N’oubliez pas d’ouvrir votre code HTML dans votre navigateur !
Étape 3: Faisons bouger votre ellipse!
la fonction draw() boucle pour toujours. Ainsi, la seule chose que vous avez à faire est de faire des ensembles d’emplacement y 0, puis de l’augmenter. Ensuite, vous obtenez une animation que votre ellipse déplace du haut vers le bas de votre toile.
Étape 4: Faites de nombreux points et déplacez-les à l’infini
Faisons la dernière étape ici.
la fonction random() fait un nombre flottant aléatoire. Dans mon code, j’ai défini « random (width) ». Cela signifie qu’ils renverraient de 0 à 500, soit la largeur maximale de la toile. S’il s’agit simplement de random(), il serait défini de 0 à 1. Ensuite, vous remarquerez peut-être déjà… S’il est aléatoire (6, 10), il renverrait 6 à 10. C’est assez facile à comprendre, n’est-ce pas?
C’est tout aujourd’hui! J’espère que vous pourrez obtenir un pourboire de mon post. Je vais essayer de faire des choses plus compliquées et partager à nouveau mon expérience ici plus tard.