<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>flower1</title>
    <script src="../libraries/p5.min.js" type="text/javascript"></script>
    <style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
    <script>

let a = [0, 1, 2, 3, 4, 5, 6, 7, 8];
let glyphSize = 10;

function setup() {
  createCanvas(windowWidth,windowHeight);
}

function X(p) {
  return glyphSize*(floor(p/3) + 1)
}

function Y(p) {
  return glyphSize*(p%3 + 1)
}

function draw() {
  frameRate(0.3);
  background(240,230,140);
 
  maxHowMany = floor(random(4,6));
  minHowMany = floor(random(2,4));
  sw = floor(random(3,5));
  for (var i = 0; i < width-3*glyphSize; i += 3*glyphSize) {
    for (var j = 0; j < height-3*glyphSize; j += 3*glyphSize) {
      shuffle(a, true);
      strokeWeight(sw);    
      let howMany = floor(random(minHowMany,maxHowMany));
      for (let k = 0; k < howMany; k++) {
        line(i + X(a[k]), j + Y(a[k]), i + X(a[k+1]), j + Y(a[k+1]));
      }
    }
  }
}

</script>
</head>
<body>
</body>
</html>