Esercizio introduttivo a p5.js

Screenshot risultato|672

0. Il Web Editor di p5.js

Sito per l’editing online del codice:
P5.js Web Editor.

Non è necessario registrarsi se si vuole solo modificarlo il codice ed eseguirlo [icona “play” in alto a sinistra] ma è necessario creare un profilo se si vuole salvare lo sketch (come viene chiamato il codice scritto).

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 i commenti evidenziano e descrivono i cambiamenti progressivi al codice]

Il canvas

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

function draw() {
    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)
    colorMode(HSL)  // imposta modello HSLA (valori massimi: 360, 100, 100, 1)
}

function draw() {
    background(240, 100, 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(20)  // sfondo grigio scuro 
    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)
    stroke(100)  // imposta contorno bianco
    fill(0, 100, 50)  // imposta riempimento rosso  
    circle(400, 300, 50) 
}

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

3. Le variabili

Variabili globali

  let tono  // dichiarazione variabile chiamata 'tono' 

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

function draw() {
    background(20)
    stroke(100)  
    fill(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)
    let x = width/2  // dichiarazione variabile locale e assegnazione valore iniziale
    let y = height/2  // dichiarazione variabile locale e assegnazione valore iniziale
    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 = random(360)  // assegnazione valore a caso fra 0 e 360 (escluso)
}

function draw() {
    background(20)
    stroke(100)  
    fill(tono, 100, 40)
    let x = random(100, 700)  // valore a caso fra 100 e 700 (escluso)
    let y = 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 = frameCount  // coordinata 'x' uguale al numero di fotogramma
    let y = 300  
    circle(x, y, 50)  
}

provare a modificare la velocità usando una moltiplicazione [ad es. con frameCount * 2] o una divisione [ad es. con frameCount / 2]

Animare per accumulazione progressiva

  let tono

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

function draw() {
    // 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 = mouseX  // coordinata 'x' del cursore del mouse
    let y = 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() {
    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)  
    }
}

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 
        for (let i = 0; i < 50; i = i + 1) {  // ripeti con 'i' da 0 a 49 con incrementi di 1
            x = x + 2  // incrementa la coordinata 'x' di 2 pixel
            y = y + 2  // incrementa la coordinata 'y' di 2 pixel
            circle(x, y, (50-i)/2)  // usa 'i' per ridurre progressivamente il diametro
        }
    }
}

approfondimenti: Strutture di controllo iterative

8. Ottimizzazioni

Variazioni occasionali di un parametro

  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  // incremento della coordinata 'x'
        let dy = 2  // incremento della coordinata 'y'
        for (let i = 0; i < 50; i = i + 1) {
            x = x + dx  // aggiungi 'dx' alla coordinata 'x'
            y = y + dy  // aggiungi 'dy' alla coordinata 'y'
            circle(x, y, (50-i)/2)
            if (random() < 0.1) {  // se un numero a caso fra 0 e 1 è inferiore a 0.1...
                dx = random(-10, 10)  // imposta 'dx' a caso fra -10 e 10
                dy = random(-10, 10)  // imposta 'dy' a caso fra -10 e 10
            }
        }
    }
}

provare a modificare le probabilità di reimpostazione casuale degli incrementi dx e dy sostituendo 0.1 (10%) con un valore compreso fra 0.0 (0%) e 1.0 (100%)

Interattività 2: cambio tono al click del mouse

  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)  
            }
        }
    }
}

function mouseClicked() {  // al clic del mouse...
    tono = tono + random(60, 120)  // aggiungi valore casuale fra 60 e 120 al tono
    if (tono >= 360) {  // se il valore supera o è uguale a 360...
        tono = tono - 360  // sottrai 360 (e riporta 'tono' a 0 o poco più)
    }
}

provare a modificare i valori minimo e massimo di random(45, 135)

Interattività 3: cancellazione sfondo con tastiera

  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)  
            }
        }
    }
}

function mouseClicked() { 
    tono = tono + random(60, 120)  
    if (tono >= 360) {  
        tono = tono - 360 
    }
}

function keyReleased() {  // al rilascio di un tasto della tastiera...
    if (keyCode==DELETE || keyCode==BACKSPACE) {  // se il tasto è "Canc" o "⌫"... 
        background(20)  // cancella sfondo con grigio scuro
    }
}