Recreate Mondrian

// testing javascript -> p5js by Perplexity AI

​

// Mondrian composition with red, blue, and yellow

// Sheng-Fen Chien <schien@mail.ncku.edu.tw>

// March 2010

​

// I start to revise by myself to create lines

// schien@mail.ncku.edu.tw

// 2025/3/5

​

function setup() {

  // Create canvas 465x480

  createCanvas(465, 480);

​

  // Set background as black

  background(200);

​

  // Draw the largest red block

  noStroke();

  fill(231, 62, 23);

  rect(120, 0, 465 - 120, 338);

​

  // Draw the blue block

  fill(82, 90, 165);

  rect(0, 353, 108, 480 - 353); // ref to h line 2

​

  // Draw the yellow block

  fill(249, 244, 2);

  rect(447, 425, 465 - 447, 480 - 425);

​

  // Draw white blocks

  fill(255, 255, 255);

​

  // Left-top white block

  rect(0, 0, 108, 135); // ref to h line 1

​

  // Left-middle white block

  rect(0, 155, 108, 338 - 155); // ref to h line 1 & 2

​

  // Bottom-middle white block

  rect(120, 353, 437 - 120, 480 - 353); // ref to h line 3

​

  // Above yellow white block

  rect(447, 353, 465 - 447, 407 - 353);

​

  // draw lines

  stroke(0);

  strokeWeight(20);

  // h line 1

  line(0, 145, 108, 145);

  // h line 2

  strokeWeight(15);

  line(0, 345, width, 345);

​

  // suggested by Perplexity

  // consider adding a few more lines:

  // 1. A vertical line at x=108 from top to bottom.

  // 2. A vertical line at x=437 from y=353 to the bottom.

  // 3. A vertical line at x=447 from y=338 to the bottom.

  // 4. A horizontal line at y=407 from x=447 to the right edge.

  // 5. A horizontal line at y=425 from x=447 to the right edge.

  // Q: Item 4 and item 5 may be better merged as one line.

  // Perplexity:

  // Merged horizontal line (combining item #4 and #5)

  //strokeWeight(25); // Thicker line to cover both gaps

  //line(447, 407, width, 407); // Single horizontal line spanning from x=447 to canvas width

  strokeWeight(20);

  line(447, 413, width, 413);

  // Perplexity:

  // Merged vertical line (combining items #2 and #3)

  //strokeWeight(30); // Increase thickness to cover both gaps

  //line(442, 338, 442, height); // Single vertical line positioned between 437 and 447

  strokeWeight(10); 

  line(442, 343, 442, height); 

}

​

function draw() {

  // No continuous drawing needed; all shapes are drawn in setup()

}