Mondrian Colorscape

let width = 1200;

let height = 1200;

let step = width / 16;

// let angles = [0, 90, 180];

​

let squares = [];

// let white = '#000111';

// var colors = ['#D40920', '#1356A2', '#F7D842']; // Mondrian

let colors = ["#7344AC", "#E87CBE", "#F5E993", "#7396A6", "#69D3C1"]; // pastel

// var colors = ['#ffbe0b', '#fb5607', '#ff006e', '#8338ec', '#3a86ff']; // Sunset

// var colors = ["#fb5607", "#a7981c", "#554814", "#40f5d6", "#57b576"]; // rustic modded

// let colors = ['#fb5607', "#e8ff81", "#29f0b6", "#531253", "#ea3788"]; // Cyber

// let colors = ["#2E294E", "#541388", "#F1E9DA", "#FFD400", "#D90368"]; // genuary

​

function setup() {

  createCanvas(width, height);

  noLoop();

​

  squares.push(new Square(0, 0, width, height));

  for (var i = 0; i < width; i += step) {

    splitSquaresWith({ y: i });

    splitSquaresWith({ x: i });

  }

  for (let i = 0; i < squares.length; i++) {

    squares[i].displayRadial();

  }

}

​

​

class Square {

  constructor(x, y, width, height) {

    this.x = x;

    this.y = y;

    this.width = width;

    this.height = height;

  }

  display() {

    // let palette = (random() > 0.3 ? colors : colors2);

    drawingContext.strokeStyle = "#000";

    drawingContext.lineWidth = 6;

    let shuffledColors = shuffle(colors);

    let gradient = shuffledColors[0];

    let x1 = this.x;

    let y1 = this.y;

    let x2 = this.x+this.width;

    let y2;

    if (abs(this.width - this.height) < 0.1) { // if square: diagonal gradient

      y2 = this.y+this.height;

      if (random() > 0.5) { // random chance to flip

        y1 = this.y+this.height;

        x2 = this.x+this.width;

        y2 = this.y;

      }

    } else { // not square: gradient spanning thinner dimension

      y2 = this.y;

      if (this.width > this.height) {

        x2 = this.x;

        y2 = this.y+this.height;

      }

    }

    gradient = drawingContext.createLinearGradient(x1, y1, x2, y2);

    gradient.addColorStop(0, color(shuffledColors[0]));

    gradient.addColorStop(0.5, color(shuffledColors[1]));

    gradient.addColorStop(1, color(shuffledColors[2]));

    drawingContext.fillStyle = gradient;

    rect(this.x, this.y, this.width, this.height);

    drawingContext.fill();

    drawingContext.stroke();

  }

  displayRadial() {

    // let palette = (random() > 0.3 ? colors : colors2);

    drawingContext.strokeStyle = "#000";

    drawingContext.lineWidth = 5;

    let shuffledColors = shuffle(colors);

    let gradient = shuffledColors[0];

    if (abs(this.width - this.height) < 0.1) { // if square: diagonal gradient

      let xr = this.x+this.width/2;

      let yr = this.y+this.height/2;

      gradient = drawingContext.createRadialGradient(xr, yr, 0, xr, yr, this.width/2);

      gradient.addColorStop(0, color(shuffledColors[0]));

      gradient.addColorStop(0.5, color(shuffledColors[1]));

      gradient.addColorStop(1, color(shuffledColors[2]));

​

    } else { // not square: gradient spanning thinner dimension

      let x1 = this.x;

      let y1 = this.y;

      let x2 = this.x+this.width;

      let y2 = this.y;

      if (this.width > this.height) {

        x1 = this.x;

        y1 = this.y;

        x2 = this.x;

        y2 = this.y+this.height;

      }

      gradient = drawingContext.createLinearGradient(x1, y1, x2, y2);

      gradient.addColorStop(0, color(shuffledColors[0]));

      gradient.addColorStop(0.5, color(shuffledColors[1]));

      gradient.addColorStop(1, color(shuffledColors[2]));

​

    }

    // fill(color(shuffle(colors)[0]));

​

    drawingContext.fillStyle = gradient;

    rect(this.x, this.y, this.width, this.height);

    drawingContext.fill();

    drawingContext.stroke();

  }

}

​

function splitSquaresWith(coordinates) {

  // Loops through the squares, and find if one should be split

  const { x, y } = coordinates;

​

  for (let i = squares.length - 1; i >= 0; i--) {

    const square = squares[i];

​

    if (x && x > square.x && x < square.x + square.width) {

      if (Math.random() > 0.5) {

        squares.splice(i, 1);

        splitOnX(square, x);

      }

    }

    if (y && y > square.y && y < square.y + square.height) {

      if (Math.random() > 0.5) {

        squares.splice(i, 1);

        splitOnY(square, y);

      }

    }

  }

}

​

function splitOnX(square, splitAt) {

  // Create two new squares, based on splitting the given one at the x coordinate given

  var squareA = new Square(square.x, square.y, square.width - (square.width - splitAt + square.x), square.height);

  var squareB = new Square(splitAt, square.y, square.width - splitAt + square.x, square.height);

  squares.push(squareA);

  squares.push(squareB);

}

​

function splitOnY(square, splitAt) {

  // Create two new squares, based on splitting the given one at the y coordinate given

  var squareA = new Square(square.x, square.y, square.width, square.height - (square.height - splitAt + square.y));

  var squareB = new Square(square.x, splitAt, square.width, square.height - splitAt + square.y);

  squares.push(squareA);

  squares.push(squareB);

}