Rick's Tech Talk

All Tech Talk, Most of the Time

Falling Text (in JavaScript)

Sometime in May, about two months into my forced "work from home" stint due to the novel coronavirus, I caught a bit of inspiration.

I had been playing Cataclysm: Dark Days Ahead, a roguelike that has captured my eye and attention. Since it is an open-source game, I started to fool around with the code, mostly by downloading it and learning to build it. I had vague notions of making modifications, but I thought it'd be better to learn some roguelike game development techniques. That led me down some tutorials, which somehow led me back to JavaScript. (I spent time trying to find the last connection for how I got here, but it's lost now.)

I found the TwoJS library, and I started experimenting with one of their text demos. I liked how fanciful it was, at under a hundred lines of JavaScript. I took the example apart, and thought about making a simple ticker display, text scrolling horizontally to the left. The code fell into place very quickly, then I thought: why don't I let the letters fall off the table. I hacked through some basic ideas (reminding myself of the physics for a falling object), and produced a result that looked good to me. Check out the GIF below.

I posted the code on GitHub, and this JavaScript is on Glitch. Enjoy!

2020-07-13-205557.gif

Tags: