The past week or so has been exhilarating because I have been able to churn out so much interesting code. But now I have material for a dozen blog posts. So there is going to be a battle between the coding fingers and the writing fingers. For the moment, the writing fingers are in charge.
Nico B wants an app that would allow people to 'fly'' over the harbor in Iquique Chile and he wants to do this using the motion controller from Leap Motion. How do you fly in an imaginary way - hundreds of feet over the harbor and down through the buildings - while using just one hand twirling and swirling inches above the Leap Motion device? Neither the Leap Motion sample software nor Three.js examples have anything that does exactly this. So we needed to come with the flying app ourselves. In order to build the app, we need landscape and building to practice with. The actual physical project in Iquique has issues, so we needed to come up with our own imaginary buildings.
The first simulation I came up with was an imaginary landscape:
http://jaanga.github.io/gestification/projects/flying-leap-3d/r1/flying-leap-3d.html
In many ways, this was just fine. But really it was just too good. All you do is float around. It's actually quite difficult to get anywhere specific.
So then Nico found the data for this castle:
http://jaanga.github.io/gestification/projects/flying-leap-3d/castle/load-castle.html
It may take a number of seconds for it to load. There were many issues here. The biggest issue has been getting the flying speed right, when you are in the castle it's too fast and when you are flying around it's too slow. And then the walls only have textures on the outside. When you go inside, the walls are invisible. So you think you are still outside. Therefore you keep on going and then you are outside without having known you were inside. And so on.
So the Nico came up with the Barcelona Pavilion - and he even sourced a Blender 3D file for it. Conceptually the Pavilion is a perfect place to lean to fly. You can start in the landscape, move to the courtyard than try to negotiate the narrow passages. It was a perfect fit.
But the Blender file was missing its textures. I found two other Blender files. Again there were issues.
What to do? Build my own models using Blender or SketchUp or whatever? No way. I don't build stuff using tools I did not have a hand in building myself. So I built a 3D model of the pavilion using Three.js. Every floor, wall, window is a procedure. The project took half a day. It's about 500 lines of code and is about 28K in file size. Simple, tiny and fast. Perfection.
Not really. As you fly through the building you'll see a dozen or so mistakes. That's because I mostly did things by eye and feel. It will take an hour or two to fix these, but I have no fear. Unlike the old-school CAD programs, there won't be broken walls that have to be 'fixed' or dozens of items that need changing because a height has changed.
The pavilion - which I call the Barfolina Pavilion - is viewable here:
http://jaanga.github.io/gestification/projects/flying-leap-3d/barfolina-pavillion/r1/barfolina-pavillion.html
It's all still at a Release 1.0 stage, but it was so much fun thus far that there will be many more releases with things like transparent roofs and people visiting the pavilion and maybe even en exhibit or two.
But working on this project make me think a lot of the buildings of the future. These building, as we all know, will be built and edited and updated continuously by robots. "The grandparents are coming. We need to add a guestroom." "Saturday is Tammy's birthday. Take down all the walls so there's room for the party." The robots will not want static databases of dimensions. The robots will want to know the program.
So in coding this 1929 building, perhaps I was designing for 2129...
Source Code:
https://github.com/jaanga/gestification/tree/gh-pages/projects/flying-leap-3d
No comments:
Post a Comment