Progetto d'esame

Obiettivo
Tipologia di artefatto
Idee per il progetto
Risorse (e spunti) utili
Specifiche del lavoro
Strutturazione dello sketch
Controllo finale prima della consegna
Link utili per sviluppare il microsito

Obiettivo

Sviluppare un microsito con una sperimentazione audio-visuale sinestetica basata su uno o più procedimenti generativi guidati da un brano audio a scelta.

Tipologia di artefatto

La sperimentazione dovrà essere sviluppata come microsito web autonomo, con le informazioni sul progetto e (per comprendere meglio l'interazione con i browser e la rete) i dati minimi per i motori di ricerca e la condivisione sui social.

Per farsi un'idea più chiara su cosa si intende per microsito (almeno in ambito artistico) è possibile fare riferimento agli RR Websites di Rafaël Rozendaal. Altri micrositi sono stati raccolti da Tim Holman in The Useless Web ma i riferimenti, anche in questo caso, sono più utili per capire la tipologia dell'artefatto da produrre che i contenuti.

Idee per il progetto

L'audio può essere un brano musicale, una sperimentazione elettronica, un testo parlato, una poesia sonora, un percorso sonoro (ambientale o metropolitano), ecc. L'importante è che il contenuto abbia una propria struttura temporale che possa fare da guida alla parte visiva.
Se si è in grado di comporre un proprio brano audio o di farlo generare con p5.sound.js, è possibile usarlo come base ma la valutazione, visto l'argomento del corso, riguarderà prevalentemente la componente visiva.

Le immagini (forme geometriche o anche lettere) dovranno essere generate e trasformate tenendo conto delle informazioni ricavabili dal brano audio attraverso la libreria p5.sound.js. Possono essere presenti anche parti grafiche indipendenti dall'audio ma queste non devono compromettere l'effetto sinestesico (parte visiva "amplificata" da quella audio e viceversa).
I procedimenti/algoritmi utilizzabili per generare le configurazioni possono essere quelli citati nelle lezioni o quelli spiegati in alcuni articoli e tutorial presenti nel web.

Solo se si ha già in mente un progetto particolare, è possibile proporre un tema diverso per il microsito. L'idea dovrà però essere sottoposta al docente prima della realizzazione per evitare lavori non compatibili con il corso o le competenze acquisite.

Risorse (e spunti) utili

Per evitare problemi di copyright si chiede di fare attenzione anche alle questioni legali che potrebbero impedire la pubblicazione online del progetto. Per la musica o le registrazioni si consiglia di scegliere file con licenze Creative Commons (che richiedono solo la citazione del'autore) o di pubblico dominio (che non richiedono nemmeno la citazione dell'autore).
La musica coperta da copyright è sconsigliata anche per il fatto che spesso si tratta di brano famosi che possono rendere secondaria, se non insignificante, la parte visiva.

Indicazioni e spunti utili sulle tecniche di visualizzazione dell'audio si possono ricavare dalla descrizione dei metodi di p5.sound.js o da tutorial specifici sull'audio-visualization.
Alcuni link utili si possono già trovare alla pagina Risorse per l'audio-visualizzazione.

Riguardo allo sviluppo di un'idea algoritmica si può fare riferimento ai blog di alcuni artisti generativi e agli articoli che a volte dedicano ad alcuni loro progetti, ad esempio:

Twisted Ribbons di Amy Goodchild
Spurious Splines di Anders Hoff
Chromatlas di Aleksandra Jovanić
Harmonium di Jeff Palmer
Fontana di Harvey Rayner
Raster di Galo Canizares

Altre descrizioni si possono trovare nella sezione Articles di fxhash che però contiene anche articoli su argomenti diversi.

Esempi interessanti si possono invece trovare fra i lavori di musicisti contemporanei, VJ o artisti generativi che lavorano pensando sia alla componente musicale che a quella visiva. Alcuni esempi si possono trovare sul gruppo Facebook usato fino a qualche anno fa. Altri verranno segnalati (o potranno essere segnalati) sul canale "idee" del server Discord degli studenti del corso.

Specifiche del lavoro

Strumenti

Per evitare complicazioni con altri software e la gestione di un proprio dominio, il progetto dovrà essere sviluppato in p5.js sul Web Editor ufficiale che prevede anche una modalità di visualizzazione a tutta pagina utilizzabile per simulare un microsito [menu: File / Share / Present].
Potranno ovviamente essere usati software specifici per preparare o ripulire eventuali file caricati dallo sketch come immagini, audio, dati, ecc. Nel caso delle immagini, il risultato finale dovrà comunque essere determinato più dagli algoritmi implementati con p5.js che dal lavoro "manuale" fatto in Photoshop, Illustrator, ecc.

Indicazioni tecniche

L'area di disegno (canvas) dovrà adattarsi alle dimensioni della pagina del browser attraverso l'uso delle variabili windowWidth e windowHeight e del gestore dell'evento windowResized() [vedi ultime tre esercitazioni]. Nel caso fosse complesso adattare il contenuto a una dimensione variabile, il canvas dovrà avere una risoluzione di almeno 720x720 pixel ed essere centrata.

Informazioni da mostrare

Il microsito dovrà prevedere un pannello a comparsa con le informazioni minime seguenti:

titolo;
autori;
breve introduzione al tema del progetto (al limite, anche solo una citazione);
breve descrizione del funzionamento (senza eccedere in dettagli);
informazioni sulle modalità d'interazione (anche solo l'elenco dei tasti o degli input utilizzabili);
crediti verso materiale non autoprodotto (musica, immagini, dati, ecc.).

Meta informazioni

Il microsito dovrà contenere anche informazioni utili ai motori di ricerca e ai social network per l'eventuale condivisione online. Seguendo le indicazioni relative al file "index.html" [vedi più avanti] sarà necessario includere:

un'immagine di anteprima;
un titolo;
una descrizione sintetica del progetto.

Strutturazione dello sketch

Visto che la creazione dei file HTML e CSS richiederebbe una serie di lezioni che non è possibile aggiungere alle ore già scarse per l'insegnamento della grafica generativa, è stato predisposto uno sketch di base con i codici già predisposti:
Sketch di base per il microsito

Per usarlo è sufficiente duplicarlo dal vostro account del Web Editor [menu: File / Duplicate], incollare il codice p5.js nel file "sketch.js", aggiungere eventuali file usati dallo sketch (audio, font, script, ecc.).

Per capire meglio con cosa si ha a che fare... i file presenti nello sketch di base, visualizzabili attraverso l'icona ">" in alto a sinistra nel Web Editor, sono:

Sketch Files
- NOMEAUDIO.mp3
- sketch.js
- index.html
- style.css
- microsito.js (non eliminare!)
- preview.png

NOMEAUDIO.mp3

È il file audio che dovrà essere caricato dallo sketch e analizzato per ottenere i parametri di generazione della parte visiva. Si possono usare anche formati diversi ma è meglio evitare quelli senza compressione (ad es. WAV o FLAC) e, fra quelli con compressione, l'MP3 rimane il formato con il miglior supporto da parte dei browser anche meno recenti. Il nome può ovviamente essere diverso da "AUDIO" ma si consiglia di evitare l'uso di caratteri speciali.

sketch.js

È il codice dello sketch p5.js che può essere sviluppato a partire da quello presente o sostituito completamente.
Si consiglia di impostare il codice in modo da gestire la visualizzazione a tutta pagina [con windowWidth, windowHeight e windowResized()] ma si può utilizzare anche un canvas a dimensione fissa che verrà centrato automaticamente. In quest'ultimo caso potrebbe essere necessario modificare il colore della pagina che contiene il canvas [vedi file "style.css]".

index.html

È il primo file letto dal browser e contiene le informazioni sulla pagina, tutti gli elementi (canvas, testi, immagini, ecc.) e i riferimenti ai codici JavaScript e CSS salvati in file esterni.
Nello sketch di base è già presente buona parte del codice ma le informazioni strettamente dipendenti dallo sketch (evidenziate in verde qui in basso e in maiuscolo nel file) devono ovviamente essere ridefinite:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="style.css">
  <!-- informazioni minime per i motori di ricerca -->
  <title>Titolo del progetto (max 60 caratteri)</title>
  <meta name="description" content="Descrizione sintetica del progetto (fra 50 e 160 caratteri)" />
  <!-- informazioni minime per la condivisione sui social -->
  <meta property="og:type" content="website" />
  <meta property="og:title" content="Titolo del progetto (max 60 caratteri)" />
  <meta property="og:description" content="Descrizione sintetica del progetto (fra 50 e 160 caratteri)" />
  <meta property="og:url" content="https://editor.p5js.org/nomeutente/present/codicesketch" />
  <meta property="og:image" content="https://preview.p5js.org/nomeutente/sketches/codicesketch/preview.png" />
  <meta name="twitter:card" content="summary_large_image" />
</head>
<body>
  <!-- informazioni visualizzate al clic sul pulsante (i) -->
  <div id="pannello-info">
    <article>
      <h1>Titolo del progetto</h1>
      <p>Autori del progetto</p>
      <hr>
      <p>Introduzione al tema o frase evocativa</p>
      <p>Descrizione breve del progetto</p>
      <p>Interazione: mouse, tasto "C", ...</p>
      <hr>
      <p>Audio:
        <a href="https://URLDELBRANO1/" target="_blank">"Brano 1"</a> di Tizio,
        "Brano 2" di <a href="https://URLDICAIO/" target="_blank">Caio</a>
      </p>
    </article>
  </div>
  <button id="pulsante-audio" onclick="attivaDisattivaAudio()">♪</button>  <!-- eliminare riga se audio non serve -->
  <button id="pulsante-info" onclick="apriChiudiInfo()">𝐢</button>
  <!-- librerie e altri script utilizzati -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/addons/p5.sound.min.js"></script>
  <script src="microsito.js"></script>
  <script src="sketch.js"></script>
</body>
</html>

Le proprietà "og:url" e "og:image" possono essere ricavata anche attraverso la pagina di verifica degli sketch [vedi sezione "Metadati per il microsito"].
Se vengono usate altre librerie o altri file JavaScript (.js) caricati nella cartella è necessario aggiungere uno o più tag <script> prima di quello che include il file "sketch.js", ad esempio:

...
<script src="microsito.js"></script>
<script src="https://unpkg.com/ml5@0.4.3/dist/ml5.min.js"></script>
<script src="particle.js"></script>
<script src="sketch.js"></script>

Se si vogliono fare interventi più sostanziali si possono seguire i Link utili.

style.css

È il file che definisce l'aspetto (colori, font, dimensioni, posizioni, ecc.) di tutti gli elementi inseriti nel corpo del file "index.html".
In linea di massima si può evitare di modificarlo ma sono stati messi in evidenza alcuni valori che possono tornare utili per impostare proprietà cromatiche o tipografiche compatibili con la grafica del proprio sketch.
Le modifiche di base dovrebbero essere possibili anche a chi non conosce bene il CSS ma bisogna fare attenzione a come sono scritti i valori. Le misure in pixel, ad esempio, devono avere sempre i caratteri "px" attaccati al numero: "16px" è un valore valido mentre "16 px" è un errore di sintassi.
Se si vogliono cambiare i colori o altre proprietà si possono seguire i Link utili.

microsito.js

Contiene script usati per il microsito e non deve essere né modificato né eliminato.

preview.png

È l'immagine che verrà usata nella condivisione sui social network. La risoluzione consigliata è di 1200 x 630 pixel o superiore ma sempre con un rapporto larghezza:altezza di 1,91:1.

Prima di caricare l'anteprima, si consiglia di eliminare l'attuale file "preview.png" per evitare che il nome del file corretto venga modificato in "preview (1).png".

Controllo finale prima della consegna

Per verificare direttamente che tutto sia a posto o cosa sia eventualmente da correggere è possibile utilizzare la pagina di verifica degli sketch:
Verifiche sul progetto

Dalla stessa pagina è possibile fare un'ulteriore verifica su ShareKit. L'URL del microsito viene impostato automaticamente ma, se si vuole fare un controllo diretto, l'URL che dovrà essere inserito nel campo "CUSTOMIZE" sarà quello della proprietà "og:url" composto in questo modo:
https://editor.p5js.org/NOMEUTENTE/present/CODICESKETCH
ovviamente con il vostro nome utente al posto di NOMEUTENTE e il codice del vostro sketch al posto di CODICESKETCH.

La maggior parte dei problemi eventualmente segnalati possono essere risolti ricontrollando i dati inseriti nella sezione <head>...</head> del file "index.html".

Link utili per sviluppare il microsito

− HTML basics (in italiano), per capire un po' meglio la sintassi dell'HTML.

− CSS basics (in italiano), per capire un po' meglio la sintassi dei CSS.

− Colors Tutorial, per capire come indicare i colori.
Se ci si vuole limitare a cambiare i colori del pannello delle informazioni si può intervenire nelle regole di #pannello-info:

#pannello-info {
  background-color: rgba(0,0,0,0.9); /* sfondo nero semitrasparente */
  color: #CCC;                       /* testo grigio chiaro */
  ...
}

Se lo sfondo e il pannello sono entrambi chiari, i pulsanti possono essere impostati con un colore scuro e senza ombra intervenendo nelle regole dei pulsanti:

#pulsante-info, #pulsante-audio {
  ...
  color: #444;                /* pulsanti grigio scuro */ 
  text-shadow: 0 0 3px black; /* riga da eliminare per togliere ombre */
  ...
}

Se il canvas non copre tutta l'area di visualizzazione, il colore della pagina può essere cambiato nelle regole del body:

body {
  background-color: #444; /* sfondo pagina grigio scuro */
  ...
}

− CSS Reference, con informazioni dettagliate su tutte le proprietà CSS.

− A complete guide to making web pages from scratch, una miniguida per principianti sulla creazione di una pagina web.

− Interneting Is Hard, per fare modifiche più sostanziali al codice o per iniziare a studiare i principali linguaggi del web.

− Google Fonts, per usare un font diverso nel pannello delle informazioni.
Una volta selezionato il font, è necessario aprire il pannello "Selecetd Family" [icona in alto a destra] e copiare il contenuto del campo "<link>" nei file "index.html":

<head>
    ...
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">
</head>

e il contenuto del campo "CSS rules to specify families" nel file "style.css":

body {
    ...
    font-family: 'Nome Font Scelto', ...;
}