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:
- CARTELLA-SKETCH
- assets
- libs
- p5.min.js
- index.html
- sketch.js