Com es crea una aplicació de dibuix amb p5js

El tema de la Setmana 5 del Weekly Coding Challenge és:

Creeu una aplicació de dibuix

Aquesta és la primera aplicació que crearem al programa #weeklyCodingChallenge. Fins ara hem construït projectes més petits, de manera que és bastant emocionant si em pregunteu.

En aquest article, utilitzarem p5js, una biblioteca de dibuixos, per crear una aplicació de dibuix:

Feu clic aquí per obtenir el CodePen:

Si voleu obtenir més informació sobre p5js i les seves funcions, podeu visitar el seu lloc web oficial. Bàsicament, l’utilitzo perquè funciona molt bé per sobre de l’element de lona del navegador proporcionant una API ordenada.

L'HTML

Com podeu veure a l'exemple anterior, tenim una barra lateral al costat esquerre de la pantalla. Posarem les nostres "eines" (un selector de colors, un selector de pesos i el botó "suprimir" (icona de la paperera):

El CSS

Mitjançant CSS, desplaçem la barra lateral i tot el que hi ha cap a l’esquerra. L’estilarem una mica perquè sembli més agradable (res especial, CSS simple):

Ara a la part important ...

El JS / P5JS

Com haureu notat, no vam afegir cap element de llenç al nostre HTML, ja que p5js el crea per a nosaltres.

Hi ha dues funcions importants que farem servir a la biblioteca p5js:

  • setup: es diu una vegada quan s'inicia el programa. Això defineix les propietats inicials de l'entorn, com ara la mida de la pantalla i el color de fons.
  • dibuix: es diu directament després de la configuració (). La funció draw () executa contínuament les línies de codi contingudes al seu bloc.

Abans de continuar, fem una pausa per veure el que volem aconseguir.

Bàsicament, volem afegir al llenç un eventListener premut amb el ratolí que dibuixi una forma sempre que es prem la tecla Premeu el ratolí.

Crearem una sèrie de punts que utilitzarem per crear un camí (o forma) mitjançant els mètodes beginShape i endShape per dibuixar aquesta forma dins del tauler. La forma es crea unint una sèrie de vèrtexs (vegeu Vèrtex per obtenir més informació).

Com que volem tornar a dibuixar aquesta forma cada vegada, afegim aquest codi al mètode de dibuix:

Com podeu veure, p5js té una bandera del ratolí que podem utilitzar per indicar quan es premen els botons del ratolí.

Fins ara tot pot quedar bé, però hi ha un gran problema. Tan bon punt deixeu anar el botó del ratolí i proveu de dibuixar una altra forma, l'últim punt de la forma anterior es connectarà al primer punt de la nova forma. Definitivament, això no és el que volem, així que hem de canviar una mica el nostre enfocament.

En lloc de tenir una matriu de punts (la matriu de camins), creem una matriu de camins i emmagatzemem tots els camins. Bàsicament tenim una doble matriu de punts. Per fer-ho, també hem de fer un seguiment del camí actual mentre es manté premut el ratolí. Aquesta matriu es restableix tan bon punt es torna a prémer el botó del ratolí. Confús? Fem una ullada al codi i aposto a que serà més clar:

També he posat alguns comentaris al codi anterior, no oblideu consultar-los.

La funció MousePressed es crida una vegada cada vegada que es prem un botó del ratolí - coses p5js!

Genial! Ara podem dibuixar formes personalitzades al nostre llenç.

L'últim que heu de fer és enllaçar els botons que hem creat a l'HTML i utilitzar els valors que contenen per estilitzar la forma:

I amb això hem acabat la nostra petita aplicació. Visca!

Tot el codi JS

Assegureu-vos també d’importar el fitxer p5js al vostre HTML abans d’importar aquest fitxer js.

Conclusió

Espero que us hagi agradat aquesta aplicació de dibuix que hem creat. Hi ha diverses funcions que es poden afegir a aquesta aplicació i us demano que deixeu que la vostra ment creativa tingui idees noves.

Què passa si podeu desar el dibuix com a imatge (.png o .jpg)? (ho podeu fer amb la biblioteca p5js).

Actualment, només estem revisant els esdeveniments del ratolí. Potser també podríeu fer-ho funcionar al mòbil en conèixer els esdeveniments tàctils? El cel és el límit amb la quantitat de funcions que es podrien afegir a aquesta aplicació.

M'encantaria veure què vas a construir! Feu-me un tuit @ florinpop1705 amb la vostra creació.

També podeu gaudir d’un dels altres reptes del programa Weekly Coding Challenge. Consulteu-ho aquí.

Fins la pròxima vegada! Diverteix-te codificant!

Publicat originalment a www.florin-pop.com.