Torna ai risultati

Elaborazioni vettoriali sul contorno dei testi (in progress)

   —  font, tipografia, vettori

L'articolo è in fase di scrittura. La pubblicazione definitiva verrà segnalata attraverso i social network con cui è possibile seguire il progetto.

// row-on=desktop-wide
let font;            // font da utilizzare
let vertici = [];    // vertici di base

function preload() {
	// CARICA FONT
    font = loadFont('assets/UbuntuCondensed-Regular.ttf');
}

function setup() {
	createCanvas( 720, 400 );
    // RICAVA I VETTORI DAL TESTO
	let punti = font.textToPoints( 'spighe', 18,275, 280, {
        sampleFactor: 1
    });
    for (let i=0; i<punti.length; ++i) {
        let punto = punti[i];
        vertici.push( createVector( punto.x, punto.y ) );
    }
}

function draw() {
	let trasformati = [];
    // TRASFORMA I VERTICI
    for (let i=0; i<vertici.length; ++i) {
  	    let vertice = vertici[i].copy();
        let angolo = frameCount / ((i % 87) + 1);              // 87 → ?
        let vettoreRotante = p5.Vector.fromAngle( angolo, 9 );  // 9 → ?
		vertice.add( vettoreRotante );
		trasformati[i] = vertice;
    }
    // IMPOSTA AMBIENTE GRAFICO
    background(255);
    stroke(0,192);
    // DISEGNA ELEMENTI BASATI SU VERTICI TRASFORMATI
    for (let j=0; j<trasformati.length; ++j) {
        let vert = trasformati[j];
        circle(vert.x, vert.y, 8);
    }
}

In attesa della pubblicazione definitiva puoi provare a sperimentare gli effetti della modifica dei seguenti parametri

  • la lunghezza dei cicli di rotazione delle "inflorescenze" sul contorno del testo
    [87 nel calcolo di angolo]
  • la distanza dei "fiori" (piccoli cerchi rotanti) dalle origini delle "inflorescenze"
    [9 nel calcolo di vettoreRotante]