Interazioni fra p5.js e HTML

Introduzione

HTML, CSS e JavaScript

HTML: struttura di base (*)
HTML minimo
HTML+CSS
HTML+CSS+JavaScript
HTML+CSS+JS linkati

(*) attraverso il triangolo sul lato destro della pagina si può passare direttamente alle quattro pagine successive

Visualizzazione codici nel browser

Pannello sviluppatore di Google Chrome

Files nel p5.js Web Editor

Gestione dei file

Codice HTML (index.html)

Adattamento a dispositivi mobili

Metainformazioni della pagina (ad es. il titolo)

Le metainformazioni lette dai motori di ricerca e dai social fanno quasi sempre riferimento al protocollo Open Graph:

Elementi visibili della pagina (aggiunta di uno slider)

Maggiori dettagli sugli slider HTML: <input type=“range”>
L’attributo id permette di identificare in modo univoco un elemento della pagina.

Codice finale

Codice CSS (style.css)

Modifica apparenza dello slider

Regola del contenitore dei checkbox (creato con p5.js)

Regole dei checkbox (creati con p5.js)

Codice finale

Codice p5.js (sketch.js)

Preimpostazioni iniziali

function setup() {
  noCanvas();       // non creare nessun canvas
  pixelDensity(1);  // 1 punto uguale a 1x1 pixel
}

Creazione e uso dell’elemento di cattura da webcam

let video;      // elemento HTML di cattura da webcam 
...
let cols = 36;  // colonne di checkbox (e larghezza in pixel)
let rows = 26;  // righe di checkbox (e altezza in pixel)
...
function setup() {
  ...
  video = createCapture(VIDEO); // crea elemento di cattura
  video.size(cols, rows);       // ridimensiona fotogramma a 'cols' x 'rows'   
}
function draw() {
  video.loadPixels();  // carica i valori RGBA nell'array 'pixels' di 'video'
  ...
  for (let y = 0; y < video.height; y++) {
    for (let x = 0; x < video.width; x++) {
      ...
      let r = video.pixels[index+0];  // leggi il valore di rosso
      let g = video.pixels[index+1];  // leggi il valore di verde
      let b = video.pixels[index+2];  // leggi il valore di blu
      ...
    }
  }
}

Per capire meglio come sono organizzati i dati nell’array ‘pixels’, vedi figure in:
Manipulating Canvas Pixel Data with JavaScript

Creazione del contenitore (di checkbox) e dei checkbox

...
let boxes = [];  // array di checkbox
function setup() {
  ...
  createDiv("").id("mirror");  // crea DIV identificato come "mirror" 

  for (let y = 0; y < rows; y++) {    // per ogni riga...
    for (let x = 0; x < cols; x++) {  // per ogni punto della riga...
      let box = createCheckbox();     // crea un checkbox HTML
      box.style('display', 'inline'); // allinealo come carattere
      box.class("box");               // assegna classe "box" [vedi codice CSS]
      box.parent('mirror');           // inserisci elemento nel contenitore
      boxes.push(box);                // inserisci riferimento nell'array
    }
    let linebreak = createSpan('<br>'); // crea elemento forzatura a capo
    linebreak.parent('mirror');         // inserisci a capo nel contenitore
  }
}
...

Lettura del valore dello slider (soglia luminosità)

...
let slider;
...
function setup() {
  ...
  slider = select("#threshold");  // riferimento a slider inserito nell'HTML
  ...
}

function draw() {
  ...
  let thresholdBright = slider.value();  // lettura posizione corrente
  ...
}

Modifica dello stato dei checkbox

...
function draw() {
  ...
  for (let y = 0; y < video.height; y++) {   // per ogni riga...
    for (let x = 0; x < video.width; x++) {  // per ogni punto della riga...
      
      let index = (y * video.width + x) * 4; // indice del rosso del pixel x,y
      let r = video.pixels[index+0];         // leggi il rosso 
      let g = video.pixels[index+1];         // leggi il verde 
      let b = video.pixels[index+2];         // leggi il blu 
      let bright = (r+g+b)/3;                // luminosità del pixel (media valori)    
    
      let checkIndex = y * cols + x;         // indice del checkbox nell'array
      if (bright >= thresholdBright) {       // se luminosità maggiore soglia...     
        boxes[checkIndex].checked(false);    // togli contrassegno
      } else {                               // altrimenti...
        boxes[checkIndex].checked(true);     // metti contrassegno
      }
    }
  }
}

Codice finale

let video;
let slider;

let cols = 36;
let rows = 26;

let boxes = [];

function setup() {
  noCanvas();
  pixelDensity(1);
  
  video = createCapture(VIDEO);
  video.size(cols, rows);
  
  slider = select("#threshold");
  createDiv("").id("mirror");

  for (let y = 0; y < rows; y++) {
    for (let x = 0; x < cols; x++) {
      let box = createCheckbox();
      box.style('display', 'inline');
      box.class("box");
      box.parent('mirror');
      boxes.push(box);
    }
    let linebreak = createSpan('<br/>');
    linebreak.parent('mirror');
  }
}

function draw() {
  video.loadPixels();
  
  let thresholdBright = slider.value();

  for (let y = 0; y < video.height; y++) {
    for (let x = 0; x < video.width; x++) {
      
      let index = (y * video.width + x) * 4;
      let r = video.pixels[index+0];
      let g = video.pixels[index+1];
      let b = video.pixels[index+2];
      let bright = (r+g+b)/3;
    
      let checkIndex = y * cols + x;
      if (bright >= thresholdBright) {
        boxes[checkIndex].checked(false);
      } else {
        boxes[checkIndex].checked(true);
      }
    }
  }
}

Appendice

Codici di partenza

Codice completo nel web editor:
Interazioni p5.js HTML

Esempio di partenza (di Daniel Shiffman):

Creare un sito Web semplice con HTML, CSS e JavaScript
[con introduzione a Visual Studio Code]

A complete guide to making web pages from scratch
[meno dispersivo del precedente ma l’autore deve aver cancellato o spostato la cartella delle immagini]

HTML Tutorial
Tutorial HTML ed elenco completo degli elementi e dei possibili attributi.

CSS Tutorial
Tutorial CSS ed elenco completo delle proprietà e dei possibili valori.

Classe p5.Element
Metodi di tutti gli elementi HTML di p5.js un po’ nascosti nella guida.