Guida all'uso delle lezioni

 

La linea blu-viola sul bordo superiore dell'area dei contenuti permette di capire approssimativamente a che punto della lezione ci si trova.

Titolo della lezione

Il triangolo marrone indica il link su cui cliccare per iniziare la lezione. Ovviamente è possibile utilizzare anche gli altri link per saltare direttamente a una determinata pagina.

🞀     Titolo della pagina 🞂

Le frecce ai lati del titolo permettono di spostarsi fra le pagine dello stesso livello. Per evitare di alternare i clic sulle frecce con i clic sui link degli indici, le pagine con i titoli delle sezioni di ogni lezione vengono considerate allo stesso livello delle pagine dei contenuti.


Didascalia della prima immagine


Didascalia della seconda immagine


Didascalia della terza immagine


Didascalia della quarta immagine

La presenza di punti colorati in basso evidenzia la possibilità di visualizzare più immagini o di avanzare nella descrizione di più fasi.

function draw() {
    circle( mouseX, mouseY, 5 );
}

I codici d'esempio hanno la sintassi evidenziata per rendere più riconoscibili le singole parti. Quelli su fondo grigio o riportati parzialmente sono selezionabili e copiabili.

// height=100 lines=auto
function draw() {
    circle( mouseX, mouseY, 5 );
}

A volte il codice è modificabile e mostra automaticamente i risultati in alto a sinistra. Lo sfondo su cui viene visualizzato il risultato è un pattern che rende più evidente l'effetto delle istruzioni background() e clear() o della loro assenza.
L'editor implementa anche un sistema che evita il blocco della pagina se viene creato involontariamente un loop infinito. Se l'esecuzione è molto rallentata o se il fotogramma non viene disegnato completamente è possibile che il sistema anti-loop sia entrato in funzione.

circle( mouseX, mouseY, 5 );

Disegna un cerchio di 5 pixel di diametro sotto il cursore del mouse. Le coordinate del cursore sono ottenute attraverso le relative variabili di sistema.

Alcune righe di codice vengono riportate sotto l'editor insieme a un testo che serve a chiarire meglio le parti meno intuitive.

Provare a modificare il diametro del cerchio usando un valore diverso da 5.

A volte vengono suggerite alcune modifiche al codice per comprenderne meglio il funzionamento. Si consiglia di seguire i suggerimenti e magari svilupparli anche quando sembrano molto banali perché aiutano comunque a ricordare meglio alcuni dettagli.

L'area attiva dell'esempio è di soli 100x100 pixel perché non è stata definita la funzione setup() con l'istruzione createCanvas().

A volte è necessario fare alcune precisazioni che non sono fondamentali per l'argomento trattato nella pagina ma possono essere utili anche solo per evitare dubbi e ambiguità.

Quando il codice editabile ha bisogno di un file esterno (immagine, libreria aggiuntiva, ecc.) in fondo alla pagina viene visualizzata la composizione della cartella. I file da aggiungere sono linkati alla risorsa richiesta o alla pagina da cui è possibile scaricarla. Il file "index.html" è linkato a una pagina che mostra come includere una libreria.