ComputerTop was envisioned because I don't like the UI of most text editors; I wanted to figure out why, and what I could do about it. Because I needed something to actually render UI for, I picked a tabletop character editor for its simplicity; pretty much the only problems to solve would be UI problems. Unfortunately, with only a few hours of free time to program this week, I didn't quite accomplish as much as I was hoping, but I did accomplish a neat little dynamic background! It'll be very useful when I get more time to work on this.

Here's a video of the dynamic background. You can also view it on discord.

Since I haven't gotten around to finishing this project yet, here's what the game plan is:

As I've tinkered with themes on many editors, I've come to a conclusion: colors can not fix a UI's look. It doesn't matter if you pick the colors straight off of the best-looking thing you can find, you're never getting Notepad++ to look nice. Something more modern like VS Code looks better, but it's cluttered - and getting rid of the clutter using something like Zen mode makes it look just like Notepad++ again! What gives?

After looking at this problem for a while, I've settled on a hypothesis, which this experiment is meant to validate:

Text editors look bad because they have low variance.

To explain what I mean by variance, let's take a look at a webpage that looks nice; the front page of Handmade Network will do. At the time of writing, there are actually only 3 main colors on the page, as well as a couple accent colors and banner advertising the current jam. Those main colors are just 3 kinds of grey, and I can guarantee you that if you just put those colors into a text editor you'll be disappointed. How does it still look so clean and nice?

I think it's that every color on the screen clearly delineates the points of interest that you should be interested in:

• The middle grey fills in the header at the top, the login button if you're not logged in or your projects if you are, and each individual project (with a separation between each one.
• The lighter grey denotes the area around an image or video with unusual proportions, showing the space the element 'takes up' despite its actual size on the screen.
• The darker grey shows all the places you don't have any reason to look at most of the time.

Unfortunately, a the important parts of a text editor don't have too many things for colors to denote - at least not that it can typically tell. The parts around the text, sure; it explains why VS code looks more modern than Notepad++, despite being more cluttered. But the more room you have for code, the more boring and ugly things start to look - which is a problem when the code is the main purpose of the tool.

The thing is, text conforms to the demands of the code, and while you can color keywords and other parts of the text, there's really not much to put in the background that relates to it. If there was, it would probably align too tightly to the text; no elegant boxes with proper spacing between them here; you would have to write your code specifically to fit into well-spaced background elements. (Actually, that would explain a lot about clean code...)

I want the freedom to write my code in the way that I can write the fastest, which performs as efficiently and with the fewest number of bugs as is possible, so I don't really want to put any effort into how things look while I'm coding. Regardless of what I do, things should still look nice. But what can you do about that when the code is the content you're trying to build a nice clean UI around?

My experiment here focuses on attempting to solve this via Dynamic Backgrounds. Think of a neat screensaver or cool visual effect, something that is visually attractive and interesting, but ultimately not interesting enough to distract you. The inspiration here was actually in RGB keyboards; you can create some neat effects, and it can look quite nice, but if done well the colors actually don't matter even if you have to look at your keyboard to type.

This project isn't quite done yet, but we already have the dynamic background. The next steps of the experiment are pretty simple:

• Put a gaussian blur on the background to make sure the background is visually less important than the text
• Add in the text itself and ensure that it maintains high enough visual contrast from the background
• Add in a way to create borders and other elements that contrast with the blurred background but still reflect the original dynamically.

Sounds easy enough, right? I'll keep working on this project when I have time, and keep you updated when I make progress. Until then, if you have questions or want to show me your own approach to this problem, let me know! I'm looking forward to seeing what I can learn from this experiment.