Dex UI was a journey that brought me to realize a great respect and passion for design, and the past few months have been spent quietly pursuing and refining this interest. I’ve been exploring various 3D programs and renderers, learning my way around and finding my place and style. It’s been rough; it’s a completely different world to jump into, but there’s just so much potential that I can’t help but be drawn towards it. But even a few months later, I’m still trying to reach a point where I’m exercising creativity in addition to just developing technique.
I also invested some time in improving the website, as I had grown out of the previous version. The dev log, though originally an experiment, turned out to be hugely motivating and so I made it the main emphasis of the site.
In the meantime, one of my experiments with texture turned up creating procedural pointillism (above: Indiana).
Yesterday was the release of Dex UI. It’s done way better than I ever thought, and since it’s garnered so much interested, I’ve been working on putting the source code on github. More on it later!
As I finish up the animations, I thought I’d go over the rest of the elements briefly.
The time display is self explanatory. Below it is the waves visualization which is a mesh that is displaced with a texture generated from 2d perlin noise. While I never ended up hooking up the visualizations to actual system stats, the idea was to take a measure of system activity (e.g. cpu activity) and make the waves flatter or larger with less or more activity.
Beneath is the cpu graphs, these are using the same b-spline technique as the radar, but limited to 2d and moving along horizontally. Below that is, again, a 2d perlin noise texture, but this time just displayed as dots rather than used to displace a plane.
On the right, other than the previously described radar there is the network display, which is just connected bezier curves (not via the b-spline technique this time, since I didn’t want the tips to be smooth).
The only element that really had to be hooked up was the keyboard, which needs to respond to any keyboard input even if it is to another program (like the terminal running above the UI). To do this I followed this method to read keyboard input via /dev/input. This let me see every key press, release and repeat, but only because I was basically keylogging myself.
Alright I didn’t upload the radar animation, but I’ve finished the entire right panel and keyboard making the UI completely statically done. All that’s left is the intro animations and hooking it up to some real system data!
Here’s it running in Linux like a desktop, thankfully no real issues as I’ve been developing entirely in OS X so far.
For the radar visualization (top of the right panel) wanted to achieve the look of this graphic by Anton Repponen, sort of like a warped circular radar, bent at certain points. Previously, I’ve used sequences of bezier curves to create a b-spline (continuous at the second derivative, as described here), and animating it by only controlling the points along the control polygon/a-frame. For example, the four graphs on the left panel use this technique.
For the radar, we just added the third dimension. The control points were constrained to a sphere, so while the spline still retains somewhat of a circular shape, it still appears warped:
The spline was then just repeated, slightly smaller each time for the concentric rings look. Making the curves anything more than hairline thin was the main challenge behind this animation. From what I’ve found OpenGL 3 refuses to allow anything above 1.0 for glLineWidth, and the conventional solution is to make each line a quad. For a bezier curve, this meant subdividing it into sequences of lines and then making each line a quad with a geometry shader like so. This worked well in 2D, moving it to 3D has some problem with which way the quad is facing, but for my case it was subtle enough to ignore.
After that I made the spline fade away like a radar giving the final look:
Tomorrow I’ll upload the animation, and hopefully make some progress on the remaining components.