Negli ultimi giorni ho ricevuto diverse richieste di aiuto per problemi di codice in Processing; ecco la soluzione a uno dei problemi che mi sono stati posti.

Ho deciso di chiamare questo Coding Rescuecambiare la tonalità di alcuni pixel.

Il problema

Il quesito era piuttosto articolato:

  • Il programma deve caricare un’immagine dal disco.
  • Il programma decide se modificare o no il pixel in base ad un valore casuale.
  • Il processo di trasformazione viene controllato dal click  del mouse: un primo click avvia la trasformazione che, con un successivo click, viene messa in pausa. Un ulteriore click fa ripartire la trasformazione e così via.
  • I pixel devono essere modificati di continuo.
  • Il compito deve essere svolto mediante la funzione creaImmagine(), che accetta in ingresso un oggetto di tipo PImage e rende in uscita un oggetto di tipo PImage, che sarà l’immagine modificata come da specifiche, e la funzione calcolaPixel(), che accetta in ingresso un oggetto di tipo color e rende in uscita un oggetto di tipo color, che sarà il pixel modificato come da specifiche.
  • creaImmagine() crea una nuova immagine utilizzando su ciascun pixel la funzione calcolaPixel().
  • calcolaPixel() calcola il nuovo pixel nel seguente modo: siano r, g, b i livelli di canale di un pixel. Sia treshold un valore numerico posto inizialmente a 0.5. Sia r un valore casuale compreso tra 0 e 1, generato per ogni pixel. Se r>soglia, allora la funzione lascia il pixel inalterato, in caso contrario il programma calcola i nuovi valori rm, gm, bm (che definiscono il pixel
    modificato) nel seguente modo:

    • rm = 0.393∗r+0.769∗g+0.189∗b
    • gm = 0.349∗r+0.686∗g+0.168∗b
    • bm = 0.272∗r+0.534∗g+0.131∗b

    In ogni caso i valori finali di r, g, b devono essere valori leciti, cioè compresi tra 0 e 255.

  • Quando l’utente preme il tasto “+” la soglia viene incrementata di 0.1 mentre, con la pressione del tasto “-” la soglia viene decrementata di 0.1.

La soluzione


/*
 * Coding Rescue #3 - Cambiare la tonalità di alcuni pixel
 * Federico Pepe, 21.01.2018
 * http://blog.federicopepe.com/processing
 */

// Creo le variabili necessarie;
float threshold = 0.5;
boolean work = true;
PImage original, edited;

void setup() {
  // Nella funzione di setup carico il file dall'hard disk;
  size(1, 1);
  surface.setResizable(true);
  selectInput("Select a file to process:", "fileSelected");
}

void draw() {
  if (original != null) {
    edited = original.copy();
    /*
     * Se la variabile work, il cui valore dipende dal click del mouse è true, mostro
     * l'immagine originale, altrimenti avvio la modifica
     */
    if (work) {
      image(edited, 0, 0);
    } else {
      image(creaImmagine(edited), 0, 0);
    }
  }
}

// Funzione per gestire il caricamento dei file da HD
// https://processing.org/reference/selectInput_.html
void fileSelected(File selection) {
  if (selection == null) {
    println("Window was closed or the user hit cancel.");
  } else {
    println("User selected " + selection.getAbsolutePath());
    original = loadImage(selection.getAbsolutePath());
    surface.setSize(original.width, original.height);
  }
}

// Funzione creaImmagine che, come da specifiche, accetta in ingresso un oggetto PImage
// e restituisce un oggetto PImage;
PImage creaImmagine(PImage img) {
  // Carico i pixel in un array
  img.loadPixels();
  for (int y = 0; y < img.height; y++) {
    for (int x = 0; x < img.width; x++) {
      int loc = x + y * img.width;
      // Ottengo i valori R, G, B di ciascun pixel;
      float r = red(img.pixels[loc]);
      float g = green(img.pixels[loc]);
      float b = blue(img.pixels[loc]);
      // Lancio la funziona calcolaPixel
      img.pixels[loc] = calcolaPixel(color(r, g, b));
    }
  }
  img.updatePixels();
  return img;
}

color calcolaPixel(color c) {
  // Valore casuale, come da specifiche
  float r = random(0, 1);

  if (r > threshold) {
    // Se r è maggiore della soglia, restituisco il colore originale
    return c;
  } else {
    // Altrimenti calcolo il nuovo valore del pixel come richiesto
    // la funzione constrain mi assicura che il valore calcolato sia compreso tra 0 e 255;
    float rm = constrain(0.393*red(c)+0.769*green(c)+0.189*blue(c), 0, 255);
    float gm = constrain(0.349*red(c)+0.686*green(c)+0.168*blue(c), 0, 255);
    float bm = constrain(0.272*red(c)+0.534*green(c)+0.131*blue(c), 0, 255);
    // Restituisco i nuovi valori
    return color(rm, gm, bm);
  }
}

// Con la funzione keyPressed determino la pressione dei tasti + e -
void keyPressed() {
  if (key == '+') {
    threshold += 0.1;
  }
  if (key == '-') {
    threshold -= 0.1;
  }
  // Utilizzo la funzione round (di seguito) per arrotondare il valore a 2 decimali;
  round(threshold, 2);
}
// Alla pressione del mouse, cambio il valore di work da true a false e viceversa
void mouseClicked() {
  work = !work;
}
// Funzione utile per limitare il numero di decimali in un float
// https://stackoverflow.com/questions/9627182/how-do-i-limit-decimal-precision-in-processing
float round(float number, float decimal) {
  return (float)(round((number*pow(10, decimal))))/pow(10, decimal);
} 


Aggiornamento 17 gennaio 2017: Ableton 10 arriverà il 6 febbraio.

Si è cominciato a parlare di Ableton 10 da fine agosto quando, in un video di DJ Jazzy Jeff, qualcuno aveva notato alcune differenze rispetto alla versione 9.

Le speculazioni sono andate avanti per diverse settimane finché, il 2 novembre, Ableton ha annunciato ufficialmente che la nuova release del software era in lavorazione e che sarebbe stata disponibile a inizio 2018.

Arriviamo a oggi o, meglio, ad un paio di giorni fa: Ableton 10 è entrato nella fase di public beta per chi possiede una licenza standard suite di Live 9.

È un segnale chiaro che ci stiamo avvicinando alla release finale del programma e Ableton ha bisogno che gli utenti lo testino e scovino bug prima del rilascio ufficiale.

Dall’annuncio della beta pubblica ho letto parecchi commenti critici nei confronti dell’aggiornamento: molti ritengono che il prezzo sia sproporzionato rispetto alle novità introdotte. Io ho avuto la fortuna di essere selezionato tra i beta tester a inizio novembre e, superato lo scetticismo iniziale, posso dirvi che questo aggiornamento vale ogni centesimo.

In questo post troverete una panoramica sulle novità che, personalmente, ho trovato più interessanti.

Una nuova interfaccia

Interfaccia Live 10

Partiamo dalla cosa più ovvia: la grafica. Una nuova icona, un nuovo font – Ableton Sans – che rende più leggibile l’intera interfaccia del programma, e dei nuovi temi: Light, Mid Light, Mid Dark, DarkLive 9.

Su schermi ad alta risoluzione (HiDPI) risulta tutto molto leggibile e definito; ricordo ancora quanto ho benedetto l’aggiornamento di Live 9 che ha introdotto il supporto al mio retina display.

Capture: non perdere mai un’idea

Una delle novità più attese e che, dal mio punto di vista, giustifica l’investimento per l’aggiornamento è  la funzione Capture. Ableton sarà perennemente in “ascolto” di tutti gli input che arrivano sulle tracce MIDI. Alla pressione del tasto capture, inserito accanto al pulsante di registrazione della sessione, viene creata automaticamente una clip.

La cosa che più mi ha colpito di questa funzione quando l’ho provata la prima volta è che Ableton cerca di mantenere sia il tempo che il groove della nostra performance adattando, di conseguenza, le impostazioni del progetto.

Nuovi device

Wavetable - Ableton 10

Come ogni aggiornamento che si rispetti, sono stati introdotti dei nuovi dispositivi (di cui parleremo in modo più esteso prossimamente):

  • Wavetable: un nuovo sintetizzare a due oscillatori che, com’è facilmente intuibile dal nome, sfrutta i principi della la sintesi wavetable.
  • Echo: un nuovo effetto delay con molte possibilità di modulazione.
  • Drum Buss: un processore di dinamica progettate per le batterie dal carattere analogico.
  • Pedal: un distorsore/overdrive/fuzz che si ispira a tre classici pedali da chitarra.

Sono stati migliorati anche due device già presenti nelle versioni precedenti: Utility ed EQ Eight.

Arrangiamento, automazioni e navigazione

I programmatori di Ableton hanno concentrato i loro sforzi sul miglioramento della modalità arrangiamento: ora è più facile fare editing, arrangiare e creare automazioni.

Queste le novità principali e il relativo shortcut, se presente:

  • È possibile fare lo stretch delle clip audio prendendo Shift e trascinando il bordo.
  • È possibile muovere il contenuto interno di una clip premendo Ctrl+Shift (PC) / Alt+Shift (Mac) senza spostare la clip. Tenendo premuto Alt (PC) / Cmd (Mac) si disattiva temporaneamente la griglia.
  • Le note MIDI vengono riprodotte anche se il playhead è partito dopo l’effettivo inizio della nota (MIDI Note Chasing).
  • Il doppio click su una traccia MIDI crea una clip.
  • È possibile zoomare le tracce premendo Alt e verticalmente premendo Ctrl (PC) / Cmd (Mac).
  • Zoom in/out di una porzione di tempo selezionata (Z / Shift+Z).
  • Aggiunta funzione mostra tutte le tracce (S).
  • È possibile mostrare/nascondere tutte le automazioni (A).
  • Segmenti di automazione possono essere spostati orizzontalmente

Miglioramenti del workflow

In generale questo aggiornamento di Ableton 10 si caratterizza per una serie di piccoli e quasi invisibili miglioramenti che, però, cambieranno e velocizzeranno il vostro modo di lavorare:

  • Multi-Clip Editing: è possibile editare fino a otto clip midi nella Vista dettagliata. Se le clip sono di lunghezza differente, Ableton creerà automaticamente un loop per allineare tutte le clip.
  • Gruppi annidati: i gruppi possono essere inseriti in altri gruppi. Non c’è limite al numero di gruppi annidati gli uni negli altri.
  • Reset con doppio click: facendo doppio click su qualsiasi parametro, il suo valore viene resettato (finalmente!).
  • Raccolte nel browser: è stata aggiunta nel browser la sezione Raccolte che permette di categorizzare il contenuto della libreria per tag colori.
  • Metronomo: non solo sono stati aggiunti dei nuovi suoni tra cui scegliere ma è anche possibile impostare il metronomo per contare le suddivisioni ritmiche.
  • Backup Folder: ogni volta che salviamo il progetto, viene creata una copia di backup della versione precedente. In questo modo è possibile risalire fino a 10 salvataggi precedenti.
  • Pan Split-stereo: facendo Ctrl+Click sul knob del Pan è possibile impostarlo come Stereo Split.

Max 8 e Max for Live

Max for Live è ora integrato direttamente nel programma: non è necessario installare alcun pacchetto esterno. Nella versione beta di Ableton 10 è presente una versione beta di Max 8. Beta-inception.

Tra le novità: nuovi strumenti e il supporto multi input/output.

Conclusione

Quelle descritte in questo post sono solo una parte delle novità presenti nella versione beta attuale di Ableton Live 10. Per farvi un’idea, nel manuale ufficiale il capitolo What’s New in Live 10 occupa ben 10 pagine!

Ormai dovrebbero mancare poche settimane al rilascio della nuova versione; come già detto, io non vedo l’ora.


Nel mondo digitale tutto è un insieme di dati: che si tratti di un testo, una foto oppure un video, stiamo parlando di una sequenza di 1 e 0 che chiamiamo comunemente file.

Con questo post inauguro una nuovo capitolo su questo blog in cui scopriremo insieme come utilizzare Processing per lavorare con file e dati.

Quale potrebbe essere il vantaggio di utilizzare un linguaggio di programmazione per questo genere di attività? Perché non possiamo utilizzare strumenti per grafici o designer come Photoshop o Illustrator? La risposta è semplice: uno dei vantaggi dei computer rispetto alla mente umana è che sono in grado di processare velocemente numeri ed eseguire operazioni ripetitive e complesse molto velocemente.

La vista di un file di Excel pieno di righe e colonne può scatenare il panico nelle persone sane di mente ma per un software non servono altro che due cicli for per accedere al contenuto di ciascuna cella. Quello che impareremo a fare sarà, poi, assegnare quel contenuto a una (o più) variabili e il gioco è fatto.

Pensiamo alle visualizzazioni di dati che negli ultimi anni sono diventate onnipresenti su siti web, riviste e quotidiani. Il loro successo è dovuto al fatto che, grazie a un linguaggio di tipo visuale, rendono più accessibile il contenuto della storia, anche quando include una grande mole di dati. A differenza della carta stampata realizzando un’infografica con Processing si apre un ventaglio di possibilità: possiamo renderla interattiva, in 3D, può essere su uno schermo oppure proiettata su una parete.

Tipi di dato

Quali saranno i tipi di dati su cui lavoreremo? Abbiamo già avuto modo di parlare di immagini e pixel (tema che approfondiremo), ma in questa sezione ci concentreremo su:

  • File di testo (.txt)
  • Tabelle di dati di Excel (.csv, .tsv)
  • Pagine web (.html)
  • Feed (.xml)
  • API (.json)

Da qualche giorno ho aggiornato la grafica del sito che giunge, così, dopo il reboot nel 2013, alla sua terza o quarta versione. L’obiettivo, come sempre, è quello di rendere tutti i contenuti – presenti e futuri – più fruibili.

Ho cercato di curare nei minimi dettagli la leggibilità sia su dispositivi mobili che su schermi più grandi e ho prestato particolare attenzione al miglioramento dei tempi di caricamento pagina.

Sempre sull’onda del minimalismo assoluto, ho eliminato tutti i fronzoli non necessari: barre laterali,  header, immagini, ecc.

Tutto il codice pubblicato nei vari articoli che era hostato su GitHub è stato riportato sul sito, la pagina di Processing è stata completamente ristrutturata. Ho riordinato tutte le categorie del blog e riassegnato gli articoli alla giusta sotto-categoria.

Oltre alla forma si evolveranno anche i contenuti. In generale spero di riprendere un ritmo di pubblicazione più alto: nel 2017 mi ero imposto almeno un post al mese e mi piacerebbe arrivare, nel 2018, ad almeno uno a settimana.

Oltre alla parte relativa alla programmazione – che rimarrà e che si amplierà nel prossimo futuro – entreranno anche nuove categorie.

Proverò ad esplorare anche nuovi mezzi e, una volta per tutte, cercherò di curare quelli che ho già attivato [Facebook, Newsletter] e che non ho mai seguito nel modo giusto.

Non volevo fare il classico post di bilancio del 2017 e di buoni propositi per il 2018. Ho deciso di pubblicare questo post per fissare un punto di inizio e la strada che intendo seguire.

Buona lettura.


Secondo capitolo della rubrica Coding Rescue dove provo a risolvere i vostri problemi con Processing. Questa volta la consegna è piuttosto articolata, riassumo i punti salienti:

  • Lo scopo del programma è quello di “binarizzare” un’immagine ovvero fare in modo che, al click del mouse, i colori dell’immagine vengano modificati utilizzando la funzione binarize(). La funzione imposta un pixel bianco se la sua luminosità è maggiore di una soglia impostata e nero se inferiore.
  • per calcolare la luminosità, si deve utilizzare la funzione brightness().
  • impostare la soglia iniziale a un valore predefinito (a scelta) ma implementare una funzione calculateThreshold() con cui ricalcolarla dinamicamente utilizzando al distanza percorsa dal mouse tra due frame successivi.

Binarizza un’immagine, la soluzione

binarizza un'immagine con Processing

Ecco qui il codice:


/*
 * Coding Rescue #2 - Binarizzare un'immagine
 * Federico Pepe, 26.10.2017
 * http://blog.federicopepe.com/processing
 */
float threshold = 150;
PImage immagine, imgbin;
boolean bin = true;

void setup() {
  size(700, 542);
  immagine = loadImage("corgi-photo.jpg");
  image(immagine, 0, 0);
  frameRate(2);
} 

void draw() {
  threshold = calculateThreshold();
  if (bin) {
    imgbin = immagine.copy();
    image(binarize(imgbin), 0, 0);
  } else {
    image(immagine, 0, 0);
  }
}

void mouseClicked() {
  bin = !bin;
}  

PImage binarize(PImage img) {
  img.loadPixels();
  for (int y = 0; y < img.height; y++) {
    for (int x = 0; x < img.width; x++) { int loc = x + y * img.width; if (brightness(img.pixels[loc]) > threshold) {
        img.pixels[loc] = color(0);
      } else {
        img.pixels[loc] = color(255);
      }
    }
  }
  img.updatePixels();
  return img;
}

float calculateThreshold() {
  float d = dist(pmouseX, pmouseY, mouseX, mouseY);
  threshold = d;
  return threshold;
}

Breve introduzione alla Glitch Art

Per Glitch Art intendiamo la pratica sfruttare e/o introdurre in un’opera degli errori analogici o digitali per fini estetici. Nel mondo dell’analogico si interviene direttamente sugli apparecchi elettronici che registrano o riproducono l’opera. Per quanto riguarda il digitale, invece, tale manipolazione è resa ancora più semplice dagli strumenti tecnologici di cui disponiamo che ci consentono di accedere direttamente ai dati e di farne ciò che vogliamo. Questa pratica è anche chiamata databending.

Non si tratta di un movimento artistico nato, come si potrebbe pensare, negli ultimi anni con la democratizzazione della tecnologia e degli strumenti creativi ma, al contrario, affonda le sue radici nella prima metà del novecento: il filmato qui sotto A Colour Box dell’artista neo-zelandese Len Lye e datato 1935 è considerato uno dei primi esempi di glitch art.

Benché negli ultimi anni abbia riscosso un sempre maggiore successo, questo movimento artistico non è mai diventato mainstream. Possiamo sfruttare quello che abbiamo imparato a fare con Processing per fare i nostri esperimenti di glitch art e per studiare qualche nuova funzione del linguaggio.

Usiamo Processing per creare un effetto glitch

Lo scopo di oggi è prendere una foto e glitcharla. Nell’esempio proposto non andrò a introdurre un vero e proprio errore nell’immagine ma andrò a manipolare direttamente l’array di pixel per ricreare un effetto artistico simil-glitch. Il motivo è presto detto: per ottenere un effetto artistico godibile è meglio evitare di usare variabile non controllabili.

Glitch fotografia Processing
Immagine di partenza

L’immagine di partenza non è stata scelta in modo casuale: dal momento che useremo la funzione brightness(), che restituisce il valore della luminosità di un colore, la foto presenta un forte contrasto tra lo sfondo e le sagome nere e la parte centrale illuminata dalle fiamme.

/*
 * Glitch di un'immagine con Processing
 * Federico Pepe, 23.09.2017
 * http://blog.federicopepe.com/processing
 */

PImage img;
int minThreshold = 200;
int maxThreshold = 255;

void setup() {
  size(1, 1);
  surface.setResizable(true);
  img = loadImage("fire.jpg");
  surface.setSize(img.width, img.height);  

  noStroke();
  noLoop();
}

void draw() {
  background(255);
  image(img, 0, 0);
  img.loadPixels();

  for (int y = 0; y < height; y++) {
    for (int x = 0; x < width; x++) {

      if (brightness(img.pixels[y*width+x]) > minThreshold && brightness(img.pixels[y*width+x]) < maxThreshold) {
        color c = get(x, y);
        stroke(c);
        line(x, y, x, y+2);
        noFill();
      }
    }
  }
}

void mousePressed() {
  save("export/export.png");
}

Rispetto al codice visto negli ultimi post, ho aggiunto due variabili di soglia minTresholdmaxThreshold e, all'interno del classico ciclo for che va ad analizzare ogni singolo pixel dell'immagine, introdotto un semplice controllo condizionale che, qualora il risultato sua true disegna una linea verticale di 2 pixel dello stesso colore del pixel analizzato.

Glitch immagine esportata

Il risultato è sicuramente particolare e d'effetto. Potete provare a giocare un po' con i parametri di soglia oppure sostituendo il disegno della linea con un quadrato. Un'altra possibilità potrebbe essere quella di non utilizzare il parametro della luminosità ma andare a scegliere la saturazione o il colore stesso.

Glitch with squares
Lo stesso identico codice di prima ma, in questo esempio, ho sostituito line() con rect()

Nelle ultime settimane mi è capitato di fare diversi lavori di grafica – che non è propriamente il campo in cui sono più ferrato – e mi sono sempre trovato in crisi nella scelta della palette di colori più adatta a quello che stavo facendo.

Mentre ero alla ricerca della giusta combinazioni di colori su siti come Coolors e Adobe Color mi è tornata in mente una frase di Joshua Davis detta in uno dei suoi video (non cito testualmente, vado a memoria): le palette di colori che funzionano meglio sono quelle legate a immagini a cui siamo abituati, come un tramonto sul mare oppure le gradazioni di verde in un bosco in montagna. Ecco perché estrarre i colori da una foto è uno dei modi migliori per trovare delle combinazioni che funzionano.

Da qui l’illuminazione: perché non creare uno sketch in Processing per aiutarmi?

Leggere i colori da un’immagine

Partiamo riciclando il codice visto nell’ultimo post: Modificare la dimensione della finestra in base all’immagine caricata. Creiamo un oggetto di tipo PImage e facciamo in mondo che la finestra si ridimensioni automaticamente al caricamento del file. Nel codice sotto riportato noterete un +50 pixel nell’altezza che servirà come spazio per rappresentare i colori della palette in tempo reale.

Per questo sketch ho deciso di utilizzare l’immagine di un prato fiorito:
Leggere i colori da un'immagine con Processing

Ricordatevi di inserire l’immagine nella cartella /data come spiegato qui.

/*
 * Una palette di colori da un'immagine
 * Federico Pepe, 28.08.2017
 * http://blog.federicopepe.com/processing
*/

PImage img;

void setup() {
  size(1, 1);
  surface.setResizable(true);
  img = loadImage("flowers.jpg");
  surface.setSize(img.width, img.height+50); 
}

void draw() {
}

Creiamo due variabili di tipo integer: la prima, numPoints indica il numero di colori di cui sarà composta la nostra palette. Ho deciso di chiamarla points perché prenderemo i dati colori da dei punti nell’immagine. La seconda pointX la utilizzeremo come riferimento per calcolare il valore di x dei punti scelti che, ai fini di questo esempio, saranno equidistanti.

Aggiungiamo un po’ di codice nel ciclo draw(): mostriamo l’immagine come sfondo e carichiamo l’array di pixel. Come anticipato, assegniamo a pointX il valore della larghezza della foto caricata diviso il numero di punti.

Utilizziamo il classico ciclo for per trovare i colori dei punti. Creo un minimo di interfaccia per aiutarmi nel lavoro: intorno ai punti di riferimento disegno un cerchio.

/*
 * Una palette di colori da un'immagine
 * Federico Pepe, 28.08.2017
 * http://blog.federicopepe.com/processing
*/

PImage img;
// Numero di "punti" della nostra palette
int numPoints = 5;
// Valore x di riferimento
int pointX;

void setup() {
  size(1, 1);
  surface.setResizable(true);
  img = loadImage("flowers.jpg");
  surface.setSize(img.width, img.height+50); 
}

void draw() {
  image(img, 0, 0);
  img.loadPixels();
  pointX = img.width / numPoints;
  
  for(int i = 0; i <= numPoints-1; i++) {
    int x = pointX*i;
    int y = mouseY;
    
    if(mouseY <= 0 || mouseY >= img.height) {
      y = img.height/2;
    }
    stroke(255);
    noFill();
    ellipse(x, y, 25, 25);
    color c = img.pixels[x + y * img.width];
    println(c);
  }
  
}

Avendo deciso di lasciare il valore di y variabile e dipendente dalla posizione y del mouse, ho deciso di inserire un controllo condizionale per verificare di non uscire dall’immagine stessa causando un errore Array out of bounds sull’array di pixel.

Nella console vengono mostrati i valori di c ma non sono utilizzabili in alcun programma di grafica perché non sono i classici valori HEX, RGB o HSB.

Mostriamo la palette di colori

Sfrutto i 50 pixel di margine di abbondanza rispetto alla foto per mostrare in tempo reale i colori dei pixel di riferimento. Farlo è molto semplice: creo dei rettangoli con, come fill, il colore estratto in precedenza. Sfrutto questo passaggio per centrare i punti di analisi rispetto alla larghezza della finestra e ai rettangoli in basso.

Palette di colori da immagine

/*
 * Una palette di colori da un'immagine
 * Federico Pepe, 28.08.2017
 * http://blog.federicopepe.com/processing
 */

PImage img;
// Numero di "punti" della nostra palette
int numPoints = 5;
// Valore x di riferimento
int pointX;

void setup() {
  size(1, 1);
  surface.setResizable(true);
  img = loadImage("flowers.jpg");
  surface.setSize(img.width, img.height+50);
}

void draw() {
  image(img, 0, 0);
  img.loadPixels();
  pointX = img.width / numPoints;

  for (int i = 0; i <= numPoints-1; i++) {
    int x = pointX/2+pointX*i;
    int y = mouseY;

    if (mouseY <= 0 || mouseY >= img.height) {
      y = img.height/2;
    }

    stroke(255);
    noFill();
    ellipse(x, y, 25, 25);

    color c = img.pixels[x + y * img.width];

    fill(c);
    rect(pointX*i, img.height, pointX, 50);
  }
}

Otteniamo i valori HEX dei colori

A questo punto il programma funziona nel modo corretto, non ci resta che fare dei piccoli miglioramenti all’interfaccia: grazie alla funzione hex(value, digits) possiamo ottenere il valore esadecimale del colore. Come indicato nel reference, il numero viene rappresentato con un massimo di 8 caratteri ma possiamo ottenerne 6, come siamo abituati, aggiungendo indicando il secondo parametro alla funzione.

Palette colori GIF

Ecco qui il codice:

/*
 * Una palette di colori da un'immagine
 * Federico Pepe, 28.08.2017
 * http://blog.federicopepe.com/processing
 */

PImage img;
// Numero di "punti" della nostra palette
int numPoints = 5;
// Valore x di riferimento
int pointX;

void setup() {
  size(1, 1);
  surface.setResizable(true);
  img = loadImage("flowers.jpg");
  surface.setSize(img.width, img.height+50);
}

void draw() {
  image(img, 0, 0);
  img.loadPixels();
  pointX = img.width / numPoints;

  for (int i = 0; i <= numPoints-1; i++) {
    int x = pointX/2+pointX*i;
    int y = mouseY;

    if (mouseY <= 0 || mouseY >= img.height) {
      y = img.height/2;
    }

    stroke(255);
    noFill();
    ellipse(x, y, 25, 25);

    color c = img.pixels[x + y * img.width];

    fill(c);
    rect(pointX*i, img.height, pointX, 50);
    
    fill(255);
    textAlign(CENTER);
    text("#"+hex(c,6), x, img.height+30);
    
  }
}

Salvare la palette di colori in un file di testo

Siamo quasi alla fine del nostro lavoro: l’unico passaggio che ci manca è salvare la palette di colori in un file .txt in modo da poterli usare a nostro piacimento anche in programmi esterni.

Aggiungiamo qualche riga di codice: creiamo una nuova variabile di tipo StringList il cui contenuto verrà inizializzato a ogni ciclo di draw con la funzione .clear();

Alla pressione del tasto del mouse, verrà salvato il file chiamato palette.txt. La conversione della StringList in array è necessaria perché la funzione saveStrings si aspetta come secondo parametro un array e non una lista.

/*
 * Una palette di colori da un'immagine
 * Federico Pepe, 28.08.2017
 * http://blog.federicopepe.com/processing
 */

PImage img;
// Numero di "punti" della nostra palette
int numPoints = 5;
// Valore x di riferimento
int pointX;
// Salviamo i valori HEX in una lista di stringhe
StringList palette = new StringList();

void setup() {
  size(1, 1);
  surface.setResizable(true);
  img = loadImage("flowers.jpg");
  surface.setSize(img.width, img.height+50);
}

void draw() {
  image(img, 0, 0);
  
  img.loadPixels();
  pointX = img.width / numPoints;
  
  palette.clear();
  
  for (int i = 0; i <= numPoints-1; i++) {
    int x = pointX/2+pointX*i;
    int y = mouseY;

    if (mouseY <= 0 || mouseY >= img.height) {
      y = img.height/2;
    }

    stroke(255);
    noFill();
    ellipse(x, y, 25, 25);

    color c = img.pixels[x + y * img.width];

    fill(c);
    rect(pointX*i, img.height, pointX, 50);
    
    fill(255);
    textAlign(CENTER);
    text("#"+hex(c,6), x, img.height+30);
    // Aggiungiamo il colore come stringa all'array
    palette.append("#"+hex(c,6));
    
  }
}

void mousePressed() {
  saveStrings("palette.txt", palette.array());
}

Negli esempi che abbiamo visto fino ad ora relativi all’uso delle immagini all’interno di Processing abbiamo sempre impostato a priori la grandezza della finestra del nostro sketch in base alla dimensione dell’immagine caricata.

È un metodo molto semplice ma decisamente scomodo se dobbiamo utilizzare tante immagini diverse oppure se vogliamo rendere il nostro programma universale.

Nella versione precedente di Processing era possibile utilizzare delle variabili all’interno della funzione size(). Questa opzione, però, benché fortemente osteggiata dagli sviluppatori fin dal 2009 è stata definitivamente rimossa con l’aggiornamento a Processing 3 perché impediva miglioramenti in termini di performance, velocità e compatibilità cross-platform.

Non disperate! Esiste una soluzione alternativa che, però, non è ben descritta nel reference del linguaggio. Ecco perché ho pensato fosse interessante scrivere un breve articolo a riguardo.

Ecco come fare:

  • All’interno di setup() è comunque necessario indicare una dimensione di partenza con la funzione size(). Per semplicità possiamo scrivere: size(1, 1);
  • Dopodiché aggiungiamo la seguente linea di codice: surface.setResizable(true); mi raccomando, fate attenzione alle maiuscole!
  • A questo punto, nel punto in cui abbiamo la necessità di reimpostare la dimensione è sufficiente scrivere: surface.setSize(larghezza, altezza); dove larghezza altezza sono i nostri parametri.

Ecco un esempio con un’immagine:

/*
 * Modificare la dimensione della finestra in base all'immagine caricata
 * Federico Pepe, 25.06.2017
 * http://blog.federicopepe.com/processing
*/

PImage img;

void setup() {
  size(1, 1);
  surface.setResizable(true);
  img = loadImage("immagine.jpg");
  surface.setSize(img.width, img.height);  
}

void draw() {
}

Per cambiare la dimensione a ogni click del mouse:

/*
 * Modificare la dimensione della finestra in base all'immagine caricata
 * Federico Pepe, 25.06.2017
 * http://blog.federicopepe.com/processing
*/

void setup() {
  size(100, 100);
  surface.setResizable(true);
}

void draw() {
}

void mousePressed() {
  surface.setSize(round(random(100, 500)), round(random(100, 500)));  
}

Inauguro oggi con questo post una rubrica chiamata Coding Rescue ovvero: come risolvere problemi di programmazione che mi vengono posti dai lettori del blog. Ogni tanto capita che qualcuno mi scriva privatamente perché è rimasto bloccato con un esercizio in Processing che non riesce a risolvere e mi viene chiesto di dare una mano a trovare una soluzione.

Mi piace ricevere questo genere di messaggi perché mi permette di scontrarmi con difficoltà a cui non avevo mai pensato. Dal momento che capita a tutti – sottoscritto compreso – di rimanere bloccati per giorni, penso che aiutare le persone sia un ottimo modo per allenarsi e imparare qualcosa di nuovo.

Il problema

Qualche giorno fa ho ricevuto il seguente messaggio sulla mia pagina Facebook:

creare un progettino, ovvero una funzione, che inverte (sotto sopra) l’immagine, solo all’interno di un quadrato che si crea intorno al puntatore del mouse.

Il problema è interessante perché pone una serie di sfide che, sommate, non sono per nulla semplici:

  1. Dobbiamo lavorare con un’immagine
  2. Lo script deve essere dinamico perché in relazione alla posizione del puntatore del mouse
  3. Dobbiamo invertire sotto sopra una porzione di un’immagine

Come consiglio sempre: è importante concentrarsi sui vari punti uno per volta perché, altrimenti, si rischia di non arrivare facilmente alla soluzione.

La soluzione in pseudo-codice

Prima di cominciare a scrivere il codice, proviamo a descrivere il funzionamento del programma a parole; ho sottolineato con il corsivo le parole chiave: il nostro sketch dovrà, all’avvio, caricare un’immagine. Intorno alla posizione del mouse disegneremo un quadrato e, una volta analizzati i pixel presenti all’interno di questo quadrato, creeremo e disegneremo una nuova immagine che avrà dimensione pari a quella del quadrato i cui pixel, rispetto all’originale, saranno invertiti sotto-sopra.

La soluzione: passo dopo passo

1. Carichiamo l’immagine

Per prima cosa dobbiamo ripassare come si lavora sulle immagini:

Per risolvere il problema avremo bisogno di due oggetti immagine: il primo sarà l’immagine originale mentre, la seconda, sarà l’immagine con i pixel invertiti che chiamerò flipped. Avremo inoltre bisogno di impostare una variabile che determinerà la larghezza del quadrato e, di conseguenza, la grandezza dell’immagine che andrò a creare. Per questo esercizio, ho deciso di usare la foto di un corgi.

Nella funzione draw, per il momento, mi preoccupo solo di disegnare un quadrato intorno alla posizione del mouse.

/*
 * Coding Rescue #1 - Invertire sotto-sopra una porzione di un'immagine
 * Federico Pepe, 11.06.2017
 * http://blog.federicopepe.com/processing
 */

// Creo i due oggetti immagine
PImage img, flipped;

// Variabile che determina la larghezza del quadrato
int w = 100;

void setup() {
  size(700, 542);
  // Carico l'immagine originale e la disegno
  img = loadImage("corgi-photo.jpg");
  image(img, 0, 0);
  // Creo l'immagine flipped
  flipped = createImage(w, w, RGB);
  noFill();
}

void draw() {
  image(img, 0, 0);

  rectMode(CENTER);
  rect(mouseX, mouseY, w, w);
}

2. Carichiamo i pixel di riferimento in un array

Il prossimo passaggio sarà analizzare i pixel all’interno del quadrato disegnato e inserirli uno per uno all’interno di un array: avendo come riferimento la posizione del mouse e volendo tenere quel punto al centro del quadrato creo quattro variabili: startX, startY, endX ed endY che mi serviranno come riferimento per i cicli for.

Invece di utilizzare un array classico, decido di usare una variabile di tipo IntList questo perché si tratta di un tipo di dato più flessibile che gestisce gli elementi al suo interno in modo più dinamico e rapido. Operazioni quali l’aggiunta, la modifica, la lettura dei dati al suo interno sono più veloci e semplici da eseguire rispetto ai comuni array.

/*
 * Coding Rescue #1 - Invertire sotto-sopra una porzione di un'immagine
 * Federico Pepe, 11.06.2017
 * http://blog.federicopepe.com/processing
 */

// Creo i due oggetti immagine
PImage img, flipped;

// Variabile che determina la larghezza del quadrato
int w = 100;

// Variabile nella quale inserirò tutti i pixel analizzati
IntList arrayPixel = new IntList();

void setup() {
  size(700, 542);
  // Carico l'immagine originale e la disegno
  img = loadImage("corgi-photo.jpg");
  image(img, 0, 0);
  // Creo l'immagine flipped
  flipped = createImage(w, w, RGB);
  noFill();
}

void draw() {
  image(img, 0, 0);
  
  int startX = mouseX-w/2;
  int startY = mouseY-w/2;
  int endX = mouseX + w/2;
  int endY = mouseY + w/2;
  
  img.loadPixels();
  
  for (int y = startY; y < endY; y++) {
    for (int x = startX; x < endX; x++) {
      arrayPixel.append(get(x, y));
    }
  }
  
  rectMode(CENTER);
  rect(mouseX, mouseY, w, w);
}

Problema:

In questo momento ad ogni iterazione di draw, la variabile arrayPixel, grazie alla funzione append(), viene ingrandita di 10.000 valori (100*100). Per vedere cosa accade, provate ad aggiungere: println(arrayPixel.size());. Se provassimo a disegnare un'immagine con una dimensione variabile, il programma andrebbe in crash. È importante, dunque, svuotare l'array prima dei cicli for con la funzione clear()arrayPixel.clear();

3. Aggiungiamo i pixel analizzati nell'immagine di destinazione

Ora che i pixel contenuti nel quadrato di riferimento sono stati aggiunti all'array dobbiamo trasferirli tutti all'interno della nostra immagine di destinazione che abbiamo creato in precedenza.

Carichiamo, quindi, i pixel dell'immagine di destinazione e, attraverso un ciclo for, assegniamo a ogni pixel il pixel relativo presente all'interno dell'array:

flipped.loadPixels();
for (int i = 0; i < arrayPixel.size(); i++) {
  flipped.pixels[i] = arrayPixel.get(i);
}
flipped.updatePixels();

Aggiungendo image(flipped, 0, 0); alla fine del ciclo draw e cliccando su Run dovreste vedere in alto a sinistra un quadrato di 100 pixel contenente la stessa immagine del quadrato di riferimento disegnato intorno alla posizione del mouse.

Ora non ci resta che completare il lavoro.

4. Invertire l'immagine di destinazione sotto-sopra

Mentre lavoravo all'esercizio, arrivato a questo punto mi sono bloccato. Per invertire un'immagine sottosopra avrei dovuto modificare l'ultimo ciclo for scritto per fare in modo che i pixel venissero scritti nell'immagine di destinazione invertiti rispetto all'originale. Su questa cosa ho sbattuto la testa per qualche giorno poi è arrivata l'illuminazione: anziché andare a complicarmi la vita con i pixel, avrei potuto usare le funzioni di trasformazione.

In particolare, dopo aver fatto una veloce ricerca, se passiamo valori negativi alla funzione scale(), otteniamo l'immagine invertita.

pushMatrix();
translate(startX, startY+w);
scale(1, -1);
image(flipped, 0, 0);
popMatrix();

Ecco che con queste poche righe di codice, siamo giunti alla fine: se non vi ricordate come funzionano, potete ripassare pushMatrix() e popMatrix() a questo indirizzo.

Risultato finale:


Quick, Draw! in Processing

A fine 2016 Google ha messo on-line Quick, Draw! uno dei suoi esperimenti di intelligenza artificiale e machine learning. Il sito chiede alle persone di disegnare delle forme: un maiale, un tubo per annaffiare il prato, una padella, ecc… e in meno di 20 secondi, attraverso una rete neurale, il computer prova a indovinare cosa è stato disegnato.

Più di 15 milioni di persone hanno partecipato al gioco e, così facendo, Google è riuscita a raccogliere un dataset di più di 50 milioni di disegni che, qualche giorno fa, è stato rilasciato pubblicamente.

Il dataset si compone di 345 categorie e, oltre ai dati vettoriali delle immagini sono inclusi anche una serie di metadati.

L’obiettivo del rilascio di questi dati è:

We’re sharing them here for developers, researchers, and artists to explore, study, and learn from.

Nel giro di poche ore sul mio feed twitter sono comparsi i primi esperimenti (i più interessanti sono quelli di @frauzufall che trovate qui) la maggior parte dei quali, però, generati con OpenFrameworks.

Non trovando nessuno che stesse utilizzando Processing, ho deciso di scrivere un piccolo programma in questo linguaggio per dare la possibilità a tutti di utilizzare questo dataset

Struttura dei dati

I file che si scaricano dal repository rilasciato da Google sono file di tipo .ndjson ovvero file con un oggetto di tipo JSON per ogni riga di file.

Ciascun oggetto è composto dai seguenti dati:

  • key_id (integer): numero univoco che identifica il disegno
  • word (string): la categoria che era stata richiesta
  • recognized (boolean): se il disegno era stato riconosciuto (true) oppure no (false)
  • timestamp (datetime): quando il disegno è stato creato
  • countrycode (string): due lettere per identificare la nazione del giocatore
  • drawing (string): un array JSON contenente i dati vettoriali del disegno
{ 
    "key_id":"5891796615823360",
    "word":"nose",
    "countrycode":"AE",
    "timestamp":"2017-03-01 20:41:36.70725 UTC",
    "recognized":true,
    "drawing":[[[129,128,129,129,130,130,131,132,132,133,133,133,133,...]]]
  }

Per semplificarmi la vita, mi sono concentrato solo sull’ultimo tipo di dato: il mio obiettivo era caricare i dati del dataset e ridisegnare le forme con Processing.

L’array contenente i dati del disegno è a sua volta strutturato in questo modo:

[ 
  [  // First stroke 
    [x0, x1, x2, x3, ...],
    [y0, y1, y2, y3, ...],
    [t0, t1, t2, t3, ...]
  ],
  [  // Second stroke
    [x0, x1, x2, x3, ...],
    [y0, y1, y2, y3, ...],
    [t0, t1, t2, t3, ...]
  ],
  ... // Additional strokes
]

Per fortuna la documentazione di Google è molto chiara: x e y sono le coordinate e t è il tempo trascorso in millisecondi dal primo punto.

Dati preprocessati

I dati contenuti nel dataset sono molti e, infatti, ciascun file pesa diverse centinaia di megabyte. Per fortuna il team di Google ha messo a disposizione anche dei file preprocessati: sono state rimosse le informazioni temporali e tutti i dati sono stati allineati e ridimensionali in un quadrato di 256×256 pixel.

I file .ndjson prepocessati sono disponibili a questo link e, come potete notare, la dimensione è notevolmente ridotta anche se si tratta, pur sempre, di almeno 40-50 megabyte per file.

Importare i dati in Processing

Primo problema: in Processing non esistono funzioni che ci permettono di lavorare su oggetti di tipo JSON differenti a meno che non siano inclusi in un array. All’inizio avevo, dunque, optato per modificare il file dei dati ma, grazie al suggerimento di un utente su Facebook, ho scoperto l’esistenza dell’oggetto BufferedReader che si usa per leggere un file una riga alla volta.

Una volta risolto questo inghippo, tutto è diventato più semplice: le linee restituite dall’oggetto sono di tipo String. Con la funzione parseJSONObject() ho convertito la stringa in un oggetto JSON.

Quick, Draw!

Quick, Draw: il dataset di Google in Processing
Vorrei conoscere chi ha disegnato questa “incudine”

Avendo accesso all’oggetto JSON, l’unico passaggio da fare era estrarre dall’array drawing i dati x e y e assegnarli ai vertici di una forma per poterla disegnare a schermo.

Per farli ho usato un’insieme di funzioni di cui parleremo in futuro.

Per i più curiosi, il codice è disponibile su questo repository su GitHub.