Linda Mion – Coding Art

Coding Mondrian

Opera: P. Mondrian, Composition No. III, with Red,
Blue, Yellow and Black (1929).

---

Funzioni e istruzioni per la realizzazione dell’opera

• Avvio delle funzioni di inizializzazione del codice. function setup() {
• Creazione del Canvas di proporzione 400×40.
  createCanvas(400, 400)
• Definizione di un colore di sfondo: Nero (0).
  background(0);
• Chiusura del “function setup”.
  }
• Avvio delle funzioni di disegno.
  function draw() {
• Inizio della creazione della prima forma.
• Definizione del colore della forma: Rosso (#FD0000).
  fill(‘#FD0000’);
• Eliminazione della traccia della forma.
  noStroke
• Disegno della forma: Rettangolo, con coordinate X: 0, Y: 0, e proporzioni: 39×135.
  rect(0, 0, 179, 162);
• Nuova forma.
• Definizione del colore: Giallo (#FFD300).
  fill(“#FFD300”);
• Creazione della forma: Rettangolo, con coordinate X: 0, Y: 265, e proporzioni: 39×135.
  rect(0, 265, 39, 135);
• Creazione di un’altra forma.
• Definizione del colore: Blu (#180D60).
  fill(“#180D60”);
• Creazione della forma: Rettangolo, con coordinate X: 186 Y: 265, e proporzioni: 118×114.
  rect(186, 265, 118, 114);
• Creazione di altre forme accomunate una caratteristica comune: il colore.
• Definizione del colore: Bianco (255).
  fill(255);
• Creazione della forma: Rettangolo, con coordinate X: 185 Y: 0, e proporzioni: 215×162.
  rect(185, 0, 215, 162);
• Creazione della forma: Rettangolo, con coordinate X: 311 Y: 265, e proporzioni: 89×135.
  rect(311, 265, 89, 135);
• Creazione della forma: Rettangolo, con coordinate X: 44 Y: 265, e proporzioni: 135×135.
  rect(44, 265, 135, 135);
• Creazione della forma: Rettangolo, con coordinate X: 185 Y: 386, e proporzioni: 120×14.
  rect(185, 386, 120, 14);
• Creazione della forma: Rettangolo, con coordinate X: 186 Y: 171, e proporzioni: 214×85.
  rect(186, 171, 214, 85);
• Creazione della forma: Rettangolo, con coordinate X: 0 Y: 171, e proporzioni: 177×85.
  rect(0, 171, 177, 85);
• Chiusura del “function draw”.
  }
• Premere: Avvia sketch.
• Si otterrà il risultato sperato che è possibile visualizzarlo sulla sezione dell’Anteprima.

---

Codice

function setup() {
createCanvas(400, 400);
background(0);
}

function draw() {
fill(‘#FD0000’);
noStroke();
rect(0, 0, 179, 162);

fill(“#FFD300”);
rect(0, 265, 39, 135);

fill(“#180D60”);
rect(186, 265, 118, 114);

fill(255);
rect(185, 0, 215, 162);

rect(311, 265, 89, 135);

rect(44, 265, 135, 135);

rect(185, 386, 120, 14);

rect(186, 171, 214, 85);

rect(0, 171, 177, 85);
}

---

Sito

https://editor.p5js.org/lindamion/sketches/UeJb0Q4oa