ASCII Art: esempio

    let photo;
let font;
let caratteri = " .,;xe$";  // palette caratteri
let charW = 6;              // larghezza cella caratteri
let charH = 9;              // altezza cella caratteri
let toneDiv = 100.0 / caratteri.length;

function preload() {
    photo = loadImage( "blue-eyes.jpg" );
    font = loadFont( "Inconsolata-Regular.ttf" );
}

function setup() {
    createCanvas(670, 400);
    background(0);
    fill(255);
    textFont( font, 14 );
    translate(1,10);      // posizione primo carattere

    photo.resize( photo.width/charW, photo.height/charH );

    for (let riga=0;  riga<photo.height;  riga++) {
        for (let colonna=0;  colonna<photo.width;  colonna++) {
            let col = photo.get( colonna, riga );
            let tone = lightness(col) / toneDiv;
            let carattere = caratteri.charAt( tone );

            text( carattere, colonna*charW, riga*charH );
        }
    }
}

Divisore che permetterà di ricavare il tono della palette di caratteri (tone) a partire dal valore di luminosità del pixel (lightness(col)).

Riduce le dimensioni dell’immagine in modo che a ogni carattere della griglia corrisponda un solo pixel già fuso con quelli adiacenti.

Ricava il carattere da usare come elemento tonale nella cella (della griglia) corrispondente al pixel analizzato.

Provare a definire una palette più estesa, più efficace o anche casuale usando caratteri diversi nella definizione della stringa caratteri. Provare anche con una stringa molto minimalista, ad esempio “_|”.

Per provare la palette con immagini diverse usando, ad esempio, l’indirizzo “https://loremflickr.com/670/400/face” come parametro dell’istruzione loadImage(). Poi si può forzare la riesecuzione dello sketch inserendo spazi nel codice per far caricare immagini diverse.
Ricordarsi che gli URL vanno indicati fra virgolette.

Strutturazione dei file:

Crediti: