The keyboard’s real time to shine isn’t with the design though, it’s the animations when it opens and transitions into existence.
For the individual keys, alpha transitions begin with an ease in followed by a out back ease to overshoot the final brightness, giving them a nice burned-into-the-screen feel as they appear. To remain consistent with the way other components (e.g. terminal, status bars, etc) will animate, they also flicker as they start to appear.
The entire keyboard feels stiff when animated into existence all at once, so I began to experiment with different creation motions. Here’s a series of different creation motions.
In the first, all keys appear together, again feeling stiff. The second moves onto something more dynamic with a flow from left to right that is quite fluid but when put in context and placed in the center of a large screen looks out of place. This led to an animation that starts from the center, and then to a final version which adds a bit of random offset play into the flickering over a purely fluid rendering feel.
When in action the keys will be illuminated and then fade with a slight flicker.
For next time I will continue to prototype the larger elements, which will give context to the other more complex graphs and visual displays. I worry a little about it looking too Tron-like but hopefully as the entire interface comes together with a colorscheme, it will develop its own flavor and style.
(Still working on making a sci-fi movie-esque interface function and live on my desktop.)
The iterations of the layout designs thus far. Still no color, and a lot of ripped graphics (via Oblivion & Tron mostly) but using them to refine sketches.
Around halfway through, I committed to a layout and started prototyping elements in Processing and openFrameworks, but found I overextended myself with the design. A lot of the visual tricks that might make a motion graphic interface pretty (glow/blur, super high data sample rate for graphs) weren’t entirely feasible and without them things looked kind of shitty. I had to take things back with proper idea exploration, but now I’ve settled on another design, one that feels a lot more coordinated.
Point is: prototype cheaply. A smarter, more experienced man might have said the creative process starts with broad ideas and then is a series of refinements. I was not this person. I committed to only a single idea from the start and it was painful when it became a limitation.
Other cool things the past few days:
I started sciencefictioninterfaces.tumblr.com as a repository for some of the interfaces that are particularly inspiring. It’s been pretty successful so far, but I’m learning a well organized Pinterest is a might be a better setup.
gmunk retweeted me and hes one of my heroes so that was actually really cool.
Animations are a large part of what makes the desktop from Tron Legacy board room (gif) stimulating. Things flicker and ease into place in a mesmerizing fashion, instead of just appearing instantly. Having this level of smooth animation is critical in creating a more cinematic desktop, so I’ve spent the better part of the last week looking into this.
To create the animations themselves, I’ve turned to experimenting with OpenGL/openFrameworks/Processing. The larger implementation obstacle however is making these animations appear as a seamless component of the desktop environment, when in reality they are constrained to windows. The idea is to limit the usable screen space to a portion of the screen and have the interface animations occur behind the windows as an animated “wallpaper”. If this is kept visually seamless with the windows in front, the animations will appear to be a part of the desktop environment.
Unfortunately I haven’t found a way to encapsulate an arbitrary program into the root window (what acts as your wallpaper in the X Window System), only how to set the pixel contents like programs such as xsetroot and feh do. So instead I added a mode to my window manger BSPWM that pushes a program window to the back of all other windows, keeps it full screen and ensures it persists across desktops, essentially making it visually be functioning as the root window. This is an awesome first step as now I can implant any custom interface into the desktop and move onto designing and animating the interfaces.
I think the real reason why I installed Linux on my desktop was because I could customize my desktop environment. When I first started, I knew nothing and everything was amazing. I kept learning and honing my setup until it slowly reached a steady state. It worked well, looked nice and that was it.
Then it just… became boring. Every new screenshot I saw was the same: there’s a menu bar and there are windows. Sometimes they float and sometimes they tile. Half the beauty is in the wallpaper and the colorscheme and nothing felt innovative anymore.
On the other side, movies are portraying computers with these gorgeous sci-fi interfaces. Like absolutely incredible: Tron and Oblivion and Guardians of The Galaxy. Why don’t desktops look like that? They should. I want that.
But when you start to look into it, they’re really damn inflexible. They’re unusable and unnecessary: you have multiple views of the same data on screen, precious real estate going to data that is permanently displayed instead of on request. They are expensive: the entire interface is visually continuous because every program must have a custom design, often animated (an immense increase in effort). And finally the setup is fixed. Window managers have an incredible flexibility in letting you contextually adjust your setup. When I develop I might want two windows open. For browsing, maybe just a single web browser fills the screen. The switch is an unnoticeable press of a few hotkeys, not a hours of piecing together a new interface.
So what I’ve seen people do with their setups is constrained by productivity, but what happens when a bit of this productivity is sacrificed is still vastly unexplored. These CGI interfaces are undeniably beautiful and I am making a project of turning them into reality.
I’ll keep the dev log posted with my progress, maybe writing some longer posts too. I also spend a lot of time finding inspiration for this sort of thing so maybe I can get a Tumblr or repository going for what I find.
