E.2 - Parametrizzazione

Obiettivo

Riprodurre un quadro astratto geometrico prevedendo elementi casuali che generino varianti diverse a ogni esecuzione ma coerenti con l'estetica dell'opera.

Modalità

Fase 1:

• scegliere un quadro astratto semplice o un suo particolare, se il quadro è molto complesso;
• riprodurre il quadro attraverso semplici sequenze di istruzioni con parametri numerici espliciti, come fatto per l'esercitazione 1.

Fase 2:

• sostituire alcuni parametri geometrici o cromatici a scelta con variabili impostate casualmente attraverso la funzione random();
• rendere casuali alcune scelte (visibilità o meno di una forma, attributi grafici, ecc.) usando la funzione random() insieme ad almeno un if() o un if() else.

Risoluzione del canvas

La risoluzione massima del canvas dovrà essere di 800x600 pixel (larghezza x altezza). Se serve un rapporto larghezza/altezza diverso, uno solo dei due lati potrà essere inferiore. Ad esempio: 600x600 e 800x400 vanno bene ma non 600x400.

Inserimento informazioni

Le informazioni sul quadro scelto dovranno essere riportate all'inizio del codice come commento indicando: il nome dell'artista, il titolo del quadro e l'anno di esecuzione.

Codice di base

Le istruzioni andranno inserite solo nella funzione setup(). La funzione draw(), presente nello sketch di base del Web Editor, andrà cancellata completamente.

// Quadro:  Nome artista, "Titolo del quadro", anno 

function setup() {
    createCanvas( 800, 600 );  // solo uno dei due valori può essere inferiore

    impostazione parametri 

    istruzioni grafiche parametrizzate 
}

Consigli

Per la scelta del quadro è possibile cercare online opere di artisti come Piet Mondrian, Wassily Kandinsky, Kazimir Malevich, František Kupka, El Lissitzky, Bruno Munari, Luigi Veronesi, Frank Stella, Max Bill, ecc.

Si consiglia di impostare subito la modalità cromatica HSL o HSB con cui è più facile controllare le variazioni casuali del colore, ad esempio:

function setup() {
    createCanvas( 800, 600 );
    colorMode( HSL );
    // ...
    fill( 0, 100, random(20,80) );  // rossi saturi con luminosità casuale
    circle( 400,300, 120 );
    // ...
}

oppure:

    colorMode( HSL );
    // ...
    let tono = random( 360 );  // colore a caso nel cerchio cromatico
    fill( tono, 100, 20 );     // variante satura scura 
    circle( 400,300, 120 );
    fill( tono, 100, 80 );     // variante satura chiara 
    circle( 400,300, 60 );

Altre preimpostazioni che potrebbero semplificare la stesura del codice sono:

rectMode(CENTER); // rettangoli e quadrati posizionati in base al centro
angleMode(DEGREES); // angoli in gradi (0..360) anziché in radianti (0..2π)
textAlign(CENTER,CENTER); // testi posizionati in base al loro centro

Le possibilità di rendere casuali i parametri e condizionale il disegno sono illustrate nella lezione sulle configurazioni visive parametriche.

Per eventuali effetti di fusione cromatica, è possibile usare l'istruzione blendMode() prima di disegnare qualcosa.

Ricordarsi che le variabili vanno sempre dichiarate con il let e che possono essere modificate senza una nuova dichiarazione:

// ...
let variabile = random(); // dichiarazione e assegnazione
// ...
variabile = random(); // modifica
// ...

Consegna

Lo sketch andrà consegnato, dopo l'aggiunta dell'anteprima (obbligatoria), seguendo le modalità indicate nel "compito" della Classroom del corso.

Prima di consegnare l'esercitazione si consiglia di verificare il caricamento dell'anteprima e l'eventuale centratura del canvas attraverso la pagina di verifica dello sketch.