const canvas = document.createElement('canvas')

canvas.width = innerWidth * .5

canvas.height = innerHeight * .5

canvas.style.transformOrigin = '0 0'

canvas.style.transform = 'scale(2, 2)'

canvas.style.imageRendering = 'pixelated'

document.body.append(canvas)

const c = canvas.getContext('2d')

// letters defined in base36

const alphabet = ['', '67erkgi', 'e3j6dss', '75rue4u', 'c5ltok8', '75s2tji',

  '75s2tjk', '75rugj2', '95yfnf6', '21blls4', '10nt5xo', '973it1u',

  '85aef4u', '59lu6nl', 'cnz0hbn', '67ej51o', '67eq49c', '67ej53e',

  '67eq7gy', '66978m4', '6ywdqpw', '95y780c', '53b00as', '8nmdpyi',

  '5374thm', '53avnus', '6xsfdam'

]

function drawBase36(num, xp, yp) {

  num = alphabet[num]

  let binaryString = parseInt(num, 36).toString(2).padStart(35, '0');

  for (let i = 0; i < 35; i++) {

    if (binaryString.charAt(i) === '1') {

      const x = (i % 5) + xp;

      const y = Math.floor(i / 5) + yp;

      c.fillRect(x, y, 1, 1); 

    }

  }

}

function letter(char, col, x, y, scale = 1, rotation = 0) {

  c.fillStyle = col

  c.translate(x, y)

  c.scale(scale, scale)

  c.rotate(rotation)

  drawBase36(char, 0, 0);

  c.setTransform(1, 0, 0, 1, 0, 0)

}

let NUM = 100

let ps = []

for (let i = 0; i < NUM; i++) {

  let hr = 180 + Math.random() * 50 - 25;

  let ss = 100

  let bb = 50

  if (Math.random() < .5) {

    hr = 30 + Math.random() * 50 - 25;

    ss = 100

    bb = 40

  }

  const col = `hsl(${hr}, ${ss}%, ${bb}%)`;

  const p = [

    1 + ~~(Math.random() * alphabet.length),

    col,

    Math.random() * canvas.height, 

    Math.random() * (canvas.width + 200),

    1 + Math.random() * Math.random() * 10, Math.random() * 7

  ]

  p.props = { 

    vx: Math.random() * 1 - .5,

    r: .01 * Math.random() - 0.005

  }

  letter(...p)

  ps.push(p)

}

function draw() {

  c.fillStyle = 'rgba(91, 34, 0, .05)'

  c.fillRect(0, 0, canvas.width, canvas.height)

  for (let i = 0; i < NUM; i++) {

    const p = ps[i]

    p[2] += p.props.vx;

    p[5] += p.props.r

    letter(...p)

  } 

  c.fillStyle = 'rgba(0, 255, 255, 1)'

  c.scale(1, 1)

  for (let i = 0; i < alphabet.length; i++) {

    drawBase36(i, i * 10, 10);

  }

  c.setTransform(1, 0, 0, 1, 0, 0)

  requestAnimationFrame(draw)

}

draw()