Matrix digital rain

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

  • Published:

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.