Programmazione di base con p5.js e VS Code

Disegna nell’area grigia per vedere il risultato del codice successivo.

0. Prima di iniziare

Il codice si scrive in Visual Studio Code, un editor gratuito per Windows, macOS e Linux. Si installa come qualsiasi altro programma, accettando le impostazioni proposte.

I file di base sono contenuti in una cartella di partenza da scompattare dove si tengono i lavori del corso:

index.html è la pagina che il browser apre: carica p5.js e lo sketch, e non va modificata.
style.css è l’aspetto della pagina, per ora quasi vuoto.
sketch.js è il file da aprire e su cui lavorare.

In Visual Studio Code, File › Apri cartella e si sceglie la cartella scompattata (non quella nello ZIP): l’editor mostra i tre file nella colonna di sinistra, e da lì si apre sketch.js.

Per vedere il risultato basta aprire index.html nel browser con un doppio clic, e ricaricare la pagina (F5) dopo ogni salvataggio.

Se si vuole evitare di salvare continuamente lo sketch e ricaricare ogni volta la pagina del browser, si può attivare l’Autosave nelle impostazioni di Visual Studio Code e scaricare l’estensione Live Server che aggiunge una voce “Go Live” in basso a destra.

Per leggere gli errori si può tenere aperta la console del browser: F12, scheda Console. Se lo sketch non disegna niente, l’errore è quasi sempre scritto lì.

1. Impostazioni di base

Funzioni setup() e draw()

  function setup() {  
    // istruzioni da eseguire all'avvio dello sketch
}

function draw() {
    // istruzioni da eseguire a ogni fotogramma 
}

il testo scritto dopo i due caratteri “//” non viene eseguito
[in questa pagina le parti aggiunte o cambiate a ogni passaggio sono evidenziate, e i commenti le descrivono]

Il canvas

  function setup() {
    /*1*/createCanvas(800, 600)/**/  // dimensiona "tela" su cui disegnare
}

function draw() {
    /*1*/background(0, 0, 255)/**/  // riempi "tela" con colore (RGB) blu saturo 
}

provare a modificare la larghezza (800) e l’altezza (600) del canvas
provare a modificare i parametri di background() mantenendoli nell’intervallo fra 0 e 255

Modello cromatico HSL (Hue, Saturation, Lightness)

  function setup() {
    createCanvas(800, 600)
    /*1*/colorMode(HSL)/**/  // imposta modello HSLA (valori massimi: 360, 100, 100, 1)
}

function draw() {
    background(/*1*/240/**/, /*1*/100/**/, /*1*/50/**/)  // riempi "tela" con colore (HSL) blu saturo 
}

provare a modificare i parametri di background() mantenendoli fra 0 e i valori massimi indicati nel primo commento
[per il tono, tenere presente che i colori partono dal rosso: 0 360]
provare a impostare un grigio utilizzando un solo parametro nell’istruzione background()

2. Disegnare

Istruzioni di disegno

  function setup() {
    createCanvas(800, 600)
    colorMode(HSL) 
}

function draw() {
    background(/*1*/20/**/)  // sfondo grigio scuro 
    /*1*/circle(400, 300, 50)/**/  // disegna cerchio alle coordinate 400,300 con diametro di 50 px
}

provare a modificare la posizione (400, 300) e il diametro (50) del cerchio
istruzioni di disegno: point(), line(), rect(), square(), ellipse(), circle(), eccetera

Impostazione attributi di disegno

  function setup() {
    createCanvas(800, 600)
    colorMode(HSL) 
}

function draw() {
    background(20)
    /*1*/stroke(100)/**/  // imposta contorno bianco
    /*1*/fill(0, 100, 40)/**/  // imposta riempimento rosso  
    circle(400, 300, 50) 
}

provare a sostituire l’istruzione fill(0, 100, 40) con l’istruzione noFill()
principali attributi di disegno: stroke(), strokeWeight(), strokeCap(), strokeJoin(), noStroke(), fill(), noFill()

3. Le variabili

Variabili globali

  /*1*/let tono/**/  // dichiarazione della variabile chiamata 'tono' 

function setup() {
    createCanvas(800, 600)
    colorMode(HSL)
    /*1*/tono = 0/**/  // assegnazione valore 0 alla variabile 
}

function draw() {
    background(20)
    stroke(100)  
    fill(/*1*/tono/**/, 100, 40)  // uso della variabile  
    circle(400, 300, 50) 
}

Variabili locali

  let tono

function setup() {
    createCanvas(800, 600)
    colorMode(HSL)
    tono = 0
}

function draw() {
    background(20)
    stroke(100)  
    fill(tono, 100, 40)
    /*1*/let x = width/2/**/  // dichiarazione variabile locale e assegnazione valore iniziale
    /*1*/let y = height/2/**/  // dichiarazione variabile locale e assegnazione valore iniziale
    /*1*/circle(x, y, 50)/**/  // uso variabili locali
}

le variabili width e height sono gestite da p5.js e contengono la larghezza e l’altezza del canvas
l’operatore ‘/’ restituisce il risultato della divisione del valore a sinistra per il valore a destra
[altri operatori aritmetici]

4. (Pseudo)Casualità

  let tono

function setup() {
    createCanvas(800, 600)
    colorMode(HSL)
    tono = /*1*/random(360)/**/  // assegnazione valore a caso fra 0 e 360 (escluso)
}

function draw() {
    background(20)
    stroke(100)  
    fill(tono, 100, 40)
    /*1*/let x = random(100, 700)/**/  // valore a caso fra 100 e 700 (escluso)
    let y = /*1*/300/**/  
    circle(x, y, 50)  
}

l’istruzione random() usata senza parametri restituisce un valore casuale fra 0.0 e 1.0 (escluso)

5. Animazione

Animare (con variabile di sistema ‘frameCount’)

  let tono

function setup() {
    createCanvas(800, 600)
    colorMode(HSL)
    tono = random(360) 
}

function draw() {
    background(20)
    stroke(100)  
    fill(tono, 100, 40)
    let x = /*1*/frameCount/**/  // coordinata 'x' uguale al numero di fotogramma
    let y = 300  
    circle(x, y, 50)  
}

provare a modificare la velocità moltiplicando il valore di frameCount [ad es. con frameCount * 2] o dividendolo [ad es. con frameCount / 2]

Animare per accumulazione progressiva

  let tono

function setup() {
    createCanvas(800, 600)
    colorMode(HSL)
    tono = random(360) 
    /*1*/background(20)/**/  // riempimento sfondo eseguito al solo avvio dello sketch
}

function draw() {
    /*1*/// background(20)/**/  // canvas non più cancellato a ogni fotogramma
    stroke(100)  
    fill(tono, 100, 40)
    let x = frameCount  
    let y = 300  
    circle(x, y, 50)  
}

6. Interattività

  let tono

function setup() {
    createCanvas(800, 600)
    colorMode(HSL)
    tono = random(360) 
    background(20)  
}

function draw() {
    stroke(100)  
    fill(tono, 100, 40)
    let x = /*1*/mouseX/**/  // coordinata 'x' del cursore del mouse
    let y = /*1*/mouseY/**/  // coordinata 'y' del cursore del mouse 
    circle(x, y, 50)  
}

provare a modificare la posizione relativa del cerchio usando una somma [ad es. con mouseX + 5] o una sottrazione [ad es. con mouseY - 10]

7. Controllo del flusso delle istruzioni

Istruzioni condizionali (if)

  let tono

function setup() {
    createCanvas(800, 600)
    colorMode(HSL)
    tono = random(360) 
    background(20)  
}

function draw() {
    /*1*/if (mouseIsPressed == true) {/**/  // se un tasto del mouse è premuto...
        stroke(100)  
        fill(tono, 100, 40)
        let x = mouseX  
        let y = mouseY 
        circle(x, y, 50)  
    /*1*/}/**/
}

approfondimenti: Operazioni con valori booleani e istruzioni condizionali
la variabile mouseIsPressed è gestita da p5.js e contiene il valore true se uno dei tasti del mouse è premuto e false in caso contrario
se il confronto viene fatto con true, la condizione si può scrivere anche così: (isMousePressed)

Istruzioni iterate (for)

  let tono

function setup() {
    createCanvas(800, 600)
    colorMode(HSL)
    tono = random(360) 
    background(20)  
}

function draw() {
    if (mouseIsPressed) {  
        stroke(100)  
        fill(tono, 100, 40)
        let x = mouseX  
        let y = mouseY 
        /*1*/for (let i = 0; i < 50; i = i + 1) {/**/  // ripeti con 'i' da 0 a 49 con incrementi di 1
            /*1*/x = x + 2/**/  // incrementa la coordinata 'x' di 2 pixel
            /*1*/y = y + 2/**/  // incrementa la coordinata 'y' di 2 pixel
            /*1*/circle(x, y, (50-i)/2)/**/  // usa 'i' per ridurre progressivamente il diametro
        /*1*/}/**/
    }
}

approfondimenti: Strutture di controllo iterative

8. Ottimizzazioni

Variazioni occasionali della direzione

  let tono

function setup() {
    createCanvas(800, 600)
    colorMode(HSL)
    tono = random(360)
    background(20)
}

function draw() {
    if (mouseIsPressed) {
        stroke(100)
        fill(tono, 100, 40)
        let x = mouseX
        let y = mouseY
        /*1*/let dx = 2/**/  // incremento della coordinata 'x'
        /*1*/let dy = 2/**/  // incremento della coordinata 'y'
        for (let i = 0; i < 50; i = i + 1) {
            x = x + /*1*/dx/**/  // aggiungi 'dx' alla coordinata 'x'
            y = y + /*1*/dy/**/  // aggiungi 'dy' alla coordinata 'y'
            circle(x, y, (50-i)/2)
            /*1*/if (random() < 0.1) {/**/  // se un numero a caso fra 0 e 1 è inferiore a 0.1...
                /*1*/dx = random(-10, 10)/**/  // imposta 'dx' a caso fra -10 e 10
                /*1*/dy = random(-10, 10)/**/  // imposta 'dy' a caso fra -10 e 10
            /*1*/}/**/
        }
    }
}

gli incrementi fissi di 2 pixel diventano variabili, e cambiano una volta su dieci
provare a modificare le probabilità sostituendo 0.1 (10%) con un valore fra 0.0 (0%) e 1.0 (100%)

Variazioni occasionali del colore

  let tono

function setup() {
    createCanvas(800, 600)
    colorMode(HSL)
    tono = random(360)
    background(20)
}

function draw() {
    if (mouseIsPressed) {
        stroke(100)
        fill(tono, 100, 40)
        let x = mouseX
        let y = mouseY
        let dx = 2
        let dy = 2
        for (let i = 0; i < 50; i = i + 1) {
            x = x + dx
            y = y + dy
            circle(x, y, (50-i)/2)
            if (random() < 0.1) {
                dx = random(-10, 10)
                dy = random(-10, 10)
            }
        }
        /*1*/if (random() < 0.02) {/**/  // due volte su cento...
            /*1*/tono = random(360)/**/  // cambia il tono del riempimento
        /*1*/}/**/
    }
}

il nuovo tono si vede dal disegno successivo, perché fill() viene eseguito prima del ciclo
provare a modificare la frequenza del cambio sostituendo 0.01 (1%) con un valore più alto

Link utili

Approfondimenti su p5.js

Introduction to p5.js, di Stuart Memo
Tutorials (p5js.org), del sito ufficiale
The Coding Train, i video di Daniel Shiffman
Generative Artistry, tutorial di Ruth John e Tim Holman su opere generative storiche

Guida di riferimento

p5.js: Reference