ASCII animation for the web

const RAMP = ' .:-=+*#%@'
const cells = document.createElement('canvas')
const g = cells.getContext('2d', { willReadFrequently: true })

// source: an <img>, a playing <video> or a <canvas>
function toAscii(source, cols = 96) {
  const sw = source.videoWidth || source.naturalWidth || source.width
  const sh = source.videoHeight || source.naturalHeight || source.height
  const rows = Math.max(1, Math.round((cols * sh) / sw / 2)) // cells are about twice as tall as wide
  cells.width = cols
  cells.height = rows
  g.drawImage(source, 0, 0, cols, rows)
  const d = g.getImageData(0, 0, cols, rows).data
  let out = ''
  for (let y = 0; y < rows; y++) {
    for (let x = 0; x < cols; x++) {
      const i = (y * cols + x) * 4
      const light = (0.2126 * d[i] + 0.7152 * d[i + 1] + 0.0722 * d[i + 2]) / 255
      out += RAMP[Math.min(RAMP.length - 1, Math.floor(light * RAMP.length))]
    }
    out += '\n'
  }
  return out
}

// Live: const pre = document.querySelector('pre'), video = document.querySelector('video')
// ;(function tick() { pre.textContent = toAscii(video); requestAnimationFrame(tick) })()