Turning VSCode Into an Art Program (sorta)

aadenboy — Sun, 01 Dec 2024 21:09:18 +0000

If you just want to try out the plugin, go to aadenboy.box-art-draw on the VSCode Marketplace. Feedback would be appreciated!

Brief introduction

I'm sure that if you've ever used any form of textual interface, you'll be familiar with Unicode's box drawing characters. Back when we didn't have fancy GUIs and were limited to the text that was on the screen, we made do with the various characters that when put together could be formed into boxes, menus and tables.

Even today, they're still in extensive use, most commonly for command line programs such as btop, tmux, tig and various others. Take a look at btop:

^{By Konung yaropolk - Own work, CC0}

Despite their significance, there doesn't seem to be a reliable way to actually draw with these characters. The only example of this I could find was Mark Lodato's js-boxdrawing repo and its live demo, which is surprising. The demo itself is actually fine as-is for getting quick diagrams and such done, but it still has its fair share of menial quirks.

So, out of spite and boredom, I took it upon myself to recreate Mark Lodato's work. In VSCode. I'm not going to use the web for this, no workflow would ever be happy about that.

Making the Extension

The first goal was just getting the cursor to even draw. Hooking up all the keybinds was simple enough, no issues there. But then came to how it'd draw the lines. A simple solution would be to check both the starting and ending location, then using the current character and a lookup table to find the end result.

A lookup table.

For all 1.7 THOUSAND POSSIBLE COMBINATIONS.

I spent probably three hours wasting my time manually copying and pasting all of that.

With wasted time and life out of the way, the rest of the extension simply slotted into place, allowing me to publish v0.0.1 of the extension on November 10th. The only existing footage of the extension then was the animated title, which itself is sped up.

Afterwards, I was able to then implement painting over lines and fix some minor bug fixes within a day. Hyperfixation is one hell of a motivator.

It was in the middle of implementing v1.0.0 that the motivation had worn off and I procrastinated working on it because I had some issue implementing procedural drawing. There was a sense of dread as well, which wasn't fun. Anywho, I eventually succumbed and finished with that I worked out a better solution to my problem and released v1.0.0.

Quick anecdote: Somewhere whilst adding transformations for v1.0.0, I realized that I could use the extension itself to build the lookup table. That was quite fulfilling!

Okay... What About the Extension Itself?

The extension is mainly hotkey-based, you don't often use your mouse for much. Pressing Ctrl+Alt+Insert toggles between drawing and typing, and your keyboard changes functionality when drawing.

N, B, K and Delete all switch between the different line styles, those being Normal, Bold, Double and Erase respectively. The arrow keys allow you to actually draw lines, and by holding Shift and or Alt, you can draw in-place and or paint over lines.

That's about as much as you would really need, but I also allowed support for multi-cursor editing, and pressing P with Shift, Alt or Ctrl to paint entire lines in one click.

I have more features and gestures planned for the extension, namely more QoL and additional ways to draw shapes.

Your Turn

Download or install at aadenboy.box-art-draw on the VSCode Marketplace. Feedback would be appreciated!

Obviously, I wouldn't be telling you this if it hadn't already been out yet, so this is the part where YOU try it for yourself and give your personal feedback!

The extension has gathered 9 installs and 14 downloads, yet no reviews, something that isn't very helpful. I want to know what people think! Again, if you can, try the extension in VSCode and give your thoughts and suggestions. I love any feedback I can get!

If you feel inclined, the source code is also available on GitHub.

wow! first blogpost! cool! hello dev.to community

DEV Community: aadenboy

Turning VSCode Into an Art Program (sorta)

Brief introduction

Making the Extension

Okay... What About the Extension Itself?

Your Turn