Come creare un'app di disegno con p5js

Il tema della settimana n. 5 della Weekly Coding Challenge è:

Creazione di un'applicazione di disegno

Questa è la prima applicazione che stiamo costruendo nel programma #weeklyCodingChallenge. Finora abbiamo realizzato progetti più piccoli, quindi è molto eccitante se me lo chiedi!

In questo articolo useremo p5js, una libreria di disegni, per creare un'applicazione di disegno:

Dai un'occhiata a CodePen qui:

Se vuoi saperne di più su p5js e su cosa fa, puoi visitare il loro sito Web ufficiale. Fondamentalmente, lo sto usando perché funziona molto bene sull'elemento canvas del browser fornendo un'API chiara.

HTML

Come puoi notare nell'esempio sopra, sul lato sinistro dello schermo abbiamo una barra laterale. Metteremo al suo interno i nostri "strumenti": un selettore di colori, un selettore di peso e il pulsante Cancella (icona cestino):

Il CSS

Usando CSS sposteremo la barra laterale e tutto ciò che è al suo interno nella parte sinistra. Lo modelleremo un po 'per renderlo più bello (niente di speciale, CSS di base):

Ora per la parte importante ...

Il JS / P5JS

Come avrai notato, non abbiamo aggiunto un elemento canvas nel nostro codice HTML poiché p5js lo creerà per noi.

Esistono due importanti funzioni che utilizzeremo dalla libreria p5js:

  • setup - viene chiamato una volta all'avvio del programma. Viene utilizzato per definire le proprietà iniziali dell'ambiente come dimensioni dello schermo e colore di sfondo.
  • draw: viene chiamato direttamente dopo setup (). La funzione draw () esegue continuamente le righe di codice contenute all'interno del suo blocco.

Prima di andare avanti, fermiamoci un momento e vediamo cosa vogliamo ottenere.

Quindi, in sostanza, vogliamo aggiungere un listener di eventi premuto al mouse sull'area di disegno che inizierà a 'disegnare' una forma al suo interno fino a quando il mouse è premuto.

Creeremo una serie di punti che utilizzeremo per creare un tracciato (o una forma) utilizzando i metodi beginShape e endShape per disegnare questa forma all'interno dell'area di disegno. La forma verrà costruita collegando una serie di vertici (vedi vertice per maggiori informazioni).

Poiché vogliamo che questa forma venga ridisegnata ogni volta, inseriremo questo codice nel metodo draw:

Come puoi vedere, p5js ha un flag MouseIsPressed che possiamo usare per rilevare quando vengono premuti i pulsanti del mouse.

Finora tutto potrebbe sembrare buono, ma c'è un grosso problema. Una volta rilasciato il pulsante del mouse e proviamo a disegnare un'altra forma, l'ultimo punto della forma precedente verrà collegato al primo punto della nuova forma. Questo non è sicuramente quello che vogliamo, quindi dobbiamo cambiare un po 'il nostro approccio.

Invece di avere un array di punti (l'array path), creeremo un array di percorsi e memorizzeremo tutti i percorsi al suo interno. Fondamentalmente, avremo un doppio array con punti. Inoltre, per questo, dovremo tenere traccia di currentPath mentre il mouse è ancora premuto. Ripristineremo questo array una volta premuto nuovamente il pulsante del mouse. Confondere? Vediamo il codice e scommetto che diventerà più chiaro:

Ho anche aggiunto alcuni commenti nel codice sopra, assicurati di controllarli.

La funzione mousePressed viene chiamata una volta ogni volta che viene premuto un pulsante del mouse - roba p5js!

Grande! Ora possiamo disegnare singole forme nella nostra tela!

L'ultima cosa da fare è collegare quei pulsanti che abbiamo creato nell'HTML e usare i valori che sono al loro interno per modellare la forma:

E con questo, abbiamo finito la nostra piccola applicazione! Sìì!

L'intero codice JS

Inoltre, assicurati di importare anche il file p5js nel tuo html prima di importare questo file js.

Conclusione

Spero che questa app di disegno ti sia piaciuta. Ci sono un sacco di funzionalità che potrebbero essere aggiunte a questa app e ti sfido a lasciare che la tua mente creativa abbia nuove idee!

E se potessi salvare il disegno come immagine (.png o .jpg)? (puoi farlo con la libreria p5js).

A partire da ora, stiamo solo verificando gli eventi del mouse. Forse potresti farlo funzionare anche sul cellulare, scoprendo gli eventi touch? Il cielo è il limite con la quantità di funzionalità che potrebbero essere aggiunte a questa app!

Mi piacerebbe vedere cosa hai intenzione di costruire! Tweet me @ florinpop1705 con la tua creazione!

Potrebbe piacerti anche una delle altre sfide del programma Weekly Coding Challenge. Dai un'occhiata qui.

Ci vediamo la prossima volta! Buona programmazione!

Originariamente pubblicato su www.florin-pop.com.