Revise Sketch by Perplexity AI

// testing javascript -> p5js by Perplexity AI

​

// Mondrian composition with red, blue, and yellow

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

// March 2010

​

// 2025/03/05 to revise and make lines available for manipulation

// Q: I am revising my p5.js program. The source code... I want to fill the gaps between rectangles with thick lines. How can I do it?

// Perplexity: To fill the gaps between rectangles with thick lines in your p5.js program, you can use the line() function along with strokeWeight() to control the thickness. ......

​

function setup() {

    // Create canvas 465x480

    createCanvas(465, 480);

    // Set background as black

    background(100);

    // 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);

    // 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);

    // Left-middle white block

    rect(0, 155, 108, 338 - 155);

    // Bottom-middle white block

    rect(120, 353, 437 - 120, 480 - 353);

    // Above yellow white block

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

    // Draw thick lines to fill gaps

    stroke(0); // Set line color to black

    strokeWeight(12); // Set line thickness

    // Vertical lines

    line(108, 0, 108, 480); // Left vertical line

    line(437, 353, 437, 480); // Right vertical line

    line(447, 338, 447, 480); // Far right vertical line

    // Horizontal lines

    line(0, 135, 120, 135); // Top left horizontal line

    line(0, 155, 120, 155); // Middle left horizontal line

    line(0, 338, 465, 338); // Main horizontal line

    line(0, 353, 465, 353); // Bottom horizontal line

    line(447, 407, 465, 407); // Short right horizontal line

    line(447, 425, 465, 425); // Bottom right horizontal line

}

​