Francesco Bocchi – Coding Art

Composition No. 10, Mondrian

Ho importato il quadro di riferimento di Mondrian su Figma impostando una dimensione di 400×400 px.

Successivamente, in p5 ho creato una canvas 400×400 px e ho impostato lo sfondo bianco.

Su Figma ho poi utilizzato le guide per individuare e misurare le dimensioni dei vari rettangoli della composizione. Con il puntatore colore ho rilevato anche i colori delle diverse aree.

Ho quindi ricreato ogni forma su p5 utilizzando principalmente le funzioni rect() per i rettangoli e fill() per applicare i colori corrispondenti.

Ho ripetuto questo procedimento per tutte le forme presenti nell’immagine, mantenendo ordine nel codice assegnando un riferimento a ogni elemento tramite commenti (//) per riconoscere facilmente le diverse parti della composizione. Tramite i commenti ho tenuto traccia anche di cambiamenti di spessore e colore applicati durante la scrittura del codice.

Codice

function setup() {
createCanvas(400, 400);
}
function draw() {
background(255);
//rect verticale 1 (da sinistra)
fill(‘black‘);
rect(45, 0, 9, 400);
//rect verticale 2 (da sinistra)
fill(‘black‘);
rect(101, 0, 9, 400);
//rect verticale 3 (da sinistra)
fill(‘black‘);
rect(294, 0, 9, 400);
//rect verticale 4 (da sinistra)
fill(‘black‘);
rect(333, 0, 9, 400);
//rect verticale 5 (da sinistra)
fill(‘black‘);
rect(363, 0, 9, 400);
//rect orizzontale 1 (dall’alto)
fill(‘black‘);
rect(109, 5, 185, 6);
//rect orizzontale 2 (dall’alto), aumento lo spessore di 3px
fill(‘black‘);
rect(109, 91, 185, 9);
//rect orizzontale 3 (dall'alto), cambio la lunghezza (400px)
fill(‘black‘);
rect(0, 130, 400, 9);
//rect orizzontale 4 (dall'alto)
fill(‘black‘);
rect(0, 222, 400, 9);
//rect orizzontale 5 (dall'alto), cambio la lunghezza (279px)
fill(‘black‘);
rect(54, 244, 279, 9);
//rect orizzontale 6 (dall'alto), reimposto la lunghezza a 400px
fill(‘black‘);
rect(0, 267, 400, 9);
//rect orizzontale 7 (dall'alto), dimunuisco la lunghezza (254px)
fill(‘black‘);
rect(109, 379, 254, 9);
//rect orizzontale 8 (rettangolo corto in alto a sinistra)
fill(‘black‘);
rect(0, 83, 45, 19);
//rect blu
noStroke()
fill(‘#3D5C9F‘); //seleziono il blu del quadro con il puntatore su Figma
rect(0, 0, 45, 83);
//rect giallo 1 (da sinistra)
noStroke()
fill(‘#EDD006‘); //seleziono il giallo del quadro con il puntatore su Figma
rect(0, 231, 45, 36);
//rect giallo 2 (da sinistra)
noStroke()
fill(‘#EDD006‘);
rect(302, 388, 31, 12);
//rect giallo 3 (da sinistra)
noStroke()
fill(‘#EDD006‘);
rect(340, 388, 23, 12);
//rect rosso 1 (da sinistra)
noStroke()
fill(‘#992B18‘); //seleziono il rosso del quadro con il puntatore su Figma
rect(0, 290, 45, 24);
//rect rosso 2 (da sinistra)
noStroke()
fill(‘#992B18‘);
rect(201, 388, 23, 12);
//rect rosso 3 (da sinistra)
noStroke()
fill(‘#992B18‘);
rect(372, 139, 28, 83);
}