Sketch di base strutturato a tavole

Codice di base

Sul web editor sono stati predisposti due sketch di base già strutturati su più file e facilmente duplicabili attraverso la voce “File / Duplica” (visibile dopo il login):

tavole a dimensione fissa tavole a dimensione variabile

Per usarne uno dei due è sufficiente:

duplicarlo dal proprio account del Web Editor [menu: File / Duplica],
aggiungere eventuali file usati nel progetto (font, audio, librerie, ecc.),
scrivere il codice comune a tutte le tavole (caricamento dei file, impostazione attributi globali, ecc.) nel file “sketch.js” e
scrivere il codice specifico di ogni tavola nei file “tavola_NN.js”.

Sul web editor si trova anche un esempio d’uso minimale dello sketch di base con alcune delle possibili tecniche utilizzabili nelle tavole e per la navigazione dall’una all’altra.

Strutturazione dello sketch

I file presenti all’interno sketch di base, visualizzabili attraverso l’icona “>” visibile in alto a sinistra nel Web Editor, sono:

Sketch Files
- index.html
- preview.png
- sketch.js
- style.css
- tavola_00.js (copertina)
- tavola_01.js
- tavola_02.js
- tavola_NN.js
- …

index.html

È il primo file letto dal browser e contiene le informazioni sulla pagina e i riferimenti ai codici JavaScript e CSS salvati in file esterni.
Nello sketch di base è già presente buona parte del codice necessario a definire le informazioni per i social network e i motori di ricerca. Mancano ovviamente i dati strettamente dipendenti dallo sketch che sono evidenziati in MAIUSCOLO e devono essere ridefiniti.

preview.png

È l’immagine che verrà usata nella condivisione sui social network. La risoluzione minima consigliata è di 1200 x 630 pixel ma si può usare una risoluzione più alta purché con un rapporto larghezza:altezza uguale, o vicina, a 1,91:1. Le modalità di creazione e caricamento sono le stesse delle esercitazioni.

style.css

È il file solitamente usato per definire l’aspetto degli elementi HTML presenti nella pagina. In questo caso gli elementi grafici saranno disegnati tutti all’interno del canvas ma negli sketch di base sono state definite le regole minime per gestire la centratura e il ridimensionamento del canvas.

sketch.js

È il codice principale dello sketch p5.js che si limita a chiamare le funzioni setup_N() e draw_N() della tavola da visualizzare e i relativi gestori degli eventi definiti.
Può essere usato per definire le variabili globali (valide per tutte le tavole), caricare i font, gli audio o altri file, impostare attributi grafici comuni e aggiungere i gestori di ulteriori eventi non definiti.

tavola_NN.js

Contengono le funzioni setup_N() e draw_N() specifiche per ogni tavola ed eventuali gestori di eventi chiamati automaticamente dal codice di “sketch.js”.
Il file “tavola_00.js” contiene il codice della copertina del progetto.

Operazioni con le tavole

Aggiungere una tavola

Se le tavole già definite non sono sufficienti, è possibile aggiungerne altre nel modo seguente. Ipotizzando che la nuova tavola sia la n° 11:

creare un file “tavola_11.js” nella cartella dello sketch del web editor;
inserire nel file un codice come questo:
```
  // TAVOLA 11
function setup_11() {
    // inizializzazioni tavola
}
function draw_11() {
    // disegno tavola
}
// eventi tavola 11
function mouseReleased_11() {
    mostraTavola(0);
}
```
l’evento può ovviamente essere diverso e può anche mancare ma è sempre necessario inserire l’istruzione mostraTavola(…) da qualche parte per evitare di bloccare la navigazione;
aggiungere un riferimento all’interno del file “index.html” dopo quelli delle tavole già definite
```
  ...
<script src="tavola_10.js"></script>
<script src="tavola_11.js"></script>
```

Aggiungere il gestore di un evento

Se gli eventi predefiniti nello sketch di base non includono quello che si vuole utilizzare, è possibile aggiungerlo all’interno del file “sketch.js”. Ad esempio, se si volesse utilizzare l’evento mouseWheel(), le righe da aggiungere sarebbero queste:

  ...
let mouseWheelTav;                                  // dichiarazione funzione
...
function mostraTavola(n) {
    ...
    mouseWheelTav = window["mouseWheel_" + tavola];  // assegnazione funzione
    ...
}
...
function mouseWheel() {           // definizione evento con chiamata funzione
    if (mouseWheelTav) mouseWheelTav();
}

Aggiungere una libreria esterna

Per poter utilizzare una delle librerie p5.js è necessario includere un riferimento all’interno del file “index.html”. Di solito le indicazioni sono già presenti sui siti delle librerie ma, in caso contrario, ci sono sostanzialmente due modi per farlo:

riferirsi all’eventuale servizio CDN che mette a disposizione la libreria:

  <script src="https://cdn.jsdelivr.net/npm/p5.collide2d"></script>

<script src="tavola_00.js"></script>
...

riferirsi al file che andrà scaricato dal sito della libreria e salvato nella cartella dello sketch:
```
  <script src="p5.collide2d.min.js"></script>

<script src="tavola_00.js"></script>
...
```
[il file della libreria di solito si può scaricare da GitHub dalla sezione “Releases” a destra]

Informazioni più specifiche per il Web Editor si possono trovare in Inclusione di una libreria

Saltare l’esecuzione delle prime tavole

Per evitare di rifare continuamente tutto il percorso iniziale durante la creazione delle tavole, è possibile intervenire temporaneamente sul setup() del file “sketch.js”. Ad esempio, se si sta lavorando alla tavola 3, la modifica potrebbe essere questa:

  function setup() {
    ...
    // mostraTavola(0);
    mostraTavola(3);
}

Errori comuni

Usare lo stesso nome per variabili diverse

È neccessario tenere sempre presente che il file “sketch.js” e tutti i file “tavola_NN.js”, una volta caricati dal file “index.html”, diventano un unico lungo script. Se per una variabile globale si usa lo stesso nome in più tavole, la seconda dichiarazione genererà un errore perché non possono esistere due variabili con nome identico. Se non riuscite a trovare nomi specifici, potete aggiungere un numero ai nomi delle variabili, ad esempio:

    let diameter_1;

    let diameter_2;

Ovviamente anche i riferimenti nel codice di ogni singola tavola devono usare il nome specifico.

    circle(x, y, diameter_1, 20);

    circle(x, y, diameter_2, 20);

Visualizzazione diversa di una tavola già visualizzata

Se succedono cose strane tornando su una tavola che era già stata visualizzata correttamente, è molto probabile che nelle tavole successive sia stata cambiata qualche impostazione predefinita. In questi casi, ma vale in generale, è meglio resettare esplicitamente le impostazioni che vengono modificate, ad esempio:

    function setup_0() {
  ...
  rectMode(CORNER);  // impostazione di default
}

    function setup_1() {
  ...
  rectMode(CENTER);  // impostazione modificata
}

Anche i valori inziali delle variabili usate nella tavola è meglio impostarle nei setup_N() perché questi ultimi vengono chiamati sempre ad ogni ritorno alla tavola, ad esempio:

    let diameter_1;

function setup_1() {
  ...
  diameter_1 = 48;
}

Visualizzazione diversa dopo il copia/incolla da un altro sketch

A volte capita che codici presi dal web o preparati in sketch a parte, una volta incollati nei file “tavola_NN.js”, funzionino in modo molto diverso. Ad esempio, può darsi che nel codice di partenza le indicazioni degli angoli siano state date in radianti (la modalità predefinita) mentre nel file “sketch.js” o in una tavola precedente sia stata imposta l’indicazioni degli angoli in gradi:

    function setup_2() {
  ...
  angleMode(DEGREES);  // angoli in gradi
}

    function draw_3() {
  ...
  rotate(PI);  // ANGOLO INTERPRETATO COME 3.14° E NON COME π (180°)
  ...
}

In questi casi, è sufficiente reimpostare la modalità predefinita nel setup_N() della tavola che usa gli angoli in radianti:

    function setup_3() {
  ...
  angleMode(RADIANS);  // angoli in radianti
}
function draw_3() {
  ...
  rotate(PI);  // angolo interpretato come π
  ...
}

Caricamento dei file dalla cartella dello sketch

I file è meglio caricarli tutti all’inizio nella funzione preload() principale per sfruttare l’unica funzione utilizzabile per questo scopo ed evitare ritardi nei passaggi da una tavola all’altra. Ad esempio, i font possono essere caricati così:

    let fontCopertina;
let fontInterfaccia;
// ...

function preload() {
  fontCopertina = loadFont("nomefontcompertina.ttf");
  fontInterfaccia = loadFont("nomefontinterfaccia.ttf");
  // ...
}

Negli sketch delle tavole si potranno quindi utilizzare direttamente le variabili globali, senza ridefinire né le variabili né il preload(), ad esempio:

    function setup_0() {
  ...
  textFont(fontCopertina);  
}

    function setup_1() {
  ...
  textFont(fontInterfaccia);  
}

Creazione del canvas a ogni tavola

L’istruzione createCanvas() deve essere presente solo nel setup() principale. Nei setup_N() è sufficiente inserire un background() (se non è già usato nei draw_N()) ed eventuali inizializzazioni della tavola o delle sue variabili.

    function setup() {
  createCanvas(1920, 1080);  // OK
  ...
}

    function setup_N() {
  // createCanvas(1920, 1080);  // INUTILE!!!
  ...
}