ASCII Art: esempio

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

function preload() {
    photo = loadImage( "assets/blue-eyes.jpg" );
    font = loadFont( "assets/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 y=0;  y<photo.height;  y++) {
        for (let x=0;  x<photo.width;  x++) {
            let col = photo.get( x, y );
            let tone = lightness(col) / toneDiv;
            let letter = letters.charAt( tone );

            text( letter, x*charW, y*charH );
        }
    }
}
let toneDiv = 100.0 / letters.length;
...
    let tone = lightness(col) / toneDiv;

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

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

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

let letter = letters.charAt( tone );

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 letters. Provare anche con una stringa molto minimalista, ad esempio "_|".

Per provare la palette con immagini diverse si può usare l'indirizzo "https://loremflickr.com/670/400/face" come parametro dell'istruzione loadImage(). Ricordarsi che gli URL vanno indicati sempre fra virgolette.


Strutturazione dei file: