Matrix digital rain

Using canvas to recreate the iconic raining code, as seen in the Matrix films.

  • Published:
  • Tags: Software engineering, Visualisation
  • Reading time: less than a minute

You'll need JavaScript enabled to run this 🧑‍💻.


After a little searching, it appeared Katakana characters mixed with some single digit numbers closely matched the characters used in the film.

The Katakana characters start in unicode from U+30a0 for 96 characters.


On my MacBook Pro, the 50 columns of characters render at a steady 60fps. When I tried kicking it up to 100 columns, things got a little jumpy, dropping to about 20fps. I’m wondering if some sort of quad-tree type structure could be used to reduce the number of operations/renders needed.