Matrix digital rain

昨天fakefish教了我怎么用Canvas实现黑客帝国的数字雨，太酷了。

不懂JavaScript，所以我用CoffeeScript翻译了一下，这样看起来就容易理解多了：

c = document.getElementById('c')
ctx = c.getContext('2d')

# full screen
c.height = window.innerHeight
c.width = window.innerWidth


letters = "ɒdɔbɘʇǫʜiႱʞlmnoqpɿƨƚƚuvwxyzAᙠƆᗡƎᖷᎮHIᐴႱᐴ⅃MИOꟼỌЯƧTUVWXYƸ1234567890アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヰヱヲンッ".split("")

font_size = 10
columns = c.width/font_size

drops = (1 for x in [0..columns])


# drawing the characters
draw = ->
  # black BG for the canvas
  ctx.fillStyle = "rgba(0,0,0,0.05)"
  ctx.fillRect(0,0,c.width,c.height)

  ctx.fillStyle = "green"
  ctx.font = font_size + "px"

  # looping over drops
  for i in  [0..drops.length]
    letter = letters[Math.floor(Math.random() * letters.length)]
    ctx.fillText(letter, i * font_size, drops[i] * font_size)
    if (drops[i] * font_size > c.height and Math.random() > 0.99)
        drops[i] = 0
    drops[i] = drops[i] + 1


setInterval(draw, 1000/24)

翻译的时候调整了一下，文字换成了：

• 数字（数字雨当然要有数字）
• 字母（单纯字母多无聊，反过来）
• 片假名（黑客帝国的数字雨其实是向Ghost in Shell致敬）

速度调成了24，老年人反应慢，30看了头晕。

gist