Share
p5.js è una libreria JavaScript per artisti, designer ed educatori, con un focus specifico sulle arti visive. È un modo estremamente semplice per creare oggetti d'arte, animazioni e prototipi interattivi nel browser.
È fortemente ispirato dal linguaggio di programmazione Processing, che si riferisce a se stesso come un "libro di esercizi software flessibile". L'elaborazione è stata creata nel 2001 con lo scopo di insegnare ai non programmatori come programmare, ma da allora è diventata la lingua d'elezione per decine di migliaia di artisti, designer e studenti.
p5.js, tuttavia, ha in mente un obiettivo leggermente diverso. p5 apporta la potenza e la semplicità di Processing al web. Questo tutorial ti mostrerà come creare il tuo primo "schizzo" p5 e alcune cose divertenti che puoi fare con esso.
Poiché p5 è progettato per il web, avremo bisogno di una pagina web. Crea una nuova directory sul tuo computer e crea un index.html file al suo interno. Non abbiamo bisogno di molto qui, solo i bit e le bob standard.
Il mio primo schizzo p5
Successivamente, avremo bisogno della libreria p5 stessa, che possiamo facilmente ottenere dalla pagina di download p5. Abbiamo solo bisogno della libreria di base, quindi basta scaricare la versione per singolo file di p5.
Metti il file scaricato nella stessa directory del tuo file HTML. Possiamo quindi fare riferimento nel nostro codice HTML in questo modo:
Il mio primo schizzo p5
Avremo anche bisogno di un file JavaScript per il nostro schizzo. Uno schizzo è Processing parla per il disegno o l'animazione che creiamo con p5. Crea un altro file, di nuovo nella stessa directory, e chiamalo my-prime-sketch.js. Questo deve essere referenziato dopo la libreria p5 in modo che il nostro script conosca tutti i metodi forniti da p5.
Questo è tutto il setup che c'è! Ora siamo pronti per iniziare a creare il nostro capolavoro.
p5 ci dà due metodi che sono essenziali quando si crea uno schizzo: impostare() e disegnare(). Probabilmente puoi indovinare a cosa servono ciascuno di loro, ma hanno un'importante differenza nascosta. Aprire my-prime-sketch.js e aggiungi il seguente:
Accentsconagua
// Setup codice funzione setup () console.log ('Salve setup!'); // Drawing code function draw () console.log ('Ciao da disegnare!'); Ora, anche se abbiamo appena definito queste funzioni e non fatto nient'altro, poiché p5 ci aspettava che lo facessimo, le eseguiremo automaticamente quando caricheremo la pagina. Apri i tuoi index.html nel tuo browser preferito e apri la console JavaScript. Ecco cosa vedo:
Come puoi vedere, entrambe le funzioni sono state chiamate automaticamente, ma il impostare() la funzione è stata chiamata solo una volta, mentre disegnare() è stato chiamato più e più volte, 768 volte in pochi secondi! Vedremo l'importanza di questo un po 'più tardi.
OK, per iniziare a disegnare, avremo bisogno di qualcosa di cui hanno bisogno tutti gli artisti: una tela. Tutto quello che dobbiamo fare è usare p5 createCanvas () funzione e dargli una larghezza e altezza come argomenti. Da dove dovremmo chiamare questa funzione? impostare() ovviamente.
function setup () // Crea un canvas 200px wide e 200px tall createCanvas (200, 200);
Se aggiorni la tua pagina, non vedrai nulla di diverso. Questo perché la tela è trasparente per impostazione predefinita. Diamoci un po 'di colore. Che ne dici di un bel rosso? Attaccare questa linea impostare() anche.
sfondo ( 'rosso');
p5 è abbastanza intelligente da sapere se abbiamo usato un nome di colore HTML o un valore esadecimale, cioè sfondo ( '# FF0000'); è ugualmente valido.
Prendiamo il disegno. Abbiamo alcune forme incorporate a nostra disposizione. Iniziamo con un rettangolo di base. Nella nostra funzione di disegno, possiamo scrivere quanto segue. Ricorda, tutte le coordinate iniziano da (0, 0), che è l'angolo in alto a sinistra della tela.
function draw () rect (0, 0, 50, 50);
Se aggiorni la tua pagina, dovresti vedere questo: un rettangolo che inizia da (0, 0) ed è largo 50 px e alto 50 px (un quadrato).
Questo quadrato può essere colorato così facilmente come il nostro sfondo. Tutto quello che dobbiamo fare è specificare un colore di riempimento prima disegniamo il rettangolo. Usiamo un po 'di esagono questa volta.
riempimento ( '# CC00FF'); rect (0, 0, 50, 50);
Ora abbiamo un quadrato viola. Non esattamente un capolavoro, ma stiamo arrivando da qualche parte. Che ne dici di un'altra forma? Un cerchio, ti sento dire? Nessun problema.
// Disegna un'ellisse che è 25px dall'alto e // 25px a sinistra del bordo dell'area di disegno. // L'ellisse è alta 25px e larga 25px, rendendo // un cerchio. ellisse (25, 25, 25, 25);
Noterai che il nostro cerchio non è stato solo disegnato sopra il nostro rettangolo, ma è anche dello stesso colore del rettangolo.
Questo perché l'ordine in cui chiamiamo queste funzioni è estremamente importante. Se avessimo disegnato il rettangolo dopo l'ellisse, non avremmo visto il cerchio come sarebbe stato dipinto sopra. Per quanto riguarda il colore di riempimento del cerchio, è lo stesso del quadrato perché qualsiasi forma disegnata dopo il riempire() la funzione è chiamata utilizzerà quel colore. Per cambiare il colore del cerchio, chiama semplicemente il colore di riempimento di nuovo con un valore diverso.
riempimento ( '# 66CC66'); ellisse (25, 25, 25, 25);
Ora abbiamo questo:
Hmm, non è ancora eccitante. Vediamo cosa possiamo fare. Ora, ricorda che la maggior parte del nostro codice qui è contenuta nel disegnare() funzione, e come abbiamo visto prima, qualsiasi cosa nella funzione draw viene chiamata più e più volte. Quindi essenzialmente il nostro quadrato e il cerchio vengono disegnati più e più volte in cima al quadrato e al cerchio che sono stati disegnati nella chiamata precedente della funzione di disegno.
E se dovessimo disegnare le nostre forme in un posto diverso ogni volta?
Per disegnare le tue forme in un posto diverso, potresti essere tentato di cambiare i loro valori di coordinate. Questo è perfettamente accettabile e un ottimo modo per avere il controllo completo sul tuo disegno.
C'è anche un'alternativa. Possiamo cambiare l'offset dell'intero canvas, il che significa che possiamo cambiare l'origine, le coordinate in alto a sinistra (0, 0) in qualcos'altro. Il risultato è che le nostre forme sono disegnate con questo offset. Se dovessimo scrivere translate (10, 10); finiremmo con questo.
Nota che le nostre forme ora sono disegnate 10 px da sinistra e 10 px dall'alto.
Questo non ha realmente risolto il nostro problema originale delle forme che si disegnano l'una sull'altra ripetutamente, ma cosa succederebbe se cambiassimo l'origine della tela con ciascuna disegnare() chiamata? Le forme verrebbero disegnate ogni volta in una posizione diversa. Ma quale posizione? E come ne troveremmo uno diverso ogni volta disegnare() è chiamato? Fortunatamente, p5 ci ha coperto con il casuale() funzione: un modo semplice per generare un numero casuale. Lo useremo per cambiare in modo casuale l'offset della nostra tela.
function draw () // Offset the canvas // random (0, width) restituisce un valore compreso tra // 0 e la larghezza del canvas. // Come casuale (0, altezza) per altezza. translate (random (0, width), random (0, height)); // codice esistente qui
Questo ci dà una versione animata di questo:
Whee! Potresti trovare questa animazione un po 'veloce. Questo perché p5 sta disegnando le nostre forme il più velocemente possibile, con disegnare() essere chiamato ancora e ancora. Se vuoi rallentare un po 'questo, puoi cambiare la frequenza dei fotogrammi per ridurre la frequenza in cui disegnare() è chiamato. Metti una chiamata a frequenza dei fotogrammi() nella tua funzione di configurazione.
function setup () createCanvas (200, 200); sfondo ( 'rosso'); frameRate (5);
Così va meglio. Ancora una volta è un po 'noioso con il quadrato e il cerchio che sono sempre uno sopra l'altro. Proviamo a ruotare le nostre forme per rendere le cose più interessanti. Quindi, come lo facciamo? Sì, lo indovini, p5 ci ha coperto di nuovo. Per prima cosa diciamo a p5 che vogliamo ruotare usando gradi invece di radianti, e che vogliamo ruotare casualmente prima di disegnare ogni forma.
angleMode (gradi); // usa la rotazione costante dei GRADI globali (casuale (1, 360)); // ruota in un riempimento ad angolo casuale ('# CC00FF'); rect (0, 0, 50, 50); ruota (casuale (1, 360)); riempimento ( '# 66CC66'); ellisse (25, 25, 25, 25);Abbiamo creato un mostro.
Sono abbastanza sicuro di avere una camicia nel 1991 con questo stesso modello su di esso ...
No, mio errore, aveva dei triangoli gialli su di esso. Andiamo all in e aggiungine un po '.
// Il triangolo giallo posizionato in modo casuale ruota (casuale (1, 360)); riempimento ( 'giallo'); // 3 coppie di triangoli triangolari (25, 0, 50, 50, 0, 50);
Bello. La maglietta degli anni '90 o il moderno Jackson Pollock? Dipende da te. L'arte è negli occhi di chi guarda, come si suol dire.
Spero tu abbia visto da questo tutorial quanto sia facile iniziare a disegnare nel browser con p5.js. p5 ha molti altri metodi utili e convenienti per aiutarci a disegnare forme, animare e gestire l'input dell'utente. Se sei interessato a saperne di più, visita la pagina di riferimento p5, oppure consulta il mio Envato Tuts + corso Interactive Art With p5.js.
Per riferimento, ecco la fonte completa per il nostro schizzo p5:
function setup () createCanvas (200, 200); sfondo ( 'rosso'); frameRate (5); function draw () translate (random (0, width), random (0, height)); angleMode (gradi); ruota (casuale (1, 360)); riempimento ( '# CC00FF'); rect (0, 0, 50, 50); ruota (casuale (1, 360)); riempimento ( '# 66CC66'); ellisse (25, 25, 25, 25); ruota (casuale (1, 360)); riempimento ( 'giallo'); triangolo (25, 0, 50, 50, 0, 50);
