Emanuela Parisi- Geometric Typography

Ho deciso di ricreare il mio monogramma (inventato per il corso di interfacce) con una piccola animazione. Ho dichiarato 2 variabili, una per contare i frame e una con le dimensioni dei quadratini, successivamente ho disegnato la e e con un if e un ciclo di addizioni ho creato l’animazione finale

var l= 40 //altezza e lunghezza quadrato var tp=0 //frame per l’animazione function setup() { createCanvas(520, 520); } function draw() { background(‘white’); // animazione e fill(0); rect(160,40,l,l) rect(200,40,l,l) rect(240,40,l,l) rect(120,80,l,l) rect(120,120,l,l) rect(120,160,l,l) rect(120,200,l,l) rect(160,120,l,l) rect(200,120,l,l) rect(240,120,l,l) rect(280,120,l,l) rect(280,80,l,l) rect(160,240,l,l) rect(200,240,l,l) rect(240,240,l,l) rect(280,200,l,l) if (frameCount % 15 === 0 && tp = 2) rect(320,200,l,l); if (tp >= 3) rect(360,200,l,l); if (tp >= 4) rect(400,200,l,l); if (tp >= 5) rect(440,240,l,l); if (tp >= 5) rect(280,240,l,l); if (tp >= 6) rect(440,280,l,l); if (tp >= 6) rect(280,280,l,l); if (tp >= 7) rect(440,320,l,l); if (tp >= 7) rect(280,320,l,l); if (tp >= 8) rect(400,360,l,l); if (tp >= 9) rect(360,360,l,l); if (tp >= 10) rect(320,360,l,l); if (tp >= 11) rect(280,360,l,l); if (tp >= 12) rect(280,400,l,l); if (tp >= 13) rect(280,440,l,l); if (tp >= 14) rect(280,480,l,l); // animazione stelline if (tp >= 15) rect(400,40,l,l); if (tp >= 16) rect(360,40,l,l); if (tp >= 16) rect(440,40,l,l); if (tp >= 16) rect(400,0,l,l); if (tp >= 16) rect(400,80,l,l); if (tp >= 15) rect(120,360,l,l); if (tp >= 16) rect(80,360,l,l); if (tp >= 16) rect(160,360,l,l); if (tp >= 16) rect(120,400,l,l); if (tp >= 16) rect(120,320,l,l); }

View post on imgur.com