Sediment
to generate a new and unique variation
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});
}
Copyright © 2014–2026 Kevin Marsh. All rights reserved. Questions? Comments? hello@variart.io