Revising Sketch by Grok

// testing javascript -> p5js by Perplexity AI

​

// Mondrian composition with red, blue, and yellow

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

// March 2010

​

// Q: I want to reduce the size of the red block. How can I do it? Can you show me?

// Grok: To reduce the size of the red block in your p5.js program, you can adjust the parameters in the rect() function call for the red block. Here's how you can modify the code to make the red block smaller:

​

// 2025/3/5

// Q: I want to fill the gap between rectangles with lines. How should I do it?

// Grok: To fill the gaps between your rectangles with lines in p5.js, you'll need to identify the boundaries of the existing shapes and draw lines to connect them where there are spaces. ......

​

function setup() {

    // Create canvas 465x480

    createCanvas(465, 480);

    // Set background as black

    background(255);

    // Draw the red block with reduced size

    noStroke();

    fill(231, 62, 23);

    rect(120, 0, 300, 300); // Reduced width and height

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

​

    // Now add lines to fill gaps

    stroke(0); // Black lines

    strokeWeight(2); // Adjust thickness as needed

    // Line between red block and left-top/middle white blocks

    line(108, 0, 120, 0); // Top edge gap

    line(108, 135, 120, 135); // Between left-top and red

    line(108, 155, 120, 155); // Between left-middle and red

    line(108, 300, 120, 300); // Bottom of red block

    // Vertical line connecting left-top and left-middle white blocks

    line(108, 135, 108, 155);

    // Line between red block and bottom-middle white block

    line(120, 300, 420, 300); // Right edge of red to bottom-middle

    line(420, 300, 420, 353); // Vertical gap to bottom-middle

    // Line between blue block and bottom-middle white block

    line(108, 353, 120, 353); // Connect blue and bottom-middle

    // Lines around yellow block and above-yellow white block

    line(420, 353, 447, 353); // Between bottom-middle and above-yellow

    line(447, 407, 447, 425); // Between above-yellow and yellow

    line(420, 480, 447, 480); // Bottom edge gap

}

​

function draw() {

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

}