Mondrian Tableau II (moving)

// Design Programming Design, 2024

// week 1: in class exercise

// Mondrian, Tableau II

// schien@mail.ncku.edu.tw

​

// Design Programming Design, 2025

// control lines with variables

// control drawing of lines with a function

// adding conditionals with frame loop to move lines

​

let xPos = 507;

let move = -1;

let minX = 40;

let maxX;

​

function setup() {

  // picture size: 640, 666

  // white background

  createCanvas(640, 666);

  maxX = width;

}

​

function draw() {

  background(255);

  // top white: 0, 0; 248, 0

  rectMode(CORNERS);

  noStroke();

  // top yellow (277, 229, 154): 269, 0; 499, 0

  fill(277, 229, 154);

  rect(269, 0, 499, 53);

  // top dark gray(48): 513, 0; 640, 148

  fill(48);

  rect(513, 0, 640, 148);

  // left blue(45, 76, 158): 0, 307, 42, 527

  fill(45, 76, 158);

  rect(0, 307, 42, 527);

  // bottom right red(226, 73, 10):501, 630, 640, 666

  fill(226, 73, 10);

  rect(497, 625, 640, 666);

  strokeWeight(20);

  stroke(0);

  strokeCap(SQUARE);

  // h line: 0, 305, 42, 305

  line(0, 305, 42, 305);

  //let xRef = mouseX;  // controlling variable

  if ((xPos > minX) && (xPos < maxX)) {

      drawMLines(xPos);

  } else {

    move *= -1;

  }

  xPos += move;

}

​

function drawMLines(ref) {

​

  //line(507, 0, 507, 656);

  line(ref, 0, ref, 656);

  // h line 1

  let hRef = 63;

  line(12, hRef, ref, hRef);

  // v line: 258, 0; 258, 63

  line(ref/2, 0, ref/2, hRef);  // following h line 1

  // v line: 40, 65, 40, 519 

  line(minX, hRef, 40, 519);  // following h line 1

​

  // h line: 507, 157, 640, 157

  line(ref, 157, 640, 157);

  // h line: 10, 520, 507, 520

  line(10, 520, ref, 520);

  // h line: 507, 630, 635, 630

  line(ref, 630, 637, 630);

}