Quiet Stones

// composition: scattered field of stones drifting toward the lower-left thirds point; one warm stone
// layering: shadow washes under each stone first, stone bodies second, hatched grain last
const PALETTE = [
  "#faf2e5", // paper
  "#9a8c73", // stone
  "#746b58", // stone shadow
  "#484a42", // ink
  "#c06c5a", // the warm one
];

function setup() {
  createCanvas(800, 800, WEBGL);
  angleMode(DEGREES);
  brush.scaleBrushes(2.5);
  noLoop();
}

function stone(x, y, r, body, shadow) {
  brush.noStroke();
  brush.fillBleed(0.4, "out");
  brush.fillTexture(0.55, 0.6);
  brush.fill(shadow, 45);
  brush.circle(x + r * 0.22, y + r * 0.3, r * 1.05, true);
  brush.fillBleed(0.25, "in");
  brush.fill(body, 95);
  brush.circle(x, y, r, true);
}

function draw() {
  translate(-width / 2, -height / 2);
  background("#faf2e5");

  // the field: sizes mix one order of magnitude, positions drift lower-left
  stone(250, 540, 86, "#9a8c73", "#746b58");
  stone(150, 620, 52, "#746b58", "#484a42");
  stone(360, 620, 40, "#9a8c73", "#746b58");
  stone(430, 500, 30, "#746b58", "#484a42");
  stone(200, 430, 24, "#9a8c73", "#746b58");
  stone(330, 410, 16, "#746b58", "#484a42");
  stone(520, 590, 20, "#9a8c73", "#746b58");
  stone(610, 470, 13, "#746b58", "#484a42");
  stone(470, 680, 26, "#9a8c73", "#746b58");
  stone(120, 500, 15, "#9a8c73", "#746b58");

  // the warm one, alone near the upper-right thirds crossing
  stone(556, 260, 34, "#c06c5a", "#746b58");

  // hatched grain over the heaviest stones only
  brush.hatchStyle("HB", "#484a42", 0.4);
  brush.hatch(5, 32, { rand: 0.15 });
  brush.noStroke();
  brush.noFill();
  brush.circle(250, 540, 86, true);
  brush.circle(150, 620, 52, true);
  brush.noHatch();

  // a few drifting specks toward the empty upper left
  brush.pick("2H");
  brush.stroke("#484a42");
  for (let i = 0; i < 26; i++) {
    const x = randomGaussian(240, 130);
    const y = randomGaussian(230, 90);
    brush.strokeWeight(max(0.3, randomGaussian(0.6, 0.2)));
    brush.line(x, y, x + randomGaussian(3, 4), y + randomGaussian(1, 2));
  }
}