Computer Graphics con p5.js

Esempi delle lezioni di Computer Graphics tenute dal prof. Antonio Belluscio all'Accademia di Belle Arti di Brera.

Introduzione a p5.js

"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'è?

P5.js e Processing

Struttura di base comune

Disegnare un rettangolo con p5.js

Possibilità grafiche (oltre il rettangolo)

Risorse per l'apprendimento

Condivisione di esempi con codice

Disponibilità di librerie per p5.js

Disponibilità di librerie: esempio con p5.dom.js

Integrazione con librerie JavaScript

Sviluppo con p5.js e Atom

Editing online: p5.js Web Editor

Editing online per JS: ad es. CodePen

Modalità di sviluppo offline

Text editor: Atom

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

Istruzioni grafiche di base

Funzione setup() e canvas

Funzione di base

Commenti

Sintassi delle istruzioni

Colore dello sfondo (grigi)

Colore dello sfondo (RGB)

Dimensioni del canvas

Sistema di riferimento 2D

Sistema di riferimento 3D (Processing e p5.js)

Primitive grafiche di base

Disegno di punti

Dimensione dei punti e spessore dei contorni

Linee

Rettangoli (e quadrati)

Ellissi (e cerchi)

Archi

Uso del colore

Riempimenti grigi

Grigi semitrasparenti

Riempimenti colorati (RGB)

Color semitrasparenti

Disattivazione del riempimento

Colore dei contorni (dei punti e delle linee)

Disattivazione del contorno

Stato degli attributi grafici

Modello cromatico HSB (o HSV)

Modello cromatico HSL

Poligoni irregolari e curve

Triangoli

Quadrangoli

Curve di Bézier

Uso grafico delle curve di Bézier

Poligoni irregolari

Poligoni irregolari con curve

Uso del testo e dei font

Visualizzazione del testo

Allineamento del testo

Dimensione del testo

Testo multilinea

Uso di un font esterno

Configurazioni parametriche

Le variabili

La programmazione

Cos'è una variabile

Nome della variabile

Valore della variabile

Valori numerici interi

Valori numerici con decimali

Valori stringa

Valori booleani

Dichiarare e assegnare direttamente

Riferimenti al contenuto delle variabili

Variabili e costanti di sistema

Variabili di sistema

Ad esempio, larghezza e altezza del canvas

Costanti di sistema

Ad esempio, le costanti PI

Ad esempio, i codici d'impostazione

Operazioni con i numeri

Operatori

Principali operatori aritmetici

Risultati memorizzati o usati direttamente

"Istruzioni" (funzioni) che restituiscono numeri

Funzioni matematiche

Ad esempio, la funzione dist()

Funzioni di conversione

Funzione random(max)

Esempio funzione random()

Funzione random(min,max)

Mappatura dei valori

Esempio funzione map()

Operazioni con i testi

L'operatore stringa +

Funzioni stringa

Proprietà e metodi delle variabili stringa

Operazioni con valori booleani e istruzioni condizionali

Istruzioni condizionali: if

Esempio d'uso dell'if

Istruzioni condizionali: if else

Esempio d'uso di if else

Operatori logici

Esempio d'uso di un operatore logico

Principali operatori di confronto

Esempio d'uso di un operatore di confronto

Parametrizzazione dei "disegni"

Parametrizzazione del codice

Parametri numerici

Parametri booleani

Parametri di selezione

Parametri misti

Configurazioni iterative

Strutture di controllo iterative

Controllo del flusso delle istruzioni

La struttura for

Ordine di esecuzione delle parti del for

Dalla sequenza al for

Interruzione forzata del for: break

Salto di un ciclo: continue

Uso di for annidati

Array e iterazioni sui dati

Gli array

Creazione degli array

Lettura e uso degli elementi di un array

Aggiunta di elementi a un array

Eliminazione di elementi a un array

Iterazioni cromatiche

Generazione di una sequenza casuale di colori

Creazione e uso di una palette predefinita

Creazione e uso di una palette con gradienti

Scelta a caso da una palette

Iterazioni vettoriali

Creazione poligoni irregolari

Creazione poligoni regolari: metodo

Radianti, coseni e seni

Funzioni cos() e sin()

Creazione poligoni regolari: algoritmo

Variazioni dei poligoni regolari: stella

Iterazioni di pattern

Traslazione delle coordinate

Variazione di scala delle coordinate

Rotazione delle coordinate

Somma e reset delle trasformazioni

Ripetizione di trasformazioni

Trasformazioni con for annidati

Pattern casuali con for annidati

Grafica cinetica e reattiva

Funzioni setup() e draw()

Le funzioni

Definire una funzione

Chiamare una funzione

Funzioni setup() e draw()

Disegno progressivo

Disegno "animato"

Variabili condivise (globali)

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 % (modulo)

Interpolazioni fra valori

Uso di una variabile di controllo delle interpolazioni

Interpolazioni con la funzione lerp()

Interpolazioni su curve di Bézier

Interpolazioni dei colori

Interpolazioni oscillanti (avanti e indietro)

Andamento delle interpolazioni

Attenuazioni nelle interpolazioni (easing)

Andamenti elementari con bezierPoint()

Funzioni di easing

Interattività (con la tastiera e il mouse)

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

Trasformazioni 2D e 3D

Programmazione orientata agli oggetti

Oggetti, proprietà e metodi

Definire la "classe" di un "oggetto" in JavaScript

Creazione e uso di un "oggetto"

Uso di oggetti con proprietà

Uso di oggetti con proprietà e metodi

Uso di array di oggetti

Operazioni vettoriali

La classe p5.Vector

Spostamento con la classe p5.Vector

Array di oggetti in movimento

Array di vettori come vertici

Interpolazioni di vettori e morphing

Grafica 3D e trasformazioni geometriche

Coordinate 3D di riferimento

Primitive grafiche 3D

Uso delle primiteve grafiche 3D

Uso di beginShape() e endShape()

Uso di push() e pop()

Impostazione delle luci

Materiali degli oggetti 3D

Mappature su oggetti 3D

Impostazione della videocamera

Trasformazioni geometriche e raster

Codice di base

Trasformazioni geometriche

Trasformazioni dei vertici

Impostazioni di visualizzazione

Applicazione di filtri al canvas

Spostamento di pixel del canvas

Visualizzazione dati e transcodifiche

Lettura e visualizzazione file di testo

Caricamento di file di testo

Caricamento testo e visualizzazione sul canvas

Formato .csv (Comma Separated Values)

Esempio di file .csv

Esempio di file .tsv (Tab Separated Values)

Visualizzazione dati .tsv

Lettura e visualizzazione di dati strutturati

Metalinguaggio XML

Marcatori, attributi e contenuto

Linguaggi XML: ad es. RSS

Lettura di un RSS (es. con titoli articoli)

Interpretazione grafica di un RSS

Il formato JSON (JavaScript Object Notation)

Lettura e interpretazione grafica di un JSON

Transcodifiche dei pixel

Reinterpretazione dei colori

Reinterpretazione dei colori: esempio

ASCII Art

ASCII Art: esempio

Errori di decodifica: Glitch Art (e datamoshing)

Computer vision

Computer vision: esempio

Visualizzazione dell'audio

Campioni audio

Esecuzione di un brano audio con p5.js

Visualizzazione dei campioni audio

Spettrogramma

Interpretazione grafica dello spettrogramma

Formato (o protocollo) MIDI

Visualizzazione di file MIDI

Grafica computazionale

Calcolare le coordinate di punti e vertici

Schema base (calcolo e uso delle coordinate)

Configurazioni sinusoidali

Configurazioni circolari

Configurazioni spiraliformi

Configurazioni con segmenti rotanti

Configurazioni con 4 segmenti rotanti

Generazione vertici con librerie JavaScript: ad es. Toxiclibs.js

Calcolare le coordinate con funzioni iterative

Schema base (calcolo e uso delle coordinate)

Attrattore strano di Henon

Attrattore strano di Peter de Jong

Calcolare i valori RGB dei pixel

Schema base (calcolo e uso delle coordinate)

Onde sinusoidali

Onde sinusoidali inclinate

Gradazioni sinusoidali sommate fra loro (Quasicrystals)

Effetto plasma

Calcoli iterativi: l'insieme di Mandelbrot

Generare e animare con funzioni pseudorandomiche

Valori casuali "coerenti" (Perlin noise)

La funzione noise()

Uso della funzione noise()

Uso cinetico della funzione noise()

Uso di noise() per ricavare coordinate x e y

Applicazioni "realistiche"

Definire regole per simulare le leggi della fisica

Schema implementazione regole

Esempio di implementazione

Implementazione con una classe

Uso di una libreria: ad es. Matter.js

Esempio d'uso minimo di Matter.js

Librerie alternative: ancora Toxiclibs.js

Esempio d'uso grafico delle leggi della fisica

Sistemi particellari

Esempio d'uso grafico dei sistemi particellari

Simulazione dei comportamenti

Agenti autonomi

Agente (quasi) autonomo: esempio minimo

Implementazione di un agente autonomo con una classe

Esempio di comportamenti "intelligenti"

Uso grafico del flocking