"Sviluppare" grafica generativa e interattiva
Grafica generativa 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'è?
La libreria è scaricabile dal sito di p5.js: p5js.org/download
P5.js e Processing
Struttura di base comune
Disegnare un rettangolo con p5.js
Possibilità grafiche (oltre il rettangolo)
Esempi: http://p5js.org/examples/
Immagine generata da: Sine Cosine in 3D
Risorse per l'apprendimento
Videotutorial di Daniel Shiffman: playlist su p5.js
Condivisione di esempi con codice
Ad esempio: www.openprocessing.org
Disponibilità di librerie per p5.js
Librerie ufficiali: p5js.org/libraries
Disponibilità di librerie: esempio con p5.dom.js
Codice simile: alpha.editor.p5js.org/
[richiede la presenza di un <div id="mirror"></div> nel file HTML]
Tutorial: youtu.be/m1G6WBvrOBE
Integrazione con librerie JavaScript
Codice dell'esempio: Face Tracking
Altri esempi: cv-examples
Sviluppo con p5.js e Atom
Editing online: p5.js Web Editor
Editing online per JS: ad es. CodePen
CodePen dell'esempio: codepen.io/p5art/pen/PqpwgO
Altri esempi in p5.js: codepen.io/search/pens/?q=p5.js
Modalità di sviluppo offline
Fonte immagine: Interneting Is Hard: tools of the trade.
Text editor: Atom
Sito del software: atom.io.
Introduzione all'uso: Interneting Is Hard: atom text editor.
Installazione dei moduli (package)
Moduli Atom: atom-html-preview
Moduli Atom: atom-live-server
Moduli Atom: linter-jshint
Moduli Atom: p5js-snippets
Test e debugging con Google Chrome
