Funzione setup() e canvas
Funzione di base
function setup() {
}
Tutte le istruzioni p5.js devono essere inserite in una funzione.
La funzione setup() deve contenere le istruzioni da eseguire una sola volta all'avvio dello sketch.
Commenti
function setup() {
// commento su una riga
/* questo è un commento
su più righe */
// rect( 10, 10, 80, 60 );
}
Le parole inserite dopo i caratteri // o fra i caratteri /* e */ non vengono eseguite.
I commenti possono essere utilizzati anche per disattivare temporaneamente un'istruzione.
Sintassi delle istruzioni
Gli spazi fra i parametri e le virgole possono essere tolti ma possono essere usati per rendere più leggibli i gruppi di valori:
rect( 10,10, 80,60 );
Colore dello sfondo (grigi)
function setup() {
background( 200 );
}
Se l'istruzione background() viene usata con un solo parametro, il valore corrisponde al valore di grigio da 0 (nero) a 255 (bianco).
Se l'istruzione non viene usata lo sfondo rimane trasparente.
Provare a copiare l'istruzione nel setup() del file index.html e a modificare il parametro.
Colore dello sfondo (RGB)
function setup() {
background( 128, 0, 255 );
}
Se l'istruzione background() viene usata con tre parametri, i valori corrispondono alle quantità di rosso, verde e blu.
Provare a copiare l'istruzione nel file index.html e a modificare i tre parametri osservando le variazioni di colore.
Dimensioni del canvas
function setup() {
createCanvas( 400, 300 );
background( 200 );
}
I parametri dell'istruzione createCanvas() indicano la larghezza e l'altezza in pixel del nuovo canvas.
Se l'istruzione non viene usata, le dimensioni vengono preimpostate da p5.js a 100x100 pixel.
Sistema di riferimento 2D
Sistema di riferimento 3D (Processing e p5.js)
In p5.js l'orientamento degli assi è lo stesso ma l'origine (il punto 0,0,0) si trova al centro dello schermo.
L'istruzione createCanvas() permette di predisporre uno spazio 3D aggiungendo WEBGL come terzo parametro.
Primitive grafiche di base
Disegno di punti
function setup() {
background( 200 );
point( 50, 40 );
}
Dimensione dei punti e spessore dei contorni
function setup() {
background( 200 );
strokeWeight( 5 );
point( 50, 40 );
}
Linee
function setup() {
background( 200 );
line( 20,70, 80,30 );
}
Rettangoli (e quadrati)
function setup() {
background( 200 );
rect( 20,30, 60,40 );
}
Ellissi (e cerchi)
function setup() {
background( 200 );
ellipse( 50,50, 70,40 );
}
Archi
function setup() {
background( 200 );
arc( 50,50, 70,70, 0,2 );
}
Provare a modificare l'ultimo parametro (2) fino a chiudere quasi il cerchio tenendo presente che nella programmazione i decimali vengono separati dal punto e non dalla virgola.
Uso del colore
Riempimenti grigi
function setup() {
background( 200 );
fill( 150 );
ellipse( 50,50, 70,70 );
}
Grigi semitrasparenti
function setup() {
background( 200 );
rect( 5,30, 90,40 );
fill( 90, 120 );
ellipse( 50,50, 70,70 );
}
Riempimenti colorati (RGB)
function setup() {
background( 200 );
fill( 255, 230, 0 );
ellipse( 50,50, 70,70 );
}
Color semitrasparenti
function setup() {
background( 200 );
rect( 5,30, 90,40 );
fill( 255, 230, 0, 120 );
ellipse( 50,50, 70,70 );
}
Disattivazione del riempimento
function setup() {
background( 200 );
noFill();
ellipse( 50,50, 70,70 );
}
Colore dei contorni (dei punti e delle linee)
function setup() {
background( 200 );
stroke( 120, 0, 255 );
ellipse( 50,50, 70,70 );
}
I parametri per impostare i grigi e l'opacità sono gli stessi dell'istruzione fill().
Disattivazione del contorno
function setup() {
background( 200 );
noStroke();
ellipse( 50,50, 70,70 );
}
Stato degli attributi grafici
function setup() {
background( 200 );
fill( 255, 230, 0 );
ellipse( 50,50, 70,70 );
rect( 5,30, 90,40 );
}
Ogni impostazione grafica (riempimento, colore contorno, spessore, ecc.) rimane valida finché non viene modificata di nuovo dalla relativa istruzione.
Modello cromatico HSB (o HSV)
function setup() {
background( 200 );
colorMode( HSB, 360,100,100 );
fill( 50, 100, 100 );
ellipse( 50,50, 70,70 );
}
Provare a modificare i parametri dell'istruzione fill() fino a ottenere questo colore: .
Modello cromatico HSL
function setup() {
background( 200 );
colorMode( HSL, 360,100,100 );
fill( 50, 100, 50 );
ellipse( 50,50, 70,70 );
}
Provare a modificare i parametri dell'istruzione fill() fino a ottenere questo colore: .
Poligoni irregolari e curve
Triangoli
function setup() {
background( 200 );
triangle( 50,20, 90,80, 10,80 );
}
Quadrangoli
function setup() {
background( 200 );
quad( 30,40, 90,10, 70,60, 10,90 );
}
Curve di Bézier
function setup() {
background( 200 );
bezier( 30,25, 80,10, 80,80, 30,80 );
}
Uso grafico delle curve di Bézier
Procedimento logico: Spurious Splines
Poligoni irregolari
function setup() {
background( 200 );
beginShape();
vertex( 20,15 );
vertex( 45,15 );
vertex( 45,50 );
vertex( 95,50 );
vertex( 40,90 );
endShape();
}
Poligoni irregolari con curve
function setup() {
background( 200 );
beginShape();
vertex( 20,15 );
vertex( 45,15 );
vertex( 45,50 );
vertex( 95,50 );
vertex( 40,90 );
bezierVertex( 10,95, 5,15, 20,15 );
endShape();
}
Uso del testo e dei font
Visualizzazione del testo
function setup() {
background( 200 );
text( "Testo", 50,50 );
}
Allineamento del testo
function setup() {
background( 200 );
textAlign( CENTER );
text( "Testo", 50,50 );
}
Dimensione del testo
function setup() {
background( 200 );
textSize( 30 );
text( "Testo", 10,50 );
}
Testo multilinea
function setup() {
background( 200 );
text( "uno due tre quattro", 20,40, 45,60 );
}
Uso di un font esterno
var font;
function preload() {
font = loadFont("assets/vanessa.ttf");
}
function setup() {
background( 200 );
textFont( font, 30 );
text( "Testo", 3,50 );
}
La funzione preload() viene eseguita prima di setup() che rimane in sospeso fino al caricamento dei file esterni [vedi cartella "assets"].
La variabile font permette di mantenere in memoria il font che potrà quindi essere usato immediatamente nel resto del codice... ma delle variabili parleremo in modo più approfondito nella prossima lezione.
P5.js prevede la possibilità di indicare il nome del font nell'istruzione textFont() senza doverlo caricare. Si sconsiglia però l'uso di questa possibilità perché il font dovrebbe essere già installato su tutti i computer che dovranno visualizzare la grafica.