Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript
Code

Introduzione a p5.js

by
Difficulty:BeginnerLength:MediumLanguages:

Italian (Italiano) translation by Sabrina Pampaloni (you can also view the original English article)

p5.js è una libreria JavaScript, per artisti, disegnatori e insegnanti, concentrata soprattutto sulle arti visive. È un modo estremamente facile per creare opere d'arte interattive, animazioni e prototipi nel browser.

È ispirata pesantemente dal linguaggio programmativo Processing, che si definisce un "blocco da disegno software flessibile". Processing è stato creato nel 2001 con lo scopo di insegnare ai non programmatori come scrivere codice, ma da allora è diventato il linguaggio preferito di decine di migliaia di artisti, disegnatori e studenti.

p5.js, comunque, ha in mente un obiettivo leggermente diverso. p5 porta sul web il potere e la semplicità di Processing. Questo tutorial mostrerà come creare il vostro primo "schizzo" p5 e alcune cose divertenti che potete fare con esso.

Iniziare

Poiché p5 è progettato per il web, ci servirà una pagina web. Create una nuova directory nel vostro computer e dentro create un file index.html. Non ci servirà molto in questo file, solo qualcosa di standard.

In seguito avremo bisogno della libreria p5, che potremo ottenere facilmente dalla pagina di download di p5. Ci serve solo la libreria di base, quindi scaricate la versione di p5 in un solo file.

The Single Version of p5

Mettete il file scaricato nella stessa directory del vostro file HTML. Possiamo fare riferimento ad esso nel nostro HTML così:

Ci servirà inoltre un file JavaScript per il nostro schizzo. Uno schizzo è il modo che ha Processing di chiamare il disegno o l'animazione che creiamo con p5. Create un altro file, sempre nella stessa directory, e chiamatelo my-first-sketch.js. A questo si deve far riferimento dopo la libreria p5, così che il nostro script conosca tutti i metodi forniti da p5.

Questa è tutta l'impostazione che c'è da fare! Ora siamo pronti per iniziare a creare il nostro capolavoro.

Concetti di base

p5 ci dà due metodi che sono essenziali quando si crea uno schizzo: setup() (imposta) e draw() (disegna). Probabilmente potrete intuire a cosa servono, ma hanno un'importante differenza nascosta. Aprite my-first-sketch.js e aggiungete quanto segue:

Ora, anche se abbiamo soltanto definito queste funzioni e non abbiamo fatto altro, poiché p5 si aspettava che noi facessimo questo, li eseguirà automaticamente quando carichiamo la pagina. Aprite il vostro file index.html nel vostro browser preferito e aprite la console JavaScript. Ecco cosa vedo io:

The JavaScript Console

Come potete vedere, entrambe le funzioni sono state chiamate automaticamente, ma la funzione setup() è stata chiamata solo una volta, mentre draw() è stata chiamata più volte — 768 volte in pochi secondi! Vedremo l'importanza di questo un po' più tardi.

Ok, per iniziare a disegnare ci servirà qualcosa di cui hanno bisogno tutti gli artisti: una tela. Tutto ciò che dobbiamo fare è usare la funzione di p5 createCanvas() e darle come argomenti una larghezza e un'altezza. Da dove dovremmo chiamare questa funzione? Da setup() ovviamente.

Se aggiornate la pagina non vedrete niente di diverso. Questo perché il canvas (la nostra tela) è trasparente di default. Decoriamola con un po' di colore. Che ne dite di un bel rosso? Mettete anche questa linea dentro setup().

p5 è abbastanza bravo da capire se abbiamo usato il nome di un colore HTML o un valore esadecimale, nel senso che background('#FF0000'); è altrettanto valido.

Forme

Iniziamo a disegnare. Abbiamo un po' di forme predefinite a disposizione. Iniziamo con un semplice rettangolo. Nella nostra funzione draw possiamo scrivere questo. Ricordatevi che tutte le coordinate iniziano a (0, 0), che è l'angolo in alto a sinistra del canvas.

Se aggiornate la pagina dovreste vedere questo: un rettangolo che inizia a (0, 0) ed è largo 50 px e alto 50 px (un quadrato).

Red Square

Questo quadrato può essere colorato facilmente come il nostro sfondo. Tutto quello che dobbiamo fare è specificare un colore di riempimento (fill) prima di disegnare il rettangolo. Usiamo l'esadecimale questa volta.

Ora abbiamo un quadrato viola. Non esattamente un capolavoro, ma stiamo arrivando da qualche parte. Che ne dite di un'altra forma? Avete detto un cerchio? Nessun problema.

Vi sarete accorti che il nostro cerchio non è solo stato disegnato sopra il nostro rettangolo, ma è anche dello stesso colore del rettangolo.

Questo perché l'ordine nel quale chiamiamo queste funzioni è estremamente importante. Se avessimo disegnato il rettangolo dopo l'ellisse non avremmo affatto visto il cerchio, perché sarebbe stato sovrascritto. Per quanto riguarda il colore di riempimento del cerchio, è come per il quadrato, perché ogni forma disegnata dopo che è stata chiamata la funzione fill() userà quel colore. Per cambiare il colore del cerchio ci limitiamo a chiamare di nuovo fill con un valore diverso.

Ora abbiamo questo:

Hmm, non è ancora molto entusiasmante. Vediamo cosa si può fare. Ora, ricordate che la maggior parte del nostro codice qui è contenuto nella funzione draw(), e, come abbiamo visto prima, tutto ciò che è nella funzione draw viene chiamato più volte, continuamente. Così fondamentalmente il nostro quadrato e il nostro cerchio sono disegnati continuamente sopra il quadrato e il cerchio che erano stati disegnati nella chiamata precedente della funzione draw.

E se volessimo disegnare le nostre forme in un posto diverso ogni volta?

A tempi diversi, posti diversi

Per disegnare le vostre forme in un posto diverso, potreste essere tentati di modificare i valori delle coordinate. Questo è perfettamente accettabile ed è un ottimo modo per avere il controllo completo sul vostro disegno.

C'è anche un'alternativa. Possiamo cambiare lo spostamento dell'intero canvas, nel senso che possiamo sostituire l'origine, le coordinate (0, 0) in alto a sinistra, con qualcos'altro. Il risultato di questo è che le nostre forme sono disegnate con questo spostamento. Se scrivessimo translate(10, 10); ci ritroveremmo con questo.

Our Updated Square

Notate che le nostre forme ora sono disegnate 10 px dal margine sinistro e 10 px dal margine in alto.

Questo non ha affatto risolto il nostro problema originario delle forme disegnate una sull'altra ripetutamente, ma se cambiassimo l'origine del canvas ad ogni chiamata di draw()? Le forme sarebbero disegnate in una posizione diversa ogni volta. Ma quale posizione? E come possiamo averne una diversa ogni volta che viene chiamata draw()? Per fortuna p5 ci fornisce la funzione random() — un modo facile per generare un numero casuale. La useremo per modificare casualmente lo spostamento del nostro canvas.

Questo ci dà una versione animata di questo:

Animated Block

Wow! Potreste trovare questa animazione un po' troppo veloce. Questo perché p5 disegna le forme più veloce che può, con draw() che viene chiamata continuamente. Se volete rallentare un po' potete modificare il frame rate per ridurre la frequenza alla quale è chiamata draw(). Mettete una chiamata a frameRate() nella vostra funzione setup.

Ora va meglio. È ancora un po' noioso con quel quadrato e quel cerchio sempre uno sopra l'altro. Proviamo a ruotare le nostre forme per rendere le cose più interessanti. E come lo facciamo? Sì, come avrete intuito p5 ci aiuta di nuovo. Prima diciamo a p5 che vogliamo ruotare usando i gradi invece dei radianti, e poi che vogliamo ruotare in modo casuale prima di disegnare ogni forma.

Abbiamo creato un mostro.

A variation on a square

Sono quasi sicuro che nel 1991 avevo una maglietta con questo stesso disegno...

No, mi sto sbagliando, aveva anche dei triangoli gialli. Andiamo fino in fondo e aggiungiamone qualcuno.

Adorabile. Una brutta maglietta degli anni '90 o un Jackson Pollock dei giorni nostri? Dipende da voi. L'arte è negli occhi di chi guarda, dicono.

Jackson Pollock-inspired

Sommario

Spero che abbiate capito da questo tutorial come è facile iniziare a disegnare nel browser con p5.js. p5 ha molti altri metodi utili e comodi per permetterci di disegnare forme, animarle e gestire l'input utente. Se vi interessa saperne di più, visitate la pagina di riferimento di p5 (in inglese) o il mio corso su Envato Tuts+ Arte interattiva con p5.js (in inglese).

Come riferimento, ecco il sorgente completo del nostro schizzo p5:

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.