TrippySquare.coffee

width = 200
height = 200
area = width * height

container = document.getElementById 'container'

canvas = document.createElement 'canvas'
canvas.width = width
canvas.height = height
canvas.style.display  = 'block'
canvas.style.margin = '200px auto 0'

container.appendChild(canvas)

ctx = canvas.getContext '2d'

imageData = ctx.createImageData(width, height)

setPixel = (imageData, x, y, r, g, b, a) ->
  index = (x + y * imageData.width) * 4
  imageData.data[index+0] = r
  imageData.data[index+1] = g
  imageData.data[index+2] = b
  imageData.data[index+3] = a

generatePixel = (imageWidth, imageHeight) -> 
  pixel = 
    x : Math.random() * imageWidth | 0
    y : Math.random() * imageHeight | 0
    r : Math.random() * 256 | 0
    g : Math.random() * 256 | 0
    b : Math.random() * 256 | 0

  return pixel

draw = ->
  for i in [0...area] by 1
    p = generatePixel(width, height)
    setPixel(imageData, p.x, p.y, p.r, p.g, p.b, 255)

  ctx.putImageData(imageData, 0, 0)

do draw


canvas.addEventListener('mousemove', draw)