1. 1. Canvas, approccio procedurale e librerie

   Una tela su cui disegnare, anche in tre dimensioni, ma meglio se con un "supporto esterno"

Canvas e Processing.js

1. 2. Un'infografica con Canvas e Processing.js

   Mettere insieme Canvas e Processing.js, la libreria dell'MIT dedicata alla visualizzazione dei dati

2. 3. Creare un progetto Processing.js

   Esaminare la struttura di un progetto Processing.js attraverso un esempio

3. 4. Scambio dati tra Processing.js e Javascript

   I meccanismi di condivisione dei dati tra librerie e l'utilizzo di console di debug per Javascript

4. 5. Disegno e animazione con Processing.js e Canvas

   Sfruttare le funzioni di disegno di Processing.js per rappresentare oggetti su Canvas

5. 6. Gestire le collisioni in Canvas con Processing.js

   Gestire le collisioni tra oggetti grafici effettuando controlli sulle relative posizioni

6. 7. Colori e testi su Canvas con Processing.js

   Inserire e manipolare scritte e tipi di caratteri. Impostare colori in modalità RGB e HBS

7. 8. L'interazione con l'utente con Processing.js

   Leggere e gestire gli eventi di tastiera e mouse e creare azioni composite

Videogiochi su Canvas

1. 9. Easel.js, sprite e videogame su canvas

   Scoprire la libreria per eccellenza per creare videogiochi e animazioni raster

2. 10. Muovere gli sprite con Easel.js e Kibo

   Interagire con animazioni e videogiochi tramite tastiera

3. 11. Gestire sequenze di sprite ed eventi

   Programmare le reazioni delle animazioni a comandi ed eventi

4. 12. Gestire le Collisioni

   Un elemento fondamentale nella creazione di videogame: le collisioni tra sprite

Canvas e tipografia

1. 13. Web font in Javascript su Canvas

   Manipolare font e scritte direttamente sull'elemento canvas di HTML5

2. 14. Custom font e WebFont Loader

   Utilizzare i web font e gestirne il caricamento

3. 15. Font su Canvas: allineamento e spaziatura caratteri (Kerning)

   Sfruttare le API 2D del canvas per gestire la spaziatura dei caratteri, dimensioni e opzioni di allineamento

4. 16. Font e canvas: effetto 'Cono di luce' e Texture

   Come applicare effetti customizzati e sovrapporre texture alle nostre scritte

Canvas e il 3D

1. 17. Three.js, la WebGL API semplificata

   Canvas come base per sviluppare applicazioni e giochi 3D

2. 18. Scena e Camera, creare il mondo 3D

   Inizializzare e manipolare gli oggetti che compongono la scena 3D

3. 19. Luci e materiali con Three.js

   Definire il materiale dei modelli 3D e impostare i punti di illuminazione della scena

4. 20. Rendering e animazione 3D

   Il disegno della scena sullo schermo utilizzando WebGL o le API 2D del canvas