Riassunto esame Creative computing, Prof. Snidaro Lauro, libro consigliato Getting Started with Processing, Casey Reas, Ben Fry

Creative computing lezione 1

Introduzione

La programmazione creativa (creative coding) è un tipo di programmazione del calcolatore volta a creare qualcosa di espressivo piuttosto che funzionale (ovvero non serve a risolvere un problema, ma a creare qualcosa di bello esteticamente). Può essere usata per creare applicazioni interattive, installazioni, lavori di design, architettura, fashion, arte generativa, vjing, ecc.

Arte generativa

L'arte generativa è un modo in cui un artista con una serie di regole interagisce con la macchina, pone in moto questo programma e c'è un certo grado di autonomia da parte della macchina. Il risultato finale è quello di ottenere un'opera artistica. È generativa perché la componente casuale permette di generare dei risultati finali fintanto che l'artista non sceglie quello che gli sembra migliore. È una maniera algoritmica di creare qualcosa di estetico, una combinazione tra artista e macchina autonoma, che produce risultati inattesi da processi deterministici.

Una macchina può produrre dei numeri pseudocasuali pur mantenendo la caratteristica del determinismo; ciò è possibile perché sono numeri prestabiliti, quindi la casualità è un'illusione generata da funzioni. L'artista ottiene un risultato inaspettato perché c'è una combinazione di elementi differenti pseudocasuali. L'interazione tra uomo e macchina è un punto di equilibrio tra ordine e caos. Deterministico: qualcosa che avviene secondo regole precise e sempre allo stesso modo. Il calcolatore è una macchina deterministica.

Reti neurali

Le reti neurali vengono utilizzate per esempio per applicare lo stile di un pittore ad una foto; ciò non comporta una sovrapposizione delle immagini, ma viene preso lo stile del pittore e lo applica all'immagine per contenuto, ovvero in base al contenuto della foto.

Processing

È un linguaggio di programmazione basato su Java orientato alla grafia 2D/3D, animazioni ed interazioni. Non richiede la compilazione del programma e viene eseguito istantaneamente.

• Pro: Ottimo per imparare a programmare, comunità di sviluppatori molto ampia.
• Contro: Prestazioni limitate per applicazioni che richiedono real-time su mole elevata di dati.

È stato sviluppato al MIT, è un dialetto di JAVA ed è orientato alla grafica e all'interazione.

Cinder

Libreria basata su C++ per applicazioni multimediali avanzate.

• Pro: Animazione di grande qualità.
• Contro: Comunità di sviluppo di professionisti, poco documentata.

OpenFrameworks

Liberia C++ per progetti che coinvolgono audio e video. Richiede ogni volta la compilazione del programma.

• Pro: Potente e veloce, ampia comunità di sviluppatori.
• Contro: Più complessa di Processing per progetti molto semplici, perdita di tempo per la compilazione.

Linguaggio compilato

Nel linguaggio compilato viene scritto il codice che viene trasferito ad un compilatore, successivamente viene generato il codice binario, gira sul sistema operativo ed infine sull'hardware.

• Pro: Velocità di esecuzione del programma finale, massime prestazioni per una data architettura.
• Contro: Lenti tempi di sviluppo (per la compilazione), codice non cross-platform.

Linguaggio interpretato (scripting)

Il codice sorgente (lo script) viene eseguito direttamente dal browser, quest'ultimo gira sul sistema operativo che gira su un hardware. Non è presente un compilatore, è come se si stessa "programmando il browser", lo script viene istantaneamente interpretato per essere eseguito dal browser.

• Pro: Rapido sviluppo, codice cross-platform.
• Contro: Prestazioni finali dell'applicazione non ottimali.

Funzione setup()

La funzione setup() viene eseguita una volta sola all'avvio dello sketch. Viene utilizzata per inizializzare variabili, oggetti e in generale eseguire istruzioni che devono essere invocate una sola volta all'inizio. createCanvas(400, 400) imposta la risoluzione del canvas (400 x 400 pixel).

Funzione draw()

Una volta terminata l'esecuzione di setup() il controllo passa a draw() che cicla un numero infinito di volte. background(220) imposta il colore del background del canvas (toni di grigio fra 0 = nero e 255 = bianco).

Stampare in console

Per stampare delle stringhe in console si utilizza il comando print().

Impostare il frame rate

Per impostare un frame rate si utilizza questa stringa di codice, in questo caso impostandolo a 30 fps.

Disegnare delle forme

Per disegnare i rettangoli si utilizza la funzione rect() che necessita di 4 attributi:

• Coordinate X
• Coordinate Y
• Larghezza
• Altezza

Riempire le forme

Per riempire le forme si utilizza fill() che ha come attributi le componenti RGB. Questa funzione ha effetto su tutte le forme che vengono inserite dopo; per cambiare colore bisogna usare un nuovo fill().

Delineare i bordi

Per delineare i bordi delle forme si utilizza stroke() che ha come parametri le componenti RGB. I bordi verranno applicati a tutte le forme, in quanto la funzione draw() nella quale è contenuto si ripete ciclicamente. Se volessi impostare un bordo ad una precisa forma potrei dichiarare all'inizio del draw() un bordo nero. Per modificare lo spessore dei bordi si utilizza strokeWeight. Si utilizza solitamente un valore dispari perché lo spessore a cavallo della forma si divide nello stesso numero di pixel a destra e a sinistra del contorno della forma. La funzione noFill() disabilita il riempimento (ma non il bordo stroke()).

Disegnare forme circolari

Si utilizza la funzione ellipse() che ha come attributi (x, y, larghezza, altezza).

Funzione random

Chiamando la funzione random() senza parametri come parametro della funzione print() avremo come risultato un valore casuale in console nell'intervallo [0,1), 0 incluso 1 no. Se vogliamo stabilire un range possiamo aggiungere un numero come attributo del numero massimo. Nell'esempio uscirà un numero compreso tra [0,10). Inserendo due parametri si stabilirà il minimo e il massimo range. Nell'esempio uscirà un numero compreso tra [5, 10). I valori che ritornano sono uniformi, quindi è poco probabile che escano numeri molto vicini tra loro. Nella funzione random se il primo estremo è 0 non è necessario scriverlo.

Esempio di ciclo for per numeri casuali

Il seguente ciclo for stampa 10 numeri casuali. Let equivale a var, serve quindi a dichiarare le variabili; le variabili let permettono di dichiarare delle variabili visibili all'interno del blocco for, mentre utilizzando var le variabili vengono visualizzate anche al di fuori, verso l'alto, quindi nella parte iniziale del codice.

for(let i=0; i<10; i++) print(random());

Lezione 2

Height e width

Height è una variabile interna di P5.js che assume automaticamente un valore. Nell'esempio "Snow" assume il valore dell'altezza del Canvas. Width, invece, assume il valore della larghezza del Cavas. Possono essere utilizzate anche per creare nuovi valori.
ellipse(width,height+100,400,200);

Variabili globali e locali

Quando dichiaro una variabile al di fuori di una funzione quest'ultima è una variabile globale; una variabile globale è visibile a tutti nell'intero script. Una variabile locale, invece...

Variabili var e let

La keyword "var" consente di dichiarare variabili con visibilità a livello di funzione (function-scope). "Let" consente di dichiarare variabili con visibilità a livello di blocco (block-scoped). Con il let non si possono fare due dichiarazioni successive della stessa variabile, con var si. Dichiarazione: dire che esiste una variabile. Definizione: assegnare un valore ad una variabile.

MouseX e MouseY

mouseX e mouseY indicano e coordinate del mouse.

HSB

Modificando la tonalità si può "navigare" nello spettro dei colori. Viene utilizzato principalmente quando bisogna animare il colore.

ColorMode

Dopo la scelta dello schema colore vanno inseriti i valori massimo che scelgo di avere per le componenti di quello schema. Nell'esempio, i valori della tinta vengono espressi in gradi per definire un angolo, il massimo è 360. Le altre componenti sono espresse in percentuali (saturazione, vividezza, trasparenza).
colorMode(HSB, 360, 100, 100, 100);

Per cambiare color mode basta reimpostarlo.

Lezione 3

Map

La funzione map trasforma un valore (x) in un corrispondente valore compreso tra un altro intervallo. Nell'esempio il minimo del valore è 0, il massimo width-rectWidth e verrà poi trasformato in un valore tra 0 e 360.

Color wheel spiegazione

Il centro del cerchio ha coordinate (centerX e centerY). Il raggio (radius) è una linea che parte dal centro del cerchio e arriva fino alla circonferenza; l'obiettivo è quello di tirare un insieme di linee che formeranno poi il cerchio. Il problema è trovare le coordinate del punto sulla circonferenza, quello a cui deve arrivare il raggio dal centro. Alpha è l'angolo. La x di quel punto è data da centerX + il segmento blu orizzontale. Per calcolare la lunghezza di quel segmento bisogna utilizzare la formula: cos(alpha) x radius. Per trovare il punto in X, quindi: centerX + cos(alpha) x radius. Per trovare le coordinate Y di un punto si farà: centerY + sen(alpha) x radius. Quindi il punto avrà come coordinate (centerX+cos(alpha) x radius, centerY+sin(alpha) x radius).

Traslazioni

Quando si effettua una traslazione si crea un nuovo sistema di riferimento cartesiano. Translate non serve a spostare una forma, ma per spostare il sistema di riferimento. Allo stesso modo le rotazioni non ruotano gli oggetti, ma i sistemi di riferimento cartesiani. Tutte le trasformazioni del sistema di coordinate vengono resettate all'uscita di draw() e ritorna il sistema di coordinate originario. Le trasformazioni verranno eseguite nell'ordine in cui vengono scritte. La rotazione è intesa in senso orario e lo 0 è da intendersi sull'asse delle x.

Push e Pop

La funzione push() serve a salvare il sistema di riferimento corrente (l'ultimo impostato). La funzione pop() ripristina il sistema di coordinate precedente (l'ultimo salvato). Queste due funzioni vanno sempre utilizzate in coppia. Si chiamano così perché si basano sul concetto di pila. Queste due funzioni non hanno parametri e non ritornano alcun valore. (DOMANDA ESAME) Si possono fare anche due pop di seguito. Push e Pop sono nomi tipici che vengono attribuiti nei linguaggi di programmazione alle operazioni rispettivamente di inserimento e rimozione di un elemento in cima alla pila. Push e Pop salvano anche eventuali stili.

Pila

La pila è una struttura dati LIFO (last in first out); è paragonabile ad una pila di libri: con la push() si inseriscono dei libri, uno sopra l'altro. Con la pop() si rimuovono i libri da quello che sta più in alto, quindi l'ultimo che è stato posizionato.

rectMode(CENTER) serve per impostare il disegno di un rettangolo nel centro.

Vertici

beginShape(): delimita l'inizio del disegno di una forma mediante chiamate a vertex() (vertici). endShape(): funzione di chiusura della forma, deve sempre essere messa. Con vertex(x,y) si definiscono i vertici della forma. Se tutti i vertici non vengono chiusi (quindi le linee non combacerebbero) basta aggiungere CLOSE in endShape(CLOSE) e verranno chiusi automaticamente.

Salvare un canvas

È possibile scrivere una funzione evento alla pressione di un tasto della tastiera.

rectMode(CENTER); = stabilisce il punto di origine del rettangolo (in questo caso al centro).

Lezione 4

Anche quando io faccio una translate, mouseX e mouseY restano legate al sistema di riferimento originario e non subiscono variazioni del sistema di riferimento. TWO_PI è la costante per 2 pi greco.

KeyPressed e KeyRelease

keyPressed(): con questa funzione quando si continua a tenere premuto il tasto nella tastiera si continuano a generare eventi. keyRelease(): si generano eventi solo quando si rilascia il tasto e quindi verrà generato solo un evento.

Switch-case

Non si utilizzano le graffe ma è obbligatorio usare break a fine caso. Brush: disegno che simulano pennelli. Costante: variabile che non cambia mai valore durante il codice.