Turning Squares

var paper = '#F4F1EA';
var ink = '#2C2E2C';

var columns = intVariable('Columns', 12, 32);
var squeeze = intVariable('Squeeze', 60, 96);

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

var size = getRandomInt(300, 360);
var left = (width - size) / 2, top = (height - size) / 2;
var rows = Math.max(8, Math.round(columns * 0.6));
var rowH = size / rows;

// Columns are even steps in t, but their positions bunch up around the fold:
// the slope of X(t) dips to 1 - k there, so the squares narrow to slivers and
// the flat grid seems to turn away from the eye.
var fold = getRandomArbitary(0.3, 0.7);
var k = squeeze / 100;
function X(t){
  return t - k * Math.sin(2 * Math.PI * (t - fold)) / (2 * Math.PI);
}
function at(t){ return left + (X(t) - X(0)) * size; }

for (var c = 0; c < columns; c++){
  var x0 = at(c / columns), x1 = at((c + 1) / columns);
  for (var r = 0; r < rows; r++){
    if ((r + c) % 2 == 0){
      s.rect(x0, top + r * rowH, x1 - x0, rowH).attr({fill: ink});
    }
  }
}