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;

async function setup() {
    createCanvas(670, 400);
    photo = await loadImage( "blue-eyes.jpg" );
    font = await loadFont( "Inconsolata-Regular.ttf" );
    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 );
        }
    }
}
  

  let /*1*/toneDiv/**/ = 100.0 / caratteri.length;
...
    let tone = lightness(col) / /*1*/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 carattere = caratteri.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 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:

• CARTELLA-SKETCH
  • libs
    • p5.min.js
  • index.html
  • sketch.js
  • blue-eyes.jpg
  • Inconsolata-Regular.ttf

Con p5.js 1 le immagini e i font si caricano nella funzione preload(), che p5.js 2 non usa più:

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