FourLeafClover With Erika

var colors = ("2ea64d-287d3e-10a135-178a35-248c3f-10822d").split('-').map((x) => '#' + x);

var clover;

var tileCounter;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  clover = width / 100; //clover size

  tileCounter = 40;

  noStroke();

  generatePattern();

}

​

​

function generatePattern() {

  background(255, 300, 120);

​

  for (var i = 0; i < width; i += clover) {

    for (var j = 0; j < height; j += clover) {

      var color = random(colors);

      var tileType = 400;

      var tileCenter = createVector(i + clover / 2, j + clover / 2);

      drawClover(tileCenter, tileType, color);

      tileCounter++;

    }

  }

}

​

​

function drawClover(tileCenter, tileType, color) {

  push();

  translate(tileCenter.x, tileCenter.y);

//clover

  fill(color);

  for (var i = 0; i < 4; i++) {

    beginShape();

    vertex(-clover / 2, -clover / 2);

    bezierVertex(-clover / 2, clover / 2, clover / 2, -clover / 2, -clover / 2, -clover / 2);

    rotate(int(random(4)) * PI / 2);

    endShape(CLOSE);

  }

​

//cutout

  let fillColor = random() > 0.5 ? "black": 255;

  fill(fillColor);

  var cutoutSize = clover * 10; 

  if (fillColor === ("red"))

    cutoutSize = cutoutSize * 200;

  for (var i = 0; i < 4; i++) {

    beginShape();

    vertex(-cutoutSize / 20, -cutoutSize / 20);

    bezierVertex(-cutoutSize / 20, cutoutSize / 20, cutoutSize / 20, -cutoutSize / 20, -cutoutSize / 20, -cutoutSize / 20);

    rotate(int(random(40)) * PI / 20);

    endShape(CLOSE);

  }

  pop();

}

​

​

function mousePressed() {

  generatePattern();

}