Matrix noise

by sosegon

HTML

<div id='container'>

</div>

JavaScript

import { SvJs, Gen, Noise } from "https://cdn.jsdelivr.net/npm/[email protected]/+esm"

// Parent SVG.
const svg = new SvJs().addTo(document.getElementById("container"))

svg.create("style").content(`
text{
	font-size: 16px;
	font-family: serif
}`)

// Viewport and viewBox (1:1 aspect ratio).
const svgSize = Math.min(window.innerWidth, window.innerHeight)
svg.set({ width: svgSize, height: svgSize, viewBox: "0 0 1000 1000" })

// Background.
svg.create("rect").set({
  x: 0,
  y: 0,
  width: 1000,
  height: 1000,
  fill: "#181818",
})

// Noise
let noise = new Noise()
let nX = 15,
  nY = 20
let noiseSpeed = 0.5

let noiseGrid = svg.create("g")
let gridSize = 1000
let rows = 40
let increment = gridSize / rows

for (let x = 0; x < gridSize; x += increment) {
  for (let y = 0; y < gridSize; y += increment) {
    let noiseValue = noise.get(nX, nY)
    noiseValue = Gen.map(noiseValue, -1, 1, 0, 100, false)
    let text = noiseGrid.create("text")
    text.content(Gen.chance() ? "1" : "0")
    text.set({
      x,
      y,
      fill: `hsl(120 20% ${noiseValue}%)`,
    })
    nX += noiseSpeed
    nY += noiseSpeed
  }
}

noiseGrid.moveTo(500, 500)