Vim Motion Graphics

So I’m a fan of this program called “Vim”. Vim if a text editor that, among other things, lets you move your cursor around the screen really really quickly.

I wondered what it would feel like if my Vim cursor left a trail — like a pebble skipping along the surface of a water. So I decided to build a (very limited) prototype. Here’s a screen cap of that prototype:

If you want to try the prototype out yourself, you can do so here. Warning — it does seem to chop a bit in Firefox, so I suggest trying it in Chrome:

Why prototype this?

My initial impulse was simply that I felt the desire to create something pretty. I like the feeling of flying around quickly with Vim, and I wanted something that helped me express that feeling.

Once I built this and felt how my fingertips fired impulses around in a Vim buffer, I got inspired. I couldn’t help but wonder if there was potential for more than just an aesthetic value. If this simple effect existed in a proper version of Vim, could it also serve a functional value?

In a limited way I think the answer is yes. This would be useful anytime I lose my cursor. Maybe it’s because my Vim Motion was bigger than expected. Maybe it’s because I’m disoriented after my buffer scrolled elsewhere. Maybe it’s because I hit a typo. For whatever reason, I think a simple ripple would help me get my bearings.

But I also wonder if these ripples could hold semantic value. Perhaps ripples could reflect off the edges of the file. If your buffer were at the end of the file, you’d get a ripple reflection off the bottom edge of the screen. If instead you were mid-file, the ripples would exit off the bottom of the screen signifying more space down there. This could also help signal if you are in a soft-wrap or no-wrap condition.

My mind also wanders to other types of effects that I’d love to at least try out. Maybe I only crave this because sometimes Vim is so fast that I wish I had some transition to help me better understand what I just did. Anyhow, here are some other thoughts:

  • When you delete large chunks (typing “da]” to delete an entire bracket pair), see a ripple visualization that outlines the extents of what was just deleted

  • Command line mode (hitting “:”) will ripple from down below

  • Different ripple colors for different modes (normal, insert, visual)

  • Visual mode to cast large ripples as per the geometry of the entire selection

  • Tiny ripples to indicate inertia of last motion. For example: “i” for insert would cast a mini ripple backwards, but “a” for append would cast a tiny ripple forward.

Is this even possible in a real Vim environment?

I have no idea! All I know is that it’s not possible for me to complete in any reasonable amount of time. This is why I decided to blog about it — to note how far I got before completely abandoning the concept.

That said, the premise I think is at least a theoretical possibility. The prototype design treats the Vim buffer as a 2d graphical array, with each “pixel” being the width and height of a single character. In principle, a grotesquely hacked Vimscript should be able to power this with a sufficiently powerful computer. How grotesquely hacked, and how powerful the computer needs to be, I have absolutely no clue.

Another possibility is building something for Atom, which is built upon common web technologies. In some ways CSS sounds like a smarter way to approach this problem. Again, no clue what the level of effort would be here either.

The last idea I had would be to run a transparent Vim window on top of another window that somehow knows cursor location and can render graphics using a different, more sane graphics library.