What is it?

Have seen a couple of these around, but thought I would give it a go in canvas.

This is my first go at doing this (I like the idea so may revisit later and try something better), it does pretty much what you would expect but could be better. I wanted to add more code streams and change the characters within each stream as they fall but the JS is already really doing far too many operations as it is, struggle to get a decent framerate on larger screens, but if you view on a narrow-ish screen should be okay.

One of the major problems is you can’t easily draw vertical-direction text on canvas, so each individual character is a single fillText() call, multiply that by each character in each stream, and multiply that by 60FPS, I can see why it struggles…

It doesn’t seem to work in Firefox as well, not sure why. And, interestingly, seems to perform better in Safari than Chrome…

I wanted to add a feature where you could just type and your message would appear in the code as it falls. And also wanted to add a getUserMedia() thingy where using the webcam the outline of your face would be highlighted by the falling code – that would be cool, maybe another time, this demo is struggling as it is!

Anyway, there seems to be a recurring theme to my learning canvas experience – it is 90% performance!.

“Matrix” font is from here and demo uses stats.js to track framerate.