Uso del p5.js Web Editor

Un’introduzione al Web Editor si può trovare nell’articolo Hello p5.js Web Editor! della Processing Foundation e nella relativa traduzione di Nilocram.

Creazione del profilo

1. collegarsi al sito del p5.js Web Editor;
2. cliccare sulla voce “Sign up”;
3. inserire i dati richiesti tenendo presente che lo “User Name” verrà inserito in tutti gli URL degli scketch, ad esempio: “https://editor.p5js.org/username/sketches/pt3EzG2nb”

Creazione dello sketch

1. se non è già presente uno sketch di base, cliccare sulla voce di menu “File / New”;
2. modificare lo sketch;
3. cambiare il nome proposto dall’editor (a destra di “Auto-refresh”, sotto il menu);
4. salvare lo sketch attraverso la voce di menu “File / Save”.

L’elenco degli sketch salvati si può vedere attraverso la voce “My Account / My sketches” in alto a destra.

1. menu per il salvataggio (e l’eventuale creazione di un nuovo sketch);
2. nome dello sketch;
3. accesso agli sketch salvati.

Creazione e caricamento dell’anteprima

L’assenza di un’immagine di anteprima non impedisce il funzionamento del codice ma la sua presenza può essere utile per ottenere un’immagine che ricordi più facilmente i risultati dello sketch nella pagina delle revisioni.

Alcuni browser (come Safari) non permettono di salvare il contenuto del canvas come immagine. In questi casi si consiglia un browser alternativo come Chrome, Brave, Firefox, Edge o Opera.

1. cliccare con il tasto destro del mouse sul canvas in esecuzione e poi su “Salva immagine con nome…”;

2. salvare l’immagine sul proprio computer usando il nome “preview.png” (tutto in minuscolo);
3. aprire il pannello dei file attraverso l’icona

   

   a sinistra di “sketch.js”;

4. aprire il menu della cartella di progetto attraverso l’icona

   

   a destra di “Sketch Files”;

5. cliccare su “Upload file” e poi su “Drop file here…” per selezionare l’immagine “preview.png” salvata in precedenza;

6. verificare che il file caricato abbia mantenuto il nome corretto perché può capitare che venga modificato per evitare conflitti con file già presenti.

Centratura del canvas

Per centrare il canvas, anziché tenerlo in alto a sinistra, si può aprire il file “style.css”:

e si possono aggiungere le seguenti regole CSS:

  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
}
canvas {
    display: block;
}

Inclusione di una libreria

Libreria su servizio CDN

Se la libreria si trova anche su un server CDN (Content Delivery Network) è sufficiente:

• aggiungere un tag <script> con l’URL della libreria nel file “index.html”, dopo i tag <script> delle librerie standard e prima di quello del file “sketch.js”.

Libreria scaricabile

Se la libreria è disponibile solo come file da scaricare, è necessario:

1. scaricare il file .js (ad es. “libreria.js”) o l’eventuale versione minificata (ad es. “libreria.min.js”) dal sito dell’autore;
   [su GitHub, se sono presenti delle versioni di distribuzione, è preferibile scaricare il file più recente della sezione “Releases” a cui si accede attraverso il link a destra dell’elenco dei file];
2. caricare il file nella cartella di progetto del Web Editor [vedi modalità di caricamento dell’anteprima];
3. aggiungere un tag <script> con il solo nome della libreria nel file “index.html”, sempre dopo i tag <script> delle librerie standard e prima di quello del file “sketch.js”;
   [se la libreria è stata caricata in una sottocartella (ad es. “libs”), nell’URL del tag <script> è necessario includerne il nome (ad es. “libs/libreria.js”)].

Leggibilità/indentazione del codice

Per rendere più comprensibile il codice conviene fare attenzione all’uso degli spazi fra il margine sinistro dell’editor e l’inizio di ogni riga (indentazione). Un uso casuale di questi spazi può rendere più difficile capire la struttura del codice e identificare eventuali errori.

Il Web Editor è in grado di sistemare automaticamente le indentazioni attraverso la voce di menu “Edit / Tidy Code” (che però agisce anche sulle spaziature dei parametri).