Jessica Del Monaco – Geometric Typography

Creazione delle lettere JDM utilizzando forme geometriche, animate utilizzando diverse componenti di variabilità.

Tutte le lettere appaiono gradualmente:

• la J è formata da 12 piccoli triangoli che vengono mostrati uno alla volta in sequenza
• la D compare come dal nulla nel centro della canvas ingrandendosi sempre più, fino a raggiungere una dimensione massima, pari a quella delle altre lettere
• la M è creata con quattro linee che, come nella scrittura a mano si allungano da sinistra a destra una alla volta

Questi sono i vari passaggi:

//dichiarazione e assegnamento variabili di posizione
var tx1 = 119;
var tx2 = 104;
var tx3 = 88;

//variabili iniziali per le animazione
let mostra_triangoli = 0; //lettera J
let scala_d = 0; //dimensione iniziale lettera D
let p1 = 0, p2 = 0, p3 = 0, p4 = 0; //lettera M

function setup() {
createCanvas(400, 400); //creazione canvas
}

function draw() {
background(‘rgb(89,2,89)’); //colore sfondo

//animazione triangoli
if (frameCount % 15 === 0 && mostra_triangoli < 12) {
mostra_triangoli++;
}

noStroke(); //rimozione traccia
fill(‘orange’); //colore forme

// creazione triangoli, mostrati uno alla volta
if (mostra_triangoli >= 12) triangle(20,239,34,221,52,235);
if (mostra_triangoli >= 11) triangle(34,261,36,239,59,241);
if (mostra_triangoli >= 10) triangle(55,274,47,253,68,245);
if (mostra_triangoli >= 9) triangle(81,274,64,260,77,242);
if (mostra_triangoli >= 8) triangle(103,263,81,258,86,236);
if (mostra_triangoli >= 7) triangle(116,239,95,247,tx3,226);
if (mostra_triangoli >= 6) triangle(120,216,103,231,tx3,214);
if (mostra_triangoli >= 5) triangle(tx1,197,tx2,213,tx3,197);
if (mostra_triangoli >= 4) triangle(tx1,179,tx2,195,tx3,179);
if (mostra_triangoli >= 3) triangle(tx1,162,tx2,177,tx3,162);
if (mostra_triangoli >= 2) triangle(tx1,144,tx2,160,tx3,144);
if (mostra_triangoli >= 1) triangle(tx1,126,tx2,142,tx3,126);

//animazione lettera D
if (scala_d < 1) {
scala_d = scala_d + 0.01; //aumento graduale dimensione
} else {
scala_d = 1; //dimensione massima
}
push() // inizio zona di trasformazione isolata
translate(200, 200); //spostamento centro virtuale di disegno
scale(scala_d); //ingrandimento lettera D
rect(-50, -75, 100, 150, 0, 75, 75, 0);
fill(‘rgb(89,2,89)’); //colore ellisse
ellipse(0, 0, 55, 100); //creazione ellisse
pop(); // fine zona di trasformazione isolata.

stroke(‘orange’); //colore linee
strokeCap(ROUND); //estremi delle linee arrotondati
strokeWeight(10); //spessore linee

//animazione lettera M
let v = 0.05; //velocità animazione

if (scala_d >= 1 && p1 < 1) p1 += v;
let y1 = lerp(275, 125, p1);
line(288, 275, 288, y1);

if (p1 >= 1 && p2 < 1) p2 += v; if (p1 >= 1) { //inizio animazione al termine della precedente
let dx1 = lerp(279, 330, p2);
let dy1 = lerp(125, 187, p2);
line(279, 125, dx1, dy1);
}
if (p2 >= 1 && p3 < 1) p3 += v; if (p2 >= 1) { //inizio animazione al termine della precedente
let dx2 = lerp(324, 375, p3);
let dy2 = lerp(187, 125, p3);
line(324, 187, dx2, dy2);
}
if (p3 >= 1 && p4 < 1) p4 += v; if (p3 >= 1) { //inizio animazione al termine della precedente
let y2 = lerp(125, 275, p4);
line(366, 125, 366, y2);
}
}