Comment construire une application de dessin avec p5js

Le thème de la semaine 5 du défi hebdomadaire de codage est le suivant:

Création d'une application de dessin

Ceci est la première application que nous développons dans le programme #weeklyCodingChallenge. Jusqu'à présent, nous avons construit de plus petits projets, donc c'est assez excitant si vous me le demandez!

Dans cet article, nous utiliserons p5js, une bibliothèque de dessins, pour créer une application de dessin:

Découvrez le CodePen ici:

Si vous voulez en savoir plus sur p5js et ce qu'il fait, vous pouvez visiter leur site officiel. En fait, je l’utilise car il fonctionne très bien au-dessus de l’élément canvas du navigateur en fournissant une API claire.

Le HTML

Comme vous pouvez le constater dans l'exemple ci-dessus, à gauche de l'écran se trouve une barre latérale. Nous y mettrons nos «outils» - un sélecteur de couleur, un sélecteur de poids et le bouton vide (icône de la corbeille):

Le CSS

En utilisant CSS, nous déplacerons la barre latérale et tout ce qu’elle contient à gauche. Nous allons le styler un peu pour le rendre plus beau (rien de sophistiqué, CSS de base):

Maintenant pour la partie importante…

Le JS / P5JS

Comme vous l'avez peut-être remarqué, nous n'avons pas ajouté d'élément canvas à notre code HTML, car p5js le créera pour nous.

Nous utiliserons deux fonctions importantes de la bibliothèque p5js:

  • setup - est appelé une fois au démarrage du programme. Il est utilisé pour définir les propriétés de l’environnement initial, telles que la taille de l’écran et la couleur de l’arrière-plan.
  • draw: est appelé directement après setup (). La fonction draw () exécute en permanence les lignes de code contenues dans son bloc.

Avant d’aller de l’avant, arrêtons-nous un instant et voyons ce que nous voulons réaliser.

Nous souhaitons donc ajouter un événement eventListener à la souris sur la grille, qui commencera à «dessiner» une forme à l'intérieur tant que le paramètre mouseIsPressed sera activé.

Nous allons créer un tableau de points que nous allons utiliser pour créer un chemin (ou une forme) en utilisant les méthodes beginShape et endShape pour dessiner cette forme à l’intérieur du canevas. La forme sera construite en connectant une série de sommets (voir sommet pour plus d'informations).

Comme nous voulons que cette forme soit redessinée à chaque fois, nous allons insérer ce code dans la méthode draw:

Comme vous pouvez le constater, p5js a un indicateur mouseIsPressed que nous pouvons utiliser pour détecter le moment où les boutons de la souris sont enfoncés.

Tout peut sembler bon jusqu'à présent, mais il y a un gros problème. Lorsque le bouton de la souris est relâché et que nous essayons de dessiner une autre forme, le dernier point de la forme précédente sera connecté au premier point de la nouvelle forme. Ce n’est certainement pas ce que nous voulons, nous devons donc changer un peu notre approche.

Au lieu d’avoir un tableau de points (le tableau de chemins), nous allons créer un chemin et nous allons stocker tous les chemins qu’il contient. Fondamentalement, nous aurons un tableau double avec des points. De plus, pour cela, nous devrons garder une trace du chemin actuel pendant que la souris est encore enfoncée. Nous réinitialiserons ce tableau une fois que le bouton de la souris aura été appuyé. Déroutant? Voyons le code et je parie que cela deviendra plus clair:

J'ai également ajouté quelques commentaires dans le code ci-dessus, assurez-vous de les vérifier.

La fonction mousePressed est appelée une fois après chaque fois que vous appuyez sur un bouton de la souris - p5js stuff!

Génial! Maintenant, nous pouvons dessiner des formes individuelles dans notre toile!

La dernière chose à faire est de brancher les boutons que nous avons créés dans le code HTML et d’utiliser les valeurs qu’ils contiennent pour styliser la forme:

Et avec cela, nous avons terminé notre petite application! Yay!

L'ensemble du code JS

Assurez-vous également d’importer le fichier p5js dans votre code HTML avant d’importer ce fichier js.

Conclusion

J'espère que vous avez aimé cette application de dessin que nous avons construite. De nombreuses fonctionnalités pourraient être ajoutées à cette application et je vous mets au défi de laisser votre esprit créatif proposer de nouvelles idées!

Et si vous pouviez enregistrer le dessin en tant qu’image (.png ou .jpg)? (vous pouvez le faire avec la bibliothèque p5js).

Pour l'instant, nous ne vérifions que les événements de la souris. Peut-être pourriez-vous également le faire fonctionner sur mobile en déterminant les événements tactiles? Le ciel est la limite avec la quantité de fonctionnalités qui pourraient être ajoutées à cette application!

J'aimerais voir ce que vous allez construire! Tweet moi @ florinpop1705 avec ta création!

Vous aimerez peut-être aussi l'un des autres défis du programme Weekly Coding Challenge. Vérifiez-les ici.

A la prochaine fois! Bon codage!

Initialement publié sur www.florin-pop.com.