Kiln

to generate a new and unique variation

Source Code

Every variart piece is open source, you can see exactly how it is drawn from the code.

var margin = 45;
var oranges = ['#E2621B', '#F07818', '#C94A17', '#EF8B2C', '#D95A0F'];

s.rect(0, 0, width, height).attr({fill: '#F2EAE0'});

var grid = intVariable('Grid', 2, 4);
var density = intVariable('Density', 55, 95);
var drift = intVariable('Drift', 10, 55);

var cell = (width - margin * 2) / grid;

function pick() {
  return oranges[getRandomInt(0, oranges.length - 1)];
}

function shift() {
  return getRandomArbitary(-cell * drift / 100, cell * drift / 100);
}

function triangle(cx, cy, r) {
  var up = getRandomInt(0, 1) === 1 ? 1 : -1;
  return s.polygon([
    cx, cy - r * up,
    cx - r, cy + r * up,
    cx + r, cy + r * up
  ]);
}

var cells = [];
for (var row = 0; row < grid; row++) {
  for (var col = 0; col < grid; col++) {
    if (getRandomInt(0, 99) < density) {
      cells.push([col, row]);
    }
  }
}

// never let a variant come out nearly empty
while (cells.length < 3) {
  cells.push([getRandomInt(0, grid - 1), getRandomInt(0, grid - 1)]);
}

for (var i = 0; i < cells.length; i++) {
  var r = cell / 2 * getRandomArbitary(0.8, 1.25);
  var cx = margin + cell * cells[i][0] + cell / 2 + shift();
  var cy = margin + cell * cells[i][1] + cell / 2 + shift();

  var shape = getRandomInt(0, 1) === 1
    ? s.circle(cx, cy, r)
    : triangle(cx, cy, r);

  shape.attr({fill: pick(), fillOpacity: getRandomArbitary(0.7, 0.9)});
}