Sara Tesan – Coding Art

Mondrian, Composition No. III, with Red, Blue, Yellow and Black

Per realizzare Composition No. III, with Red, Blue, Yellow and Black di Mondrian, prima di tutto l’ho importato su Figma, che mi ha aiutata a definire sia le posizioni dei vari rettangoli che a campionare i colori utilizzati.

Su p5.js ho poi seguito quest’ordine:

• ho creato un canvas di 500 x 502
• ho assegnato il colore di sfondo campionato (236,238,233 in RGB)

Poi con draw:

• ho stabilito il riempimento del rettangolo rosso con fill(227,45,33)
• ho stabilito che non ci fosse un bordo con noStroke()
• ho creato il rettangolo con rect(0,0,210,270)

• sono poi passata al rettangolo giallo, per cui non ho nuovamente specificato la mancanza di bordo
• ho quindi definito il colore con fill(252,216,39)
• ho realizzato il rettangolo con rect(221,489,130,13)

• allo stesso modo ho realizzato il rettangolo blu, definendo il colore con fill(0,74,151)
• seguito da rect(469,281,31,81)

• sono poi passata ai rettangoli neri, definendo quindi prima di tutti fill(0)
• il primo che ho realizzato è stato quello in basso a destra, con rect(351,477,107,25)
• seguito da rect(210,0,11,502)
• rect(0,270,500,11)
• rect(221,477,130,12)
• rect(458,281,11,221)
• rect(469,362,31,18)

https://editor.p5js.org/ts.sara283/sketches/rYnEFBQY_

---

Lewitt, Wall drawing #630

Ho agito allo stesso modo anche per lavorare su Wall drawing #630 di Lewitt, importandola su Figma.

Su p5.js quindi:

• ho creato un canvas di 320 x 360
• ho stabilito uno sfondo bianco con background(255)

Poi con draw:

• ho stabilito il riempimento dei rettangoli neri con fill(0)
• e l’assenza di bordo con noStroke()
• sono poi passata a dare le coordinate e misure dei vari rettangoli neri, iniziando da rect(0,0,320,20)
• seguito da rect(0,40,320,20)
• rect(0,80,320,20)
• rect(0,120,320,20)
• rect(0,160,320,20)
• rect(0,180,20,180)
• rect(40,180,20,180)
• rect(80,180,20,180)
• rect(120,180,20,180)
• rect(160,180,20,180)
• rect(200,180,20,180)
• rect(240,180,20,180)
• rect(280,180,20,180)

https://editor.p5js.org/ts.sara283/sketches/fvePWmYE6

---

Lewitt, Wall drawing #579

Infine, per il Wall drawing #579 di Lewitt, dopo aver importato l’immagine su Figma, ho deciso di procedere realizzando per ogni colore un rettangolo e un cerchio.

Quindi su p5.js:

• ho creato un canvas di 400 x 400
• ho stabilito lo sfondo bianco con background(255)

Con draw:

• ho stabilito subito l’assenza di bordi co noStroke()
• ho iniziato con la figura azzurra (essendo quella più “in fondo”), stabilendo quindi il riempimento del colore precedentemente campionato con fill(40,172,218)
• ho poi realizzato il rettangolo con rect(74,126,252,274)
• viste le misure prese su Figma, ho cambiato l’impostazione predefinita secondo cui l’ellisse viene costruita a partire dal centro; ho quindi usato ellipseMode(CORNER)
• ho poi disegnato l’ellisse con ellipse(74,0,252)

• ho seguito lo stesso procedimento anche per la figura rosa, stabilendo prima di tutto il riempimento con fill(218,91,121)
• dopo sono passata alla costruzione del rettangolo con rect(125,126,150,274)
• e ho concluso la seconda figura con l’ellisse ottenuta con ellipse(125,50,150)

• anche per la figura gialla ho iniziato con il riempimento, con fill(248,215,24)
• ho costruito poi il rettangolo con rect(174,126,51,274)
• ho concluso con l’ellisse gialla, con ellipse(174,100,51)

https://editor.p5js.org/ts.sara283/sketches/FhfFsXIG5