Dr. John Kitchin quit a medical career to pursue his passion: skating along the boardwalk of San Diego’s Pacific Beach. He calls himself “Slomo.”
How To Dress Well last night.
Felt Brougham Stealth Black
Par and I’s accommodations in Austin.
3D web browser by James McCrae designed for the Oculus Rift uses customized HTML to help create 3D web spaces. A VR headset isn’t necessary to use it, but the video embedded below is in dual-screen VR mode:
A personal project for learning programming for the Oculus Rift - a 3D VR internet browser which I called FireBox (webpages are represented as boxy rooms - get it?). A spatial walk through the internet, inspired by reading Snow Crash. The analogy here is that webpages are rooms and links connect rooms as doorways. Pictures embedded in the webpages hang on the room’s walls. The environment is dynamically generated, based on order of navigation using a portal-based system. Ideally, the experience would be collaborative and multiple people could navigate the virtual space together.
More recently, pages with special FireBoxRoom HTML tags can show enhanced 3D content (this is still a work in progress, but serves as a proof of concept). I have created some interesting VR interface “widgets” to allow for interactive editing and creation of these “FireBoxRooms”. I have also added some “site translators” which take the content and known structure of existing sites, and generate FireBoxRooms from this data which spatially arrange the content in a meaningful manner.
The software is constantly in development, so more impressive features are to come. Whilst I don’t see this as a complete browser replacement, the creative possibilities here are impressive.
You can find out more (and download the latest versions for Windows and Linux) here
From Godel, Escher, Bach by Douglas Hofstadter.
Programming skeuomorphoism, or I guess just metaphor.
Toggle effect dissection.
This one was fun/ridiculous.
So I knew basically what I wanted for this toggle animation for a long time, but getting it to look this simple took a stack of divs.
In my first pass I put the black sliding box in between the grey background and the text links. I used an angular directive and a css transition to move and adjust the width of the box when a link was clicked, and was 90% there. The problem was the text color. I needed to change the text to white. If I changed it immediately there was a split second of white on grey. Setting a transition on the color helped a little but gave it this kind of weird pop effect. What I really wanted was the text to change immediately to white as the box passed over it. But how to get there…
I’d come across this before and knew there was a stacked div solution to get the effect. The first layer would be a grey box with black text. Then an absolutely positioned div with hidden overflow, 0 width and a black background on-top of that. Inside that div an absolutely positioned div with the same text and width as the first layer (but with white text). Animate the width of the middle div and you get text that changes color as the rectangle passes over it. So basically you are doing convoluted masking with the middle box.
And that would have worked in this case except for when the black box slid across the middle (‘Friends’). For the trick to work you need a constant x position for the expanding layer to work off of. I could not figure out a way to do it where the ‘Friends’ wouldn’t be moving horizontally. I’m probably not explaining the problem very clearly, but I don’t want to spend too much more time writing about what didn’t work.
So on to the solution! Basically I stacked more divs. I figured out on the subway home that I could get the constant x position I needed if I built my masking box twice for the all of the elements. So, in the final version there is a base layer where all the links are black and white. There are then two more versions of the boxes + text, one absolutely positioned and pinned to the left and one pinned to the right. Their width is then adjusted on click to cover the boxes that are not active, leaving only the active base box visible. Since both pinned sides have the same easing transition set they’re synced up so that it looks like the black box is moving (but really we know the grey ones are). Oh and of course I had to put another layer on top of that with the actual clickable elements.
A lot of it was the strange personal reading history coincidences that you can never explain that well (feels like trying to explain why a dream you had was interesting), but Babel-17 was the most imagination-expanding book I’ve read in a while. The language as limiting/enabling your conception of what can exist took me back to a college Foucault/Borges paper, and then that moved into computer languages and ‘strange loops’ and stuff I think about more now. And then the worlds themselves, with prevalent animal-influenced body mods, polyamorous relationships and a general sense that everybody is free to do their own thing.