Mondrian Tableau II (color changing)

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

​

// adding color controls

// from an unrelevant ChatGPT conversation, it recommanded to use variables for colors

​

let xPos = 507;

let move = -1;

let minX = 40;

let maxX;

​

// colors

let palettes = 8;

let yellowColor = [];

let darkGrayColor = [];

let blueColor = [];

let redColor = [];

​

function setup() {

  // picture size: 640, 666

  // white background

  createCanvas(640, 666);

  maxX = width;

​

  setupColorPalettes();

}

​

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

​

}

​

function setupColorPalettes() {

  let yellowL = color(277, 229, 154);

  let darkGrayL = color(48);

  let blueL = color(45, 76, 158);

  let redL = color(226, 73, 10);

  let yellowR = color(277, 229, 0);

  let darkGrayR = color(200);

  let blueR = color(45, 76, 200);

  let redR = color(226, 10, 10);

  for(let i=0; i<palettes; i++) {

    //let pcolor = lerp

  }

}