atoponce/randogram.html

## randogram.html
<!doctype html>
<html lang='en'>
  <head>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
    <title>Randogram</title>
  </head>
  <body>
    <canvas id='randogram' height='400' width='400' style='border:1px solid black;'></canvas>
    <script>
      const canvas = document.getElementById('randogram')
      const ctx = canvas.getContext('2d')

      // https://exploringjs.com/impatient-js/ch_typed-arrays.html#concatenating-typed-arrays
      function concatenate (resultConstructor, ...arrays) {
        let totalLength = 0

        for (const arr of arrays) {
          totalLength += arr.length
        }

        const result = new resultConstructor(totalLength)
        let offset = 0

        for (const arr of arrays) {
          result.set(arr, offset)
          offset += arr.length
        }

        return result
      }

      function randogram () {
        return crypto.getRandomValues(new Uint8Array(40000))
      }

      function genPixels () {
        return concatenate(Uint8Array, randogram(), randogram(), randogram(), randogram())
      }

      function drawRandogram() {
        const imgData = ctx.createImageData(400, 400)
        const pixels = genPixels()

        for (let i = 0; i < imgData.data.length; i += 4) {
          if (pixels[i >> 2] < 128) {
            imgData.data[i] = 255
            imgData.data[i+1] = 255
            imgData.data[i+2] = 255
          }

          imgData.data[i+3] = 255
        }
         ctx.putImageData(imgData, 0, 0)

         window.requestAnimationFrame(drawRandogram)
      }

      drawRandogram()
    </script>
  </body>
</html>
	<!doctype html>
	<html lang='en'>
	<head>
	<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
	<title>Randogram</title>
	</head>
	<body>
	<canvas id='randogram' height='400' width='400' style='border:1px solid black;'></canvas>
	<script>
	const canvas = document.getElementById('randogram')
	const ctx = canvas.getContext('2d')

	// https://exploringjs.com/impatient-js/ch_typed-arrays.html#concatenating-typed-arrays
	function concatenate (resultConstructor, ...arrays) {
	let totalLength = 0

	for (const arr of arrays) {
	totalLength += arr.length
	}

	const result = new resultConstructor(totalLength)
	let offset = 0

	for (const arr of arrays) {
	result.set(arr, offset)
	offset += arr.length
	}

	return result
	}

	function randogram () {
	return crypto.getRandomValues(new Uint8Array(40000))
	}

	function genPixels () {
	return concatenate(Uint8Array, randogram(), randogram(), randogram(), randogram())
	}

	function drawRandogram() {
	const imgData = ctx.createImageData(400, 400)
	const pixels = genPixels()

	for (let i = 0; i < imgData.data.length; i += 4) {
	if (pixels[i >> 2] < 128) {
	imgData.data[i] = 255
	imgData.data[i+1] = 255
	imgData.data[i+2] = 255
	}

	imgData.data[i+3] = 255
	}
	ctx.putImageData(imgData, 0, 0)

	window.requestAnimationFrame(drawRandogram)
	}

	drawRandogram()
	</script>
	</body>
	</html>