Cross Reference

// A colour matrix: each cell pairs its column's colour with its row's,
// so the diagonal resolves into solid squares.

var count = intVariable('count', 4, 10);
var gap = intVariable('gap', 10, 45);

var spectrum = ['#e0068a', '#cc0a0a', '#ee7f00', '#ffd100', '#b5c700',
                '#009a3a', '#00a3c4', '#0060ac', '#2e1f84', '#83087f'];
var ground = '#1c1b21';

var margin = 75;
var pitch = (width - margin * 2) / count;
var cell = pitch * (1 - gap / 100);
var inset = (pitch - cell) / 2;

var start = getRandomInt(0, spectrum.length - 1);
var step = getRandomInt(0, 1) ? 1 : spectrum.length - 1;
var vertical = getRandomInt(0, 1);

function colour(i) {
  return spectrum[(start + i * step) % spectrum.length];
}

s.rect(0, 0, width, height).attr({fill: ground});

for (var r = 0; r < count; r++) {
  for (var c = 0; c < count; c++) {
    var x = margin + c * pitch + inset;
    var y = margin + r * pitch + inset;
    s.rect(x, y, cell, cell).attr({fill: colour(r)});
    if (vertical) {
      s.rect(x, y, cell / 2, cell).attr({fill: colour(c)});
    } else {
      s.rect(x, y, cell, cell / 2).attr({fill: colour(c)});
    }
  }
}