Mondrian's composition (js->p5.js revised by ChatGPT)

// coding with AI

// schien@mail.ncku.edu.tw, Spring 2025

/*

  Me: I need help to revise a computer program into a proper p5.js program. The program code:...(omitted)

  ChatGPT: Here's the revised version of your program in p5.js:

    size(width, height) → replaced with createCanvas(width, height)

    background(color) → remains the same

    rect(x, y, w, h) → remains the same

    noStroke() and fill(r, g, b) → remain the same

    Now, here's the proper p5.js version of your Mondrian composition: ...(omitted)

    This program correctly translates your original Processing sketch into p5.js. It initializes the canvas, 

    sets the background, and draws all the rectangles with their respective colors. The setup() function ensures 

    everything is drawn once, and draw() is left empty since the composition is static. Let me know if you need 

    any modifications! 🚀

  Me: please put back the original comments.

  ChatGPT: I've added back the original comments to your p5.js program. Let me know if you need any further 

  refinements! 🎨🚀

*/

​

function setup() {

  createCanvas(465, 480);

  background(0);

  noStroke();

  // draw mondrian composition with red, blue and yellow

  // sheng-fen chien <schien@mail.ncku.edu.tw

  // march 2010

​

  // Draw the largest red (231,62,23) block; upper-left 120,0; lower-left 120,338

  fill(231, 62, 23);

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

  // Draw the blue (82,90,165) block; upper-right 108,353

  fill(82, 90, 165);

  rect(0, 353, 108, 480 - 353);

  // Draw the yellow (249,244,2) block; upper-left 447,425

  fill(249, 244, 2);

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

  // Draw white blocks

  // left-top; lower-right 108,135

  fill(255, 255, 255);

  rect(0, 0, 108, 135);

  // left-middle; upper-left 0,155

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

  // bottom-middle; upper-right 437,353

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

  // above yellow; lower-left 447,407

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

}

​

function draw() {

  // No need for continuous drawing in this static composition

}

​