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.
Here’s a quick look at today’s work on the right side design. The right side has a bit of repetition right now, but once the elements are coded an in motion it should alleviate this feeling. Also the graphs will look less dorky than what I could do with the pencil tool.
Well you know, finals and holidays, one day becomes the next and then its over a month since the last dev log. Luckily though I have been working (some).
Throughout the project, the theme is heavy upfront prototyping, sketching out designs, then testing them in Processsing (to see how they look when coded), and then (someday) moving to OpenFrameworks for performance and some other technical reasons.
Iteration 12
Last I demo’d these designs, we were on iteration 12. There were three problems I had with iteration 12.
First off, I just didn’t like the headers. They drew the eye away from the core of the design, and they were pretty ornate compared to the rest of the design, which was overly bare.
Problem number 2: translation from Sketch to Processing was far from 1-1. I would be using placeholder graphics which, while they captured the gist of what I wanted, the coded product was far from the design sketch. Often times it would feel too sparse, even when my designs where already pretty bare to begin with.
And finally, there was a real lack of visual consistency that became apparent from the previous two problems. Whatever variation on the header I came up with failed to fit into the style of the graphs I was creating in code. There was no sense of where borders belonged and how they should look and affect surrounding elements. This issue also opened me up too much to inspiration; I would try to incorporate any graphic or style I liked into my own interface, without a guideline for what belonged and what didn’t. Even the grid began to deteriorate and it was time to start again.
Iteration 16
In iteration 16, you can see a variation in the header I pursued. It didn’t work out, but it also started to incorporate graphics I could be confident would reproduce reasonably in code. Those graphs were hideous though, and more importantly, the lack of consistency is even more apparent here. Some text (under the time) are inset with ticks, while the header has neither ticks nor text indentation. The double header border is also unique and doesn’t really fit with the rest of the design.
Iteration 21
Here’s when things started to click. After seeing the Ghost in the Shell Homage, I tried to draw heavily from the titles: the color fit my design well and I used it, more abstractly, to give me a sense of what belonged in my design. I settled on using ticks and indentations as subtle ornamentation and got a better sense of the weight of objects and what kinds of graphics I could use. All the graphics I created myself rather than rip images to make the translation to code easier. And now, even the headers fit!
There’s still more I want to do, especially on the color front, and the right side of the terminal has yet to be designed, but I’ve begun work in OpenFrameworks. The layout has settled again, and now some of the design work becomes how it looks in motion. Also this project has been dragging on a bit longer than I’d like, so it’s time to start putting the pressure to complete it.
I’m still putting together animations and images, so I don’t have much to show until next time, but I’m still at it. Today’s about the refactoring has been happening this past week.
If I didn’t need my programs to respond to input, I would be working in Cinema4d and/or After Effects like most professionals use to build their interfaces. So when I began prototyping, I tried to build a similar setup in my environment with proven animation tools like keyframes and timelines, using tools like ofxTimeline, an openFrameworks plugin for that sort of thing. It’s some sweet stuff, but what I could slap together just wasn’t for me. It wasn’t as smooth as the professional programs and the animations I produced with it were always slightly off: the timing was wrong, coordinating multiple objects was awkward, and it just looked sloppy. Example from before, used ofxTimeline.
Since then, I’ve been keeping things simple and figuring stuff out as I go, and I’ve had success relying heavily on a frame counter and scheduling animations with it, using easing equations (some standard, some custom) and a simple function for flickering. It’s a bit tedious when iterating as I’m still defining my parameters compile time, but animations come out much slicker, making it worth the cost.
However, I’ve been copying these functions and tools from file to file and, along with the inconsistent function interfaces, performance issues and other cruft, this week it just finally caught up to me. Prevailing prototyping advice may say not to care about code quality, but the unneeded complexity was inhibiting my ability to prototype. I’ve had to take a step back with my progress and standardize my tools and, making them into little libraries.
Other fun:
Lorcan O’Shanahan, producer of some of the finest interfaces, found me through sciencefictioninterfaces.tumblr.com and I briefly got to talk to him over Twitter!
