<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title> 📐📏</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.min.js"></script>
  <script src="https://raw.githubusercontent.com/IDMNYU/p5.js-func/master/lib/p5.func.js"></script>
</head>
<body>
  
</body>
</html>
html, body {
  margin: 0;
  padding: 0;
}
let increment = 0.1
let rows, columns
let basePixels = 10
let frameRateDisplay
let timeOffset = 0.01

function setup () {
  createCanvas(windowWidth, windowHeight)
  background(0, 0, 0)
  rows = floor(height / basePixels)
  columns = floor(width / basePixels)
}
 function draw () {
  let yOffset = 0
  for (let y = 0; y < rows; y++) {
    let xOffset = 0
    for (let x = 0; x < columns; x++) {
      let randomGrey = noise(xOffset, yOffset, timeOffset) * 255
      xOffset += increment
      noStroke()
      fill(randomGrey)

      ellipse(
        x * basePixels,
        y * basePixels,
        basePixels
      )
      
    }
    timeOffset += increment * .001
    yOffset += increment
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.