Share
p5.js est une bibliothèque JavaScript pour les artistes, les concepteurs et les éducateurs, avec une attention particulière pour les arts visuels. C'est un moyen extrêmement facile pour vous de créer des œuvres d'art interactives, des animations et des prototypes dans le navigateur..
Il est fortement inspiré du langage de programmation Processing, qui se définit comme un «carnet de croquis logiciel flexible». Processing a été créé en 2001 dans le but d’enseigner le codage aux non-programmeurs. Depuis lors, il est devenu le langage de choix de dizaines de milliers d’artistes, de designers et d’étudiants..
p5.js a toutefois un objectif légèrement différent. p5 apporte la puissance et la simplicité du traitement sur le Web. Ce tutoriel vous montrera comment créer votre premier "sketch" p5 et comment vous amuser..
Parce que p5 est conçu pour le Web, nous aurons besoin d’une page Web. Créez un nouveau répertoire sur votre ordinateur et créez un index.html déposer à l'intérieur. Nous n'avons pas besoin de beaucoup ici, juste les bits et bobs standard.
Mon premier croquis p5
Ensuite, nous aurons besoin de la bibliothèque p5 elle-même, que nous pouvons facilement obtenir à partir de la page de téléchargement de p5. Nous avons seulement besoin de la bibliothèque de base, il suffit donc de télécharger la version à un seul fichier de p5.
Placez le fichier téléchargé dans le même répertoire que votre fichier HTML. Nous pouvons ensuite le référencer dans notre code HTML comme suit:
Mon premier croquis p5
Nous aurons également besoin d'un fichier JavaScript pour notre croquis. Une esquisse est en cours de traitement pour le dessin ou l'animation créée avec p5. Créez un autre fichier, à nouveau dans le même répertoire, et appelez-le. mon-premier-sketch.js. Cela doit être référencé après la bibliothèque p5 pour que notre script connaisse toutes les méthodes fournies par p5.
C'est tout ce qu'il y a dans la configuration! Nous sommes maintenant prêts à commencer à créer notre chef-d'œuvre.
p5 nous donne deux méthodes essentielles pour créer un croquis: installer() et dessiner(). Vous pouvez probablement deviner à quoi servent chacun d’eux, mais ils ont une différence cachée importante. S'ouvrir mon-premier-sketch.js et ajoutez ce qui suit:
Accentsconagua
// code de configuration function setup () console.log ('Hi from setup!'); // Fonction de code de dessin draw () console.log ('Hi from draw!'); Maintenant, même si nous venons de définir ces fonctions et de ne faire rien d'autre, car p5 s'attendait à ce que nous le fassions, il les exécutera automatiquement lorsque nous chargerons la page. Ouvrez votre index.html dans votre navigateur préféré et ouvrez la console JavaScript. Voici ce que je vois:
Comme vous pouvez le constater, les deux fonctions ont été appelées automatiquement, mais le installer() fonction n'a été appelée qu'une fois, alors que dessiner() a été appelé encore et encore-768 fois en quelques secondes! Nous verrons l'importance de cela un peu plus tard.
OK, pour commencer à dessiner, nous aurons besoin de quelque chose dont tous les artistes ont besoin: une toile. Tout ce que nous devons faire est d'utiliser p5 createCanvas () fonction et lui donner une largeur et une hauteur comme arguments. Où devrions-nous appeler cette fonction de? installer() bien sûr.
function setup () // Crée un canevas de 200 pixels de large et de 200 pixels de haut createCanvas (200, 200);
Si vous actualisez votre page, vous ne verrez rien de différent. En effet, le canevas est transparent par défaut. Allumons-le avec un peu de couleur. Que diriez-vous d'un beau rouge? Coller cette ligne dans installer() ainsi que.
fond («rouge»);
p5 est assez intelligent pour savoir si nous avons utilisé un nom de couleur HTML ou une valeur hexadécimale, ce qui signifie fond ('# FF0000'); est également valable.
Allons dessiner. Nous avons quelques formes intégrées à notre disposition. Commençons par un rectangle de base. Dans notre fonction draw, nous pouvons écrire ce qui suit. N'oubliez pas que toutes les coordonnées commencent par (0, 0), qui est le coin supérieur gauche de la toile..
fonction draw () rect (0, 0, 50, 50);
Si vous actualisez votre page, vous devriez voir ceci: un rectangle qui commence à (0, 0) et mesure 50 px de large et 50 px de hauteur (un carré).
Ce carré peut être coloré aussi facilement que notre fond. Tout ce que nous avons à faire est de spécifier une couleur de remplissage avant on dessine le rectangle. Utilisons un sortilège cette fois.
remplir ('# CC00FF'); rect (0, 0, 50, 50);Nous avons maintenant un carré violet. Ce n'est pas vraiment un chef-d'œuvre, mais nous allons quelque part. Que diriez-vous d'une autre forme? Un cercle, je vous entends dire? aucun problème.
// Dessine une ellipse située à 25 pixels du haut et // 25 pixels du bord gauche du canevas. // L'ellipse mesure 25 pixels de haut et 25 pixels de large ce qui en fait un cercle. ellipse (25, 25, 25, 25);
Vous remarquerez que notre cercle a non seulement été dessiné au-dessus de notre rectangle, mais que sa couleur est identique à celle du rectangle..
En effet, l'ordre dans lequel nous appelons ces fonctions est extrêmement important. Si nous avions dessiné le rectangle après l'ellipse, nous ne verrions pas du tout le cercle tel qu'il aurait été peint. Quant à la couleur de remplissage du cercle, elle est identique à celle du carré car toute forme dessinée après le remplir() La fonction est appelée utilisera cette couleur. Pour changer la couleur du cercle, appelez simplement la couleur de remplissage avec une valeur différente..
remplir ('# 66CC66'); ellipse (25, 25, 25, 25);Nous avons maintenant ceci:
Hmm, toujours pas si excitant. Voyons ce que nous pouvons faire. Maintenant, rappelez-vous que la majorité de notre code ici est contenu dans le dessiner() fonction, et comme nous l’avons vu précédemment, tout élément de la fonction draw est appelé encore et encore. Donc, essentiellement, notre carré et notre cercle sont tracés maintes et maintes fois au-dessus du carré et du cercle dessinés lors de l'appel précédent de la fonction draw.
Et si nous devions dessiner nos formes dans un endroit différent à chaque fois?
Afin de dessiner vos formes à un endroit différent, vous pouvez être tenté de modifier leurs valeurs de coordonnées. C'est parfaitement acceptable et un excellent moyen d'avoir un contrôle complet sur votre dessin..
Il y a aussi une alternative. Nous pouvons modifier le décalage du canevas entier, ce qui signifie que nous pouvons modifier l'origine, les coordonnées en haut à gauche (0, 0). Le résultat de ceci est que nos formes sont dessinées avec ce décalage. Si nous devions écrire traduire (10, 10); on se retrouverait avec ça.
Notez que nos formes sont maintenant dessinées 10 px de la gauche et 10 px du haut.
Cela n’a pas vraiment résolu notre problème initial, à savoir que les formes étaient superposées à plusieurs reprises, mais qu’en serait-il si nous changions l’origine de la toile avec chaque dessiner() appel? Les formes seraient dessinées dans une position différente à chaque fois. Mais quelle position? Et comment pourrions-nous en trouver un différent à chaque fois dessiner() est appelé? Heureusement, p5 nous a couvert avec le au hasard() fonction-un moyen facile de générer un nombre aléatoire. Nous allons utiliser cela pour changer au hasard le décalage de notre toile.
function draw () // Décalage du canevas // random (0, width) renvoie une valeur comprise entre // 0 et la largeur du canevas. // Comme aléatoire (0, hauteur) pour la hauteur. traduire (aléatoire (0, largeur), aléatoire (0, hauteur)); // Code existant ici
Cela nous donne une version animée de ceci:
Whee! Vous pouvez trouver cette animation un peu rapide. C’est parce que p5 dessine nos formes aussi vite que possible, avec dessiner() être appelé encore et encore. Si vous voulez ralentir un peu, vous pouvez changer la fréquence d'images pour réduire la fréquence à laquelle dessiner() est appelé. Passer un appel à frameRate () dans votre fonction de configuration.
function setup () createCanvas (200, 200); fond («rouge»); frameRate (5);
C'est mieux. Encore une fois, c'est un peu ennuyeux car le carré et le cercle sont toujours superposés. Essayons de faire pivoter nos formes pour rendre les choses plus intéressantes. Alors, comment faisons-nous cela? Ouais, vous le devinez, p5 nous a couvert encore une fois. Tout d’abord, nous disons à p5 que nous voulons faire pivoter en degrés au lieu de radians et que nous voulons faire une rotation aléatoire avant de dessiner chaque forme..
angleMode (DEGRES); // utilise global DEGREES constant rotation (random (1, 360)); // tourne selon un angle aléatoire fill ('# CC00FF'); rect (0, 0, 50, 50); faire pivoter (aléatoire (1, 360)); remplir ('# 66CC66'); ellipse (25, 25, 25, 25);Nous avons créé un monstre.
Je suis à peu près sûr d'avoir eu une chemise en 1991 avec le même motif…
Non, mon erreur, il y avait des triangles jaunes dessus. Allons tous et ajouter quelques.
// triangle jaune positionné au hasard rotation (random (1, 360)); remplissage ('jaune'); // 3 paires de points de triangle triangle (25, 0, 50, 50, 0, 50);Charmant. Maillot des années 90 ou Jackson Pollock moderne? C'est à toi de voir. L'art est dans l'oeil du spectateur, comme on dit.
J'espère que vous avez vu dans ce tutoriel à quel point il est facile de commencer à dessiner dans le navigateur avec p5.js. p5 a beaucoup plus de méthodes utiles et pratiques pour nous aider à dessiner des formes, à animer et à gérer les entrées de l'utilisateur. Si vous souhaitez en savoir plus, visitez la page de référence p5 ou consultez mon cours Envato Tuts + course Interactive Art With p5.js.
Pour référence, voici la source complète de notre esquisse p5:
function setup () createCanvas (200, 200); fond («rouge»); frameRate (5); function draw () translate (aléatoire (0, largeur), aléatoire (0, hauteur)); angleMode (DEGRES); faire pivoter (aléatoire (1, 360)); remplir ('# CC00FF'); rect (0, 0, 50, 50); faire pivoter (aléatoire (1, 360)); remplir ('# 66CC66'); ellipse (25, 25, 25, 25); faire pivoter (aléatoire (1, 360)); remplissage ('jaune'); triangle (25, 0, 50, 50, 0, 50);
