Rainbow

// By Roni Kaufman

// https://ronikaufman.github.io

​

let margin = 1;

let N;

let maxSize;

let u, gap;

​

let rectangles = [];

​

let randInt = (a, b) => (floor(random(a, b))); 

​

function setup() {

  createCanvas(600, 600, WEBGL);

  pixelDensity(2);

  noStroke();

  noLoop();

  N = 16;

  maxSize = ~~(N/4);

  u = width/N;

  gap = 5;

  createComposition();

  createConnections();

  DSatur("col", [20, 25, 30, 35, 40], true);

  let rainbowRectangle = random(rectangles);

  rainbowRectangle.rainbow = true;

}

​

function draw() {

  translate(-width/2, -height/2);

  background(5);

  for (let recta of rectangles) {

    drawRectangle(recta);

  }

}

​

// creating the composition

​

function createComposition() {

  let nRects = 1000;

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

    let newRecta = generateRectangle(rectangles);

    if (newRecta.si > 1 || newRecta.sj > 1) {

      rectangles.push(newRecta);

    }

  }

  // fill the gaps with 1x1 rectangles

  for (let i = margin; i < N-margin; i++) {

    for (let j = margin; j < N-margin; j++) {

      let newRecta = {

        i: i,

        j: j,

        si: 1,

        sj: 1

      }

      let canAdd = true;

      for (let recta of rectangles) {

        if (rectanglesIntersect(newRecta, recta)) {

          canAdd = false;

          break;

        }

      }

      if (canAdd) {

        rectangles.push(newRecta);

      }

    }

  }

}

​

function rectanglesIntersect(recta1, recta2) {

  return ((recta1.i <= recta2.i && recta1.i+recta1.si > recta2.i) || (recta2.i <= recta1.i && recta2.i+recta2.si > recta1.i)) && ((recta1.j <= recta2.j && recta1.j+recta1.sj > recta2.j) || (recta2.j <= recta1.j && recta2.j+recta2.sj > recta1.j));

}

​

function generateRectangle(rectangles) {

  let i = randInt(margin, N-margin);

  let j = randInt(margin, N-margin);

  // determine biggest possible size

  let si = 1, sj = 1;

  if (rectangles.length == 0) {

    si = min(maxSize, N-i-margin);

    sj = min(maxSize, N-j-margin);

  } else {

    let intersects = false;

    while (!intersects) {

      si++;

      for (let recta of rectangles) {

        if (i+si > N-margin || si > maxSize || rectanglesIntersect({i: i, j: j, si: si, sj: sj}, recta)) {

          intersects = true;

          break;

        }

      }

    }

    si--;

    intersects = false;

    while (!intersects) {

      sj++;

      for (let recta of rectangles) {

        if (j+sj > N-margin || sj > maxSize || rectanglesIntersect({i: i, j: j, si: si, sj: sj}, recta)) {

          intersects = true;

          break;

        }

      }

    }

    sj--;

  }

  if (si == sj && si > 1) {

    if (random() < 1/2) {

      si--;

    } else {

      sj--;

    }

  }

  let recta = {

    i: i,

    j: j,

    si: si,

    sj: sj

  };

  return recta;

}

​

// creating the graph

​

function createConnections() {

  let l = rectangles.length;

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

    let recta1 = rectangles[i];

    if (!recta1.neighbors) recta1.neighbors = [];

    for (let j = 0; j < l; j++) {

      let recta2 = rectangles[j];

      if (!recta2.neighbors) recta2.neighbors = [];

      if (i != j && rectanglesTouch(recta1, recta2)) {

        recta1.neighbors.push(recta2);

        //recta2.neighbors.push(recta1);

      }

    }

  }

}

​

function rectanglesTouch(recta1, recta2) {

  if (((recta1.i <= recta2.i && recta1.i+recta1.si == recta2.i) || (recta2.i <= recta1.i && recta2.i+recta2.si == recta1.i)) && ((recta1.j <= recta2.j && recta1.j+recta1.sj > recta2.j) || (recta2.j <= recta1.j && recta2.j+recta2.sj > recta1.j)))

    return true;

  if (((recta1.i <= recta2.i && recta1.i+recta1.si > recta2.i) || (recta2.i <= recta1.i && recta2.i+recta2.si > recta1.i)) && ((recta1.j <= recta2.j && recta1.j+recta1.sj == recta2.j) || (recta2.j <= recta1.j && recta2.j+recta2.sj == recta1.j)))

    return true;

  return false;

}

​

// coloring the graph

​

function DSatur(el, elements, shuffleIt) {

  // from https://en.wikipedia.org/wiki/DSatur

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

    // step 1

    let v, vSat = -1, vElementsUsed;

    for (let recta of rectangles) {

      if (!recta[el]) {

        let elementsUsed = elementsUsedByNeighbors(recta, el);

        let sat = elementsUsed.length;

        if (sat > vSat) {

          v = recta;

          vSat = sat;

          vElementsUsed = elementsUsed;

        } else if (sat == vSat) {

          if (largestDegreeInTheSubgraphInducedByTheUncoloredVertices(recta, el) > largestDegreeInTheSubgraphInducedByTheUncoloredVertices(v, el)) {

            v = recta;

            vSat = sat;

            vElementsUsed = elementsUsed;

          }

        }

      }

    }

​

    // step2

    shuffle(elements, shuffleIt);

    for (let element of elements) {

      if (vElementsUsed.indexOf(element) == -1) {

        v[el] = element;

        break;

      }

    }

  }

}

​

function elementsUsedByNeighbors(v, el) {

  let elementsUsed = [];

  for (let neigh of v.neighbors) {

    if (neigh[el]) elementsUsed.push(neigh[el]);

  }

  return [...new Set(elementsUsed)];

}

​

function largestDegreeInTheSubgraphInducedByTheUncoloredVertices(v, el) {

  let largestDegree = -1;

  for (let neigh of v.neighbors) {

    if (!neigh[el]) {

      let sat = elementsUsedByNeighbors(neigh, el);

      if (sat > largestDegree) largestDegree = sat;

    }

  }

  return largestDegree;

}

​

// drawing

​

function drawRectangle(recta) {

  let x = recta.i*u+gap/2, y = recta.j*u+gap/2;

  let w = recta.si*u - gap, h = recta.sj*u - gap;

  if (recta.rainbow) {

    let colors = ["#f589a3", "#ef562f", "#fc8405", "#f9d531", "#abcd5e", "#62b6de"];

    let nCols = colors.length;

    let s = w/nCols;

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

      fill(colors[i]);

      let tl = 0, tr = 0, br = 0, bl = 0;

      if (i == 0) {

        tl = gap;

        bl = gap;

      }

      if (i == nCols-1) {

        tr = gap;

        br = gap;

      }

      rect(x+i*s, y, s, h, tl, tr, br, bl);

    }

  } else {

    fill(recta.col);

    rect(x, y, w, h, gap);

  }

}