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

  ...
  <head>
    ...
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    ...
  </head>
...

Metainformazioni della pagina (ad es. il titolo)

  ...
  <head>
    ...
    <title>Interazioni fra p5.js e HTML</title>
    ...
  </head>
...

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)

  ...
  <body>
    ...
    <input id="threshold" type="range" min="0" max="255">
    ...
  </body>
...

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

Codice finale

  <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <title>Interazioni fra p5.js e HTML</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <main></main>
    <input id="threshold" type="range" min="0" max="255">
    <script src="sketch.js"></script>
  </body>
</html>

Codice CSS (style.css)

Modifica apparenza dello slider

  
  #threshold {
  appearance: none;       /* disattiva visualizzazione di default */
  border: 1px solid #888; /* imposta bordi */
  border-radius: 10px;    /* arrotonda bordi */
  display: inline;        /* allinea come carattere */
}

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

  
  #mirror {
  white-space: nowrap; /* disattiva a capo automatico */
}

Regole dei checkbox (creati con p5.js)

  
  .box {                    /* contenitore checkbox */
  background-color: #ddd; /* sfondo grigio chiaro */
}
.box input {              /* checkbox */
  margin-top: 1px;        /* spazio superiore: 1 pixel */
  margin-left: 2px;       /* spazio inferiore: 2 pixel */ 
}

Codice finale

  
  html, body {
  margin: 0;
  padding: 0;
}
#threshold {
  appearance: none;
  border: 1px solid #888;
  border-radius: 10px;
  display: inline;
}
#mirror {
  white-space: nowrap;
}
.box {
  background-color: #ddd;
}
.box input {
  margin-top: 1px;
  margin-left: 2px;
}

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

Link utili

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.