ASCII Art: esempio

// height=400 lines=auto
var photo;
var font;
var letters = " ¸.-~yYzWaEg@";  // palette caratteri
var charW = 7;                  // larghezza caratteri
var charH = 10;                 // altezza caratteri
var toneDiv = 100.0 / letters.length;

function preload() {
    photo = loadImage( "../assets/blue-eyes.jpg" );
    font = loadFont( "../assets/RobotoMono.ttf" );
}

function setup() {
    createCanvas(670, 400);
    background(0);
    fill(255);
    textFont( font, 10 );
    textAlign( LEFT, TOP );

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

    for (var y=0;  y<photo.height;  y++) {
        for (var x=0;  x<photo.width;  x++) {
            var col = photo.get( x, y );
            var tone = lightness(col) / toneDiv;
            var letter = letters.charAt( tone );

            text( letter, x*charW, y*charH );
        }
    }
}
var toneDiv = 100.0 / letters.length;
...
    var 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.

var 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ù efficace o più estesa usando caratteri diversi nella definizione della stringa letters.

 


Strutturazione dei file: