function hamming(a, b) {

  const leng = a.length

  let dist = 0

  // strings need to be same length

  if (leng != b.length) return -1;

  a = a.toLowerCase()

  b = b.toLowerCase()

  for (let i = 0; i < leng; i++)

    if (a[i] !== b[i]) dist++

  return dist

}

console.log(hamming('zevan', 'kevin'))

console.log(hamming('joe', 'joe'))

console.log(hamming('john', 'jake'))

const uploadInput = document.body.appendChild(

  Object.assign(document.createElement('input'), {

    type: 'file',

    accept: 'image/png, image/jpeg'

  })

)

uploadInput.style.display = 'block'

const canvas = document.body.appendChild(document.createElement('canvas'))

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

canvas.style.width = '70%'

let sampleSize

const steps = 100

const step = (Math.PI * 2) / steps

let interval

const ring = () => {

  clearInterval(interval)

  let x = imageEl.width / 2,

    y = imageEl.height / 2,

    rad = imageEl.width * 0.3,

    theta = 0,

    px,

    py,

    pxs = [],

    spy = []

  ;(pys = []), (im = []), (rects = [])

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

    px = x + rad * Math.cos(theta)

    py = y + (rad / 2) * Math.sin(theta)

    theta += step

    pxs[i] = px

    pys[i] = spy[i] = py

    im[i] = c.getImageData(px, py, sampleSize, sampleSize)

    rects[i] = [px, py, sampleSize, sampleSize]

  }

  interval = setInterval(() => {

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

      pys[i] -= 1

      c.putImageData(im[i], pxs[i], pys[i])

      v = (y - spy[i]) / rad

      c.fillStyle = 'rgba(0,0,0,' + v + ')'

      c.fillRect(pxs[i] - 1, pys[i], sampleSize + 2, sampleSize - 1)

    }

  }, 16)

}

const imageEl = new Image()

imageEl.src = 'https://snippet.zone/wp-content/uploads/2022/01/taho-scaled.jpg'

imageEl.onload = () => {

  canvas.width = imageEl.width

  canvas.height = imageEl.height

  c.drawImage(imageEl, 0, 0)

  sampleSize = imageEl.width / 25

  ring()

}

const reader = new FileReader()

reader.addEventListener('load', () => {

  imageEl.src = reader.result

})

uploadInput.addEventListener('change', e => {

  const file = e.target.files[0]

  if (file != null) {

    reader.readAsDataURL(file)

  }

})

document.body.innerHTML = `

  <p>Click/tap the radio button:</p>

  <input type="radio" style="transform:translate(20px, 30px) scale(4);background:red">

`;

const canvas = document.createElement('canvas');

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

const brush = document.createElement('canvas');

const brushC = brush.getContext('2d');

canvas.width = innerWidth;

canvas.height = innerHeight;

brush.width = innerWidth;

brush.height = innerHeight;

document.body.appendChild(canvas);

c.fillStyle = 'black'

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

let brushSize = 50;

let featherSize = .1;

let featherSteps = Math.floor(brushSize * featherSize) + 1;

let st = brushSize - featherSteps;

let a = 0;

if (st < 1) st = 1;

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

  a = 1 / (st - i)

  c.strokeStyle = `rgba(255, 255, 255, ${a})`;

  console.log(c.strokeStyle)

  c.lineWidth = brushSize - i;

  c.lineJoin = 'round'

  c.lineCap = 'round'

  c.beginPath();

  c.moveTo(50, 50);

  c.lineTo(200, 200);

  c.bezierCurveTo(300, 200, 400, 200, 300, 400);

  c.stroke();

}

vow = 'aeiou'.split``

con = 'bcdfghjklmnpqrstvwxyz'.split``

R = _ => Math.random()

r = a => a[~~(R() * a.length)]

part = _ => r(con) + r(vow) + (

  R() < .5 ? r(vow) : ''

)

wrd = _ => {

  n = ~~(R() * 3) + 1

  s = ''

  for (i = n; i--;) 

    s += part()

  return s + ' '

}

for(k = 30; k--;) 

  document.body.innerHTML += wrd()