0. Introduzione a p5.js

• Grafica e computer
• Il computer è un elaboratore di numeri
• Uso grafico del computer
• Pittura/disegno digitale
• Fotoritocco digitale
• Data visualization
• Audio visualization
• Grafica combinatoria
• Glitch Art
• Grafica generativa
• Grafica reattiva/interattiva
• Altre possibilità grafiche
• Programmare o subire la programmazione?
• Grafici o programmatori?
• Grafici/artisti e programmatori
• Roba da secchioni?
• Roba da uomini?
• Roba da adulti?
• Imparare fin da piccoli
• Scrivere codice non è un'attività creativa?
• Pensiero computazionale
• Esempi di grafica "tradizionale" programmata
• Joshua Davis
• Marius Watz
• Casey Reas
• Jared Tarbell
• Alessandro Capozzo
• Glenn Marshall
• Apophysis
• Visual Identity generativa
• Possibilità in altri campi
• Generazione 3D di piante inesistenti
• Animazione interattiva
• App per album musicali
• Interfacce grafiche per strumenti musicali
• Live Coding (visivo)
• Scenografie interattive per coreografie
• Progettazione di oggetti 3D
• Moda con procedimenti computazionali
• Progettazione di tessuti
• Realizzazione di tessuti
• Tatuaggi
• "Sviluppare" grafica generativa e interattiva
• Generare grafica in tempo reale
• Su e per quale sistema operativo?
• Con quale software?
• Con quale linguaggio?
• Browser come sistema operativo?
• Linguaggi web orientati alla multimedialità
• HTML: struttura di base
• HTML minimo
• HTML + CSS
• HTML + CSS + JavaScript
• HTML + CSS + JS linkati
• P5.js e l'universo Processing
• Processing (e p5.js): obiettivi
• P5.js: cos'è?
• P5.js e Processing
• Struttura di base di uno "sketch"
• Disegnare un'ellisse con p5.js
• Possibilità grafiche (oltre l'ellisse)
• Interazione con gli elementi HTML
• Risorse per l'apprendimento
• Condivisione di esempi con codice
• Disponibilità di librerie per p5.js
• Integrazione con librerie JavaScript
• Sviluppo con p5.js
• Modalità di sviluppo offline
• Atom, ad esempio
• Individuazione errori con Google Chrome
• Editing online: OpenProcessing
• Editing online per JS: ad es. CodePen
• Editing online: p5.js Web Editor
• P5.js Web Editor: aiuti alla scrittura
• P5.js Web Editor: auto-refresh
• P5.js Web Editor: gestione dei file