Sediment

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.

// Horizontal strata, laid down one over another, each boundary sagging
// and rising like a bed of rock. The bands bleed past every edge so the
// canvas wrap always has colour to fold around; the speckled grain is
// kept well inside the margin.
var strata = intVariable('strata', 5, 18);
var upheaval = intVariable('upheaval', 0, 40);
var grain = intVariable('grain', 0, 30);

var colors = ['#2E211B', '#6B4A34', '#A9784E', '#C9A227', '#D9C7A7', '#8C9A6E', '#5B6B57'];
var margin = 40;
var step = 25;

s.rect(0, 0, width, height).attr({fill: colors[0]});

// A boundary is a random walk across the canvas, drawn a little wider
// than the canvas at both ends so no seam shows on the wrapped edge.
function boundary(base) {
  var points = [];
  var y = base + getRandomInt(-upheaval, upheaval);

  for (var x = -20; x <= width + 20; x += step) {
    y += getRandomInt(-upheaval, upheaval) / 3;
    points.push(x, Math.round(y));
  }

  return points;
}

var bandHeight = height / strata;
var previous = [-20, -40, width + 20, -40];

for (var i = 1; i <= strata; i++) {
  var current = i === strata ? [-20, height + 40, width + 20, height + 40]
                             : boundary(bandHeight * i);
  var polygon = previous.slice();

  // walk the lower edge back the other way to close the band
  for (var j = current.length - 2; j >= 0; j -= 2) {
    polygon.push(current[j], current[j + 1]);
  }

  s.polygon(polygon).attr({fill: colors[i % colors.length]});
  previous = current;
}

// A scatter of grit sitting on the face of the print
for (var k = 0; k < grain * 6; k++) {
  s.circle(getRandomInt(margin, width - margin),
           getRandomInt(margin, height - margin),
           getRandomArbitary(0.6, 2.2))
    .attr({fill: '#F2ECE1', fillOpacity: 0.45});
}