CODESTHESIA
Articoli
Tutorial
Codici
Lezioni
Risorse
Segui
Aiuta
Grafica generativa con p5.js ←
Indice completo
Informazioni
0. Introduzione a p5.js
1. Istruzioni grafiche di base
2. Configurazioni parametriche
3. Configurazioni iterative
4. Grafica cinetica e reattiva
- Funzioni setup() e draw()
- Cinetismi di base
- Oscillazione di parametri
- Oscillazione di parametri: esempio
- Interpolazioni temporali
- Interattività (con la tastiera e il mouse)
- Interazioni temporali
5. Trasformazioni 2D e 3D
6. Grafica computazionale
7. Transcodifiche e data visualization
8. Dall'idea al codice... alla poesia
Jono Brandel, "Patatap", 2014
4. Grafica cinetica e reattiva
Funzioni setup() e draw()
Le funzioni
Definire una funzione
Chiamare una funzione
Funzioni che restituiscono valori
Le funzioni setup() e draw()
Disegno progressivo
Disegno "animato"
Variabili globali e variabili locali
Controllo del draw()
Controllo del draw(): esempio
Cinetismi di base
Scorrere del tempo: secondi
La variabile di sistema frameCount
Uso di frameCount con l'operatore %
Oscillazione di parametri
Oscillazione di parametri: esempio
Interpolazioni temporali
Interpolazioni fra valori
Variabile di controllo delle interpolazioni
Interpolazioni con la funzione lerp()
Interpolazioni su curve di Bézier
Interpolazione dei colori
Interpolazioni oscillanti
Andamento delle interpolazioni
Attenuazioni nelle interpolazioni (easing)
Andamenti non lineari con la libreria p5.func
Interattività (con la tastiera e il mouse)
Implementazione dell'interattività
Possibilità di implementazione dell'interattività
Variabili di sistema della tastiera
Funzioni di sistema della tastiera
Variabili di sistema del mouse
Funzioni di sistema del mouse
Interazioni temporali
Posizione precedente del mouse
Memorizzare le posizioni precedenti del mouse
Usare le posizioni precedenti del mouse
Dipingere con “pennelli” dinamici
Disegnare testi