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

DISEGNARE DELLE FORME

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

1. coordinate X
2. coordinate Y
3. larghezza
4. 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 letpermette 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. ```html

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

print(random());

``` LEZIONE 2 E' sempre meglio dichiarare delle variabile con le costanti numeriche piuttosto che utilizzare direttamente quest'ultime. 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. ```html

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... ```html

VARIABILI VAR E LET

```

"var" consente di dichiarare varibili 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 varibile, 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);

cambiare color mode basta reimpostarlo.

LEZIONE 3MAP

La funzione 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(): 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.
RANDOMSEED La randomSeed.imposta il seme della funzione random; ha un input (numero seme), non ha un output. E' una funzione di servizio per la funzione random. Non posso impostare una variabile con randomSeed. Domanda esame Impostare RandomSeed serve a controllare la casualità, diventando consapevoli che usciranno sempre le stesse linee di valori ad ogni chiamata Random. I numeri pseudocasuali sono il risultato di una funzione. LEZIONE 5 CLASSE Una classe è una collezione di attributi (variabili) e metodi (funzione) e serve per dichiarare un tipo di dato arbitrariamente complesso (in base a ciò che decido di inserirci). OGGETTO Un'istanza di una classe. Ha delle caratteristiche che rispecchiano gli attributi della classe e su di esse possono essere invocati i metodi della classe. ATTRIBUTI E METODI - Gli attributi e i metodi pubblici rappresentano l'interfaccia della classe. - Il valore degli attributi di un oggetto rappresentano il suo stato. - Gli attributi di un oggetto possono essere modificati dai metodi della classe.

oggetto esprimono le sue caratteristiche specifiche.

• I metodi rappresentano cosa l'oggetto può fare
• I metodi di una classe generalmente agiscono sugli attributi della classe stessa. In definitiva, i metodi di un oggetto cariano il suo stato.

LEZIONE 8

PARTICLE SYSTEMS

Sono utilizzate per rappresentare oggetti fuzzy, ovvero che non hanno una forma geometrica e che non possono essere rappresentati con una singola primitiva.

SENZA INTERAZIONE

Possono essere senza interazione tra di loro e quindi le particelle non interagiscono; possono avere una vita limitata o infinita, quindi essere sempre presenti oppure una durata che ha un certo tempo.

Ci possono essere dei punti di attrazione, in quanto le particelle sono sottoposte ad una forza di attrazione che le attira (ma fra di loro no).

ATTRAZIONE E REPULSIONE

Le particelle possono attrarsi tra di loro o respingersi; l'attrazione e la repulsione dipende dalla distanza tra le coppie di particelle. Per tutte le particelle

Devo valutare N-1 interazioni (N*(N-1)/2). Questa formula confronta una particella con tutte le particelle rimanenti. In questo tipo di interazione va moderato il numero di particelle in gioco, perché i problemi quadratici sono molto complessi. Un esempio è l'interazione tra molecole.

INTERAZIONI COMPLESSE

Le particelle (oltre ad interagire tra di loro) sono sottoposte a dei cambi esterni. Esempio: fluidi

HARDWARE

• CPU
• GPU (consigliato)

Avere più core permette di avere del parallelismo a livello di CPU. È sempre consigliato lavorare con le GPU che sono adatte a fare questo tipo di lavoro con le particelle.

GPUs

Sono le schede grafiche moderne che hanno un processore dedicato alla grafica; nei giorni nostri vengono utilizzate per molte cose. Per lavorare sulle GPU ci sono diversi software:

• vertex shade