Generative art with procedural composition

A field of gras generated via a computer program

The image above has been composed out of the following sprite sheet and computer program:

A sprite sheet for
grass

From the Liberated Pixel Cup Art Assets by OpenGameArt licensed under the CC BY-SA 3.0

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <script type="module">
      const image = await loadImage("grass.png")
      const canvas = document.createElement("canvas")
      canvas.width = 10 * 32
      canvas.height = 10 * 32
      document.body.appendChild(canvas)
      const context = canvas.getContext("2d")
      for (let x = 0; x < 10; x++) {
        for (let y = 0; y < 10; y++) {
          let row
          let column
          if (Math.random() < 0.3) {
            let randomValue = Math.random()
            if (randomValue < 0.3) {
              row = 5
              column = 1
            } else if (randomValue < 0.4) {
              row = 5
              column = 0
            } else {
              row = 5
              column = 2
            }
          } else {
            row = 3
            column = 1
          }
          context.drawImage(
            image,
            column * 32,
            row * 32,
            32,
            32,
            x * 32,
            y * 32,
            32,
            32,
          )
        }
      }

      function loadImage(url) {
        return new Promise((resolve, onError) => {
          const image = new Image()
          image.src = url
          image.onload = function () {
            resolve(image)
          }
          image.onerror = function (error) {
            onError(error)
          }
        })
      }
    </script>
  </body>
</html>