generative pattern example 2

  4/1/2024

*/

function setup() {

  createCanvas(400, 400);

  noStroke();

  var b = createButton("Generate pattern");

  b.mousePressed(pattern);

  pattern();

}

​

function pattern() {

  background(220);

​

  var cols = 48;

  var rows = 24;

​

  // size of each cell

  var w = width / cols;

  var h = height / rows;

​

  for (let x = 0; x <= width; x += w) {

    for (let y = 0; y <= height; y += h) {

      var r, g, b;

      if (y < height / 2) {

        // sky

        let yo = map(y, 0, height / 2, 0, 100);

        r = random(100, 200) - yo;

        g = random(100, 200) - yo;

        b = random(200, 255) - yo;

      } else {

        // ground

        r = random(200);

        g = random(200, 255);

        b = random(200);

      }

      fill(r, g, b);

      var xo = random(-w / 4, w / 4);

      var yo = random(-h / 2, h / 2);

      var wo = random(0, w * 2);

      var ho = random(0, h * 2);

      rect(x + xo, y + yo, w + wo, h + ho);

    }

  }

}

​