Introduzione alla programmazione e a p5.js

Premesse

L’esercitazione ha l’obiettivo di introdurre i concetti di base della programmazione, dalle variabili alle classi, e le peculiarità principali di p5.js rispetto a JavaScript.

Il sito per l’editing online del codice è: P5.js Web Editor.
Non è necessario registrarsi se si vuole solo modificare 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).

La presenza dell’icona ▶ è un invito a eseguire il codice subito dopo la modifica.

01. Funzioni setup() e draw()

• cos’è una funzione
• setup() e draw() (chiamate automaticamente da p5.js)
  • nel setup(): provare a inserire print("chiamata setup()")   ▶
  • nel draw(): provare ad aggiungere print("chiamata draw()")   ▶

02. Colori

• nel setup() (senza draw()): solo background(0)   ▶
• modalità cromatica predefinita (RGB)
  • grigi: background(128)   ▶
  • colori: background(180, 204, 230)   ▶
  • grigi semitrasparenti: background(128, 128)   ▶
  • colori semitrasparenti: background(180, 204, 230, 128)   ▶
• uso della modalità cromatica HSL
  • inizio setup(): colorMode(HSL)   ▶
  • grigio: background(50)   ▶
  • colore: background(210, 50, 80)   ▶
  • trasparenza: background(210, 50, 80, 0.5)   ▶

Modifiche complessive

  function setup() {
  colorMode(HSL)
  background(210, 50, 80)
}

03. Dimensioni del canvas

• cambiamento dimensioni area di disegno (canvas)
  • nel setup() (prima di colorMode()): createCanvas(400,300)   ▶
• canvas creato con le dimensioni della finestra di visualizzazione
  • uso valori windowWidth e windowHeight: createCanvas(windowWidth, windowHeight)   ▶
• adattamento continuo alle dimensioni della finestra di visualizzazione
  • intercettazione ridimensionamento finestra: windowResized()
  • ridimensionamento del canvas: resizeCanvas()
  • canvas adattato al ridimensionamento della finestra:

      function windowResized() {
      resizeCanvas(windowWidth, windowHeight)
    }
    

  • verifica funzionamento: dopo resizeCanvas(): background(210, 50, 80)   ▶

Modifiche complessive

  function setup() {
  createCanvas(windowWidth, windowHeight)
  colorMode(HSL)
  background(210, 50, 80)
}
function windowResized() {
  resizeCanvas(windowWidth, windowHeight)
}

04. Disegno di forme geometriche

• disegno di un cerchio: circle()
  • nel draw(): circle(0, 0, 200)   ▶
  • spostamento dall’origine (in alto a sinistra): circle(50, 50, 200)   ▶
  • cambiamento dimensione: circle(50, 50, 100)   ▶
• riempimento e contorno
  • colore di riempimento: fill()
  • riempimento azzurro chiaro (prima di circle()): fill(200, 55, 85)   ▶
  • colore del contorno: stroke()
  • contorno bianco (prima di circle()): stroke(100)   ▶
  • spessore del contorno: strokeWeight()
  • spessore di 10 pixel (prima di circle()): strokeWeight(10)   ▶
  • forzatura spessore di default (1 pixel): strokeWeight(1)   ▶

Modifiche complessive

  ....
function draw() {
  fill(200, 55, 85)
  stroke(100)
  strokeWeight(1)
  circle(50, 50, 100)
}
....

05. Variabili e parametrizzazione

• memorizzare e utilizzare valori variabili
• definire e inizializzare variabili globali (utilizzabili in ogni parte del codice):

    let x = 50
  let y = 50
  let diameter = 100
  function setup() {
    ....
  }
  

• leggere i valori memorizzati
  • nel draw(): usare le variabili nel circle(): circle(x, y, diameter)   ▶
• ulteriore cerchio (luce della bolla)
  • aggiungere altro circle(x, y, diameter)
  • impostare dimensioni proporzionali a cerchio precedente (1/8 del diametro): circle(x, y, diameter / 8)   ▶
  • ottenere spostamenti proporzionali:   ▶

      let offset = diameter / 5  // variabile locale utilizzabile solo
                               // nel blocco (fra {}) in cui è definita
    circle(x-offset, y-offset, diameter/8)
    

  • moltiplicazione anziché divisione, per intuire meglio percentuale (20% anziché 1/5): let offset = diameter * 0.2   ▶
  • disattivazione contorno (prima del 2° circle()): noStroke()   ▶
  • riempimento bianco (prima del 2° circle()): fill(100)   ▶

Modifiche complessive

  let x = 50
let y = 50
let diameter = 100
function setup() {
  ....
}
function draw() {
  fill(200, 55, 85)
  stroke(100)
  strokeWeight(1)
  circle(x, y, diameter)

  fill(100);
  noStroke();
  let offset = diameter * 0.2
  circle(x-offset, y-offset, diameter / 8)
}

06. Animazione

• variazione progressiva dei parametri geometrici
  • aggiunta variabile (globale) di incremento della posizione: let speed = 5
  • alla fine del draw(): incremento variabile x: x = x + speed   ▶
  • incremento variabile y (anziché x): y = y + speed   ▶
  • decremento variabile y: y = y - speed   ▶
• animazione anziché accumulazione progressiva di disegni
  • spostamento di background(210, 50, 80) dal setup() all’inizio del draw()   ▶
• partenza dal basso della bolla
  • nel setup() (perché height non è disponibile prima): y = height   ▶

Modifiche complessive

  ....
let y
....
let speed = 5
function setup() {
  ....
  y = height
}
function draw() {
  background(210, 50, 80)
  ....
  y = y - speed
}

07. Casualità

• la funzione random()
• rendere casuale il valore di x, fra margine sinistro (0) e margine destro (width)
  • nel setup() (perché random() non è disponibile prima): x = random(width)   ▶
• rendere casuale il diametro, fra 50 pixel e 120
  • nel setup(): diameter = random(50, 120)   ▶
• rendere casuale la velocità, da 1 pixel al fotogramma a 5 pixel al fotogramma
  • nel setup(): speed = random(1, 5)   ▶
• dipendenza valori da parametro casuale (diameter)
  • spostare inizializzazione di diameter a prima di quella di x
  • variabile y dipendente dal raggio (diameter/2): y = height + diameter/2   ▶
  • velocità proporzionale al diametro: let speed = diameter / 30   ▶

Modifiche complessive

  let diameter
let x
let y
let speed
function setup() {
  ....
  diameter = random(50, 120)
  x = random(width)
  y = height + diameter/2
  speed = diameter / 30
}
....

08. Classi e proprietà

• definire in un’unica entità le variabili e le istruzioni di oggetti simili
• differenza fra classe e istanze
• definire la classe della bolla e le sue proprietà:
  • creare la classe:

      class Bubble {
    
    }
    .... // variabili globali
    function setup() {
      ....
    }
    function draw() {
      ....
    }
    ....
    

  • definire le proprietà della classe (con il this) e i valori iniziali:

      class Bubble {
      constructor() {
        this.diameter = random(50, 120)
        this.x = random(width)
        this.y = height + diameter/2
        this.speed = diameter / 30
      }
    }
    

• riadattare il codice
  • eliminare le variabili globali x, y, diameter e speed
  • aggiungere la variabile globale per l’istanza della classe Bubble: let bubble
  • nel setup(): creare l’istanza: bubble = new Bubble()
  • nel draw(): usare le proprietà del’istanza al posto delle variabili:
    x -> bubble.x
y -> bubble.y
diameter -> bubble.diameter
speed -> bubble.speed   ▶

Modifiche complessive

  class Bubble {
  constructor() {
    this.diameter = random(50, 120)
    this.x = random(width)
    this.y = height + diameter/2
    this.speed = diameter / 30
  }
}
let bubble
function setup() {
  ....
  bubble = new Bubble()
}
function draw() {
  ....
  circle(bubble.x, bubble.y, bubble.diameter)
  ....
  let offset = bubble.diameter * 0.2
  circle(bubble.x-offset, bubble.y-offset, bubble.diameter/8)
}

09. Metodi delle classi

• aggiunta metodi alla classe
• metodo display() (per disegno della bolla)

    class Bubble {
    ....
    display() {
    }
  }
  

  • spostamento istruzioni del draw() (tranne background()) nel metodo display()
  • nel display(): sostituzione di bubble con this (riferimento a proprietà della classe):
    bubble.x -> this.x
bubble.y -> this.y
bubble.diameter -> this.diameter
bubble.speed -> this.speed
• uso del metodo display()
  • nel draw() (dopo background()): bubble.display()   ▶

Modifiche complessive

  class Bubble {
  ....
  display() {
    fill(200, 55, 85)
    stroke(255)
    strokeWeight(1)
    circle(this.x, this.y, this.diameter)
    
    fill(100)
    noStroke()
    let offset = this.diameter * 0.2
    circle(this.x-offset, this.y-offset, this.diameter/8)
  }  
}
....
function draw() {
  background(210, 50, 80)
  bubble.display()
}

10. Array di istanze

• sostituzione istanza singola (bubble) con array di istanze
  • sostituzione di let bubble con let bubbles = [] (array vuoto)
• creazione di due istanze e memorizzazione nell’array
  • nel setup(): sostituzione di bubble = new Bubble() con bubbles[0] = new Bubble()
  • aggiunta istanza all’array: bubbles[1] = new Bubble()
• uso delle istanze
  • nel draw(): sostituzione di bubble.display() con bubbles[0].display()   ▶
  • aggiunta chiamata metodo seconda istanza: bubbles[1].display()   ▶

Modifiche complessive

  ....
let bubbles = []
function setup() {
  ....
  bubbles[0] = new Bubble()
  bubbles[1] = new Bubble()
}
function draw() {
  background(210, 50, 80)
  bubbles[0].display()
  bubbles[1].display()
}

11. Ripetizione di istruzioni

• ripetizione di istruzioni: la struttura di controllo for
• creazione di più istanza e loro memorizzazione e uso
  • definire variabile globale con numero di elementi dell’array: let totalBubbles = 50
  • nel setup(): al posto di bubbles[0] = new Bubble() e bubbles[1] = new Bubble() inserire:

      for (let i = 0; i < totalBubbles; i++) {
      let b = new Bubble()
      bubbles.push(b)
    }
    

  • nel draw(): al posto di bubbles[0].display() e bubbles[0].display() inserire:   ▶

      for (let i = 0; i < bubbles.length; i++) {
      let b = bubbles[i]
      b.display()
    }
    

Modifiche complessive

  let bubbles = []
let totalBubbles = 50
function setup() {
  ....
  for (let i = 0; i < totalBubbles; i++) {
    let b = new Bubble()
    bubbles.push(b)
  }
}
function draw() {
  background(210, 50, 80)
  for (let i = 0; i < bubbles.length; i++) {
    let b = bubbles[i]
    b.display()
  }
}

12. Istruzioni condizionali

• far eseguire o meno un’istruzione: la struttura di controllo if
• riportare in basso la bolla quando esce dal canvas
  • nel metodo display() della classe: aggiungere:   ▶

      if (this.y < 0) {
      this.y = height + this.diameter/2;
    }
    

  • per la sparizione completa della bolla, sostituire la condizione this.y < 0 con this.y < this.diameter/2   ▶

Modifiche complessive

  class Bubble {
  ....
  display() {
    ....
    if (this.y < this.diameter/2) {
      this.y = height + this.diameter/2;
    }
  }  
}

13. Interattività

• eventi e variabili di sistema (gestiti da p5.js)
• intercettare la pressione del tasto del mouse: mousePressed()
  • fuori da ogni altra funzione: aggiunta di un’istanza alla pressione del tasto del mouse:   ▶

      function mousePressed() {
      bubbles.push( new Bubble() )
    }
    

• posizionamento istanza sotto il cursore del mouse: le variabili mouseX e mouseY
  • nel mousePressed(): al posto di bubbles.push(new Bubble()):   ▶

      let b = new Bubble()
    b.x = mouseX
    b.y = mouseY
    bubbles.push( b )
    

• modifica del cursore del mouse (per suggerire possibilità di interazione)
  • nel setup(): cursor("cell")   ▶

Modifiche complessive

  function setup() {
  ....
  cursor("cell")
}
function draw() {
  ....
}
function mousePressed() {
  let b = new Bubble()
  b.x = mouseX
  b.y = mouseY
  bubbles.push( b )
}

14. Aggiunta proprietà

• usare una proprietà per limitare la durata dell’istanza (ad esempio: life)
  • nel costruttore della classe: aggiungere this.life = random(100,1000)
• ridurre la “vita” dell’istanza a ogni fotogramma
  • nel metodo display(): aggiungere this.life = this.life - 1
  • per evitare che scenda sotto lo 0 (“scoppio” dell’istanza):

      if (this.life > 0) {
      this.life = this.life - 1
    }
    

• prova temporanea: nel 1° fill() del display(): fill(200, 55, 85, this.life/1000)
• separazione visualizzazione (sole istruzioni di disegno) da aggiornamento (sola gestione valori delle proprietà)
  • aggiunta metodo update():

      class Bubble {
      ....
      update() {
    
      }  
    }
    

  • trasferimento codici di aggiornamento delle proprietà da display():

      class Bubble {
      ....
      update() {
        this.y = this.y - this.speed;
        if (this.y < -this.diameter/2) {
          this.y = height+this.diameter/2
        }
        if (this.life > 0) {
          this.life = this.life - 1
        }
      }  
    }
    

• eliminare istanze “scoppiate”, senza creare confusione con gli indici dell’array
  • nel draw(): invertire ordine di lettura: for (let i=bubbles.length-1; i >= 0; i=i-1) {
  • display() eseguito solo se istanza non “scoppiata”:

      let b = bubbles[i]
    b.update();
    if (b.life > 0) {
      b.display()
    } 
    

  • eliminazione istanza in caso contrario:

      if (b.life > 0) {
      ....
    } else {
      bubbles.splice(i, 1)
    }
    

• far apparire le nuove istanze sopra le altre
  • nel mousePressed(): sostituire bubbles.push(b) con bubbles.unshift(b)

Modifiche complessive

  class Bubble {
  constructor() {
    ...
    this.life = random( 100, 1000 )
  }
  display() {
    fill(200, 55, 85)
    stroke(255)
    strokeWeight(1)
    circle(this.x, this.y, this.diameter)

    fill(100)
    noStroke()
    let offset = this.diameter * 0.2
    circle(this.x - offset, this.y - offset, this.diameter / 8)
  }
  update() {
    this.y = this.y - this.speed
    if (this.y < -this.diameter/2) {
      this.y = height+this.diameter/2
    }
    if (this.life > 0) {
      this.life = this.life - 1
    }
  }  
}
...
function draw() {
  ...
  for ( let i=bubbles.length-1;  i >= 0;  i=i-1 ) {
    let b = bubbles[i]
    b.update()
    if (b.life > 0) {
      b.display()
    } else {
      bubbles.splice(i, 1)
    }
  }
}
function mousePressed() {
  ...
  bubbles.unshift( b )
} 

Codice finale

  class Bubble {
  constructor() {
    this.diameter = random(50, 120)
    this.x = random(width)
    this.y = height+this.diameter/2
    this.speed = this.diameter / 30
    this.life = random( 100, 1000 )
  }
  display() {
    fill(200, 55, 85)
    stroke(255)
    strokeWeight(1)
    circle(this.x, this.y, this.diameter)

    fill(100)
    noStroke()
    let offset = this.diameter * 0.2
    circle(this.x - offset, this.y - offset, this.diameter / 8)
  }
  update() {
    this.y = this.y - this.speed
    if (this.y < -this.diameter/2) {
      this.y = height+this.diameter/2
    }
    if (this.life > 0) {
      this.life = this.life - 1
    }
  }
}

let bubbles = []
let totalBubbles = 100

function setup() {
  createCanvas(windowWidth, windowHeight)
  colorMode(HSL)
  cursor("cell")

  for ( let i=0;  i < totalBubbles;  i=i+1 ) {
      bubbles[i] = new Bubble()
  }
}

function draw() {
  background(210, 50, 80)
  
  for ( let i=bubbles.length-1;  i >= 0;  i=i-1 ) {
    let b = bubbles[i]
    b.update()
    if (b.life > 0) {
      b.display()
    } else {
      bubbles.splice(i, 1)
    }
  }
}

function mousePressed() {
  let b = new Bubble()
  b.x = mouseX
  b.y = mouseY
  bubbles.unshift( b )
} 

function windowResized() {
  resizeCanvas(windowWidth, windowHeight)
  background(210, 50, 80)
}

Sketch sul Web Editor

Link utili

Esempio di partenza: How to Program Interactive Art With p5.js.

Introduzione ai concetti base di p5.js: Introduzione a p5.js

Guida di riferimento alle variabili e alle istruzioni di p5.js: P5.js Reference