Rotate the world
jasondavies.comThis is just my personal preference, but I believe the naive implementation is miles ahead of the improved ones.
The improved version needs at least two movements to go to the other side of the world, doesn't follow the rotation if the cursor is too fast and worse than all, performs a gamma rotation for each non-equatorial point of the sphere.
Since we have two degrees of freedom on the screen, I expect to use them to drive the two most used rotations, and maybe have another control for the roll. In addition, we are used to have maps with North pointing up (and sometimes pointing South), so the roll is almost never used.
Another nice attribute the naive implementation has is path independence. If I grab part of the globe and release it somewhere else I expect those two coordinates to determine the transform. With the non-naive implementation I can get completely different results depending on how I wiggle my mouse on the way. It's true that this gives me more flexibility, but I don't know... it just doesn't feel right to me. Google Earth does it that way too, and it has always bothered me. If I move more than a few degrees on the map I find myself either wildly gyrating my mouse to try to get back into a recognizable north-up orientation or simply clicking the compass rose to have it set things right automatically.
Thanks for the feedback!
I agree it’s not the most intuitive approach for all situations, particularly when you’re used to a North-South orientation for maps. The rolling is perhaps made more obvious with my use of a graticule. For this reason, I’d be interested in optionally restricting to two degrees of freedom when dragging on the globe, and the third angle could be modified when dragging outside the globe only. So the point being dragged on the globe could still remain under the cursor where possible using this approach.
Interestingly, Google Earth uses the same approach as I do, though perhaps it seems less obvious without a graticule.
I don't like Google Earth's approach too much either, I always have to correct back the roll..
I can understand it when you reach the zoom level of a city, at that point you correlate the data on the map with actual visual memories at the street level, where Up does not correspond to North anymore, but instead is related to Forward. Maybe an exponential transition between the two systems as you zoom in?
Interestingly, on a phone it is also trickier because there is not "grab" equivalent and the y axis also makes the page scroll.
Sorry, I don't want to sound overly critic :)
I'd like to disagree. I prefer the improved version.
One of the great joys of manipulating a globe like this is being able to rotate it into completely novel views: not just upside down but at totally arbitrary angles.
The improved version makes this very simple.
If you only want to view the world in a conventional (or upside down) way then I agree that the naive version is very easy to use,
I haven't tried this on a computer yet, just on the iPhone. So I can't address the above comments. But using touch, I think you have created the most intuitive 3-angle rotation I've used yet. The responsiveness is great, and the path follows my finger as I would expect it to (from a purely physical, action-reaction point of view). The mechanics of roll using a mouse are non-obvious to most people, and to have that interface issue addressed by this touch solution is an accomplishment. Maybe that's the real story here?
Struggled with that too. Decided to lock rotation to λ,φ only and rotate with alt key, since it's pretty uncommon.
I should consider revisiting my project from earlier this year and implementing the described approach with versors from your example to simulate plate movement.
http://mxfh.github.io/d3canvasglobes/
(right now the mouse mapping behaves quite odd with rotated views)
What might be cool is allowing the globe's roll to be locked but instead of being rigid, allow the user to affect the roll yet bounce back once they release.
The problem is, trackball-style movement is super useful when you get used to it. But is simply awfully unintuitive, and I'd probably never use it somewhere that not something like a professional tool.
Agreed. You could slightly improve the naive implementation by restricting the north-south rotation so you can't go beyond either pole, so north always stays up. It's not just for the Earth either, I'm now working on a 3D object editor and decided on the naive implementation there as well, because when you're sculpting a chair, it's annoying if up doesn't stay up.
Please do, when I used some 3D editors with that behaviour I was going crazy.. Then I had to remember to restrict the rotation using a modifier or a button.
I don't know where I've seen this, but I think dragging an arc drawn outside the object to adjust the roll is the best solution to the problem.
I agree with you.
I sometimes accidentally rotate Google Maps on my phone when zooming, and it annoys the hell out of me. I'm sure there might be a use case for orienting the map so north isn't up (for example, if you want to look at a route to a place with the place at the top of the map), but I haven't needed it yet. It's much more likely that if I'm using two fingers to gesture on a map, it's because I want to just zoom in and out, not rotate it.
As for Google Maps on mobile, some people like to have the map oriented so that "up" is the direction they are facing (i.e. their current direction of travel.) Annoys the hell out of me, too.
On Google Maps, try the single-finger double-tap-and-scroll for zoom without panning and rotation. Kinda nifty.
There are two competing methods of navigation in blender that have to do with this point.
Turntable and Trackball.
fairly intuitive names for the concept, turntable keeps one axis fixed, and lets you rotate on the other two, and trackball behaves, well, like a track ball. Much like this demo.
The turntable is much simpler, but the trackball is much more capable (if a little tricky to use).
If you use it for a bit of time however, you'll find that despite only have two degrees of freedom, you're capable somewhat indirectly controlling the roll of your camera by click and dragging in a circle.
Test it on the globe! Grab a point and move your mouse in a circle, the larger the circle the faster the roll. It's actually pretty intuitive when you get used to it.
Which is why the debate between Turntable and Trackball exists. They both have merit.
I always liked grabbing the white space around the object to just roll. Seems like a nice compromise although probably not too obvious.
Slightly off topic, but I was so surprised how steep the Axial tilt is (http://en.wikipedia.org/wiki/Axial_tilt) I had always known that it was 23º but never actually visualized it.
Try putting γ=23º in the Euler angles and rotate the earth with λ.
Firefox you're breaking my heart. This performs terribly in FF, fine in Chrome.
It could be that his logic optimizes for chrome. I'm sure with a bit more time, he could make it work smoothly in FF... Or fuck it, just write it in ASM, which would be insanely faster.
The issue isn't any sort of optimization for chrome, FF just chokes when it tries to render SVGs quickly. See also: http://roadtolarissa.com/twisters/
I doubt the issue is the JS logic. Firefox on Mac has nothing like the lag people are talking about on Linux/Windows, which suggests the issue is somewhere in platform-specific drawing code. Hard to say for sure without a profile.
As an experiment, I'm testing FF for a week, and a friend is testing chrome, this definitely goes in the against list.
Up until a couple of weeks ago I was a loyal Chrome advocate. However after the Mozilla team's recent AMA on reddit I decided to switch and since then I really haven't found Firefox inferior at all (aside from a couple of examples like this). So for anyone else looking to make the switch, go for it! The only thing I'm missing about Chrome are the excellent dev tools.
I've been quite satisfied, most of the things, it's just a matter of adaptation to a new way of doing stuff.
My only big issue is that I'm having some performance issues, and that is something I can't live with.
If you are using Windows you might want to give Pale Moon a try, on my system it is much smoother than the official Firefox/Aurora/Nightly.
Pale Moon feels as smooth as the official Firefox does under OS X, for whatever reason the official Firefox for Windows feels terrible on my system (clean profile of course).
Just out of interest, where have you found these performance issues?
The only thing I've noticed was that it really struggled to scroll down large pages whilst playing a video in another window/tab. Although that quickly fixed itself when I updated my graphics card drivers (completely forgot to do so after installing Ubuntu).
Sometimes just opening a new tab.
Facebook seems to lag my whole pc, that might be facebook's fault, but it doesn't happen in chrome.
I browse reddit quite a lot, images just seem to render slower (and the render all distorted until finished).
Youtube videos seem to go out of focus constantly.
Cold start is quite slow, though not unacceptable times, definitely slower.
When I load a big page, it seems to take much longer before I can start scrolling.
None of this are actually tested, so some may be perception, but in general terms, it actually feels quite slower, not bad, but not snappy.
I've just reduced the resampling slightly, using precision(.5) instead of precision(.1), not sure if that helps much.
Same here. Using FF 25 and Chrome 30 on, um, WinXP.
Just for kicks I tried it out on chrome on my Nexus 4. It renders great, but the movements are jerky. There are some conflicts between zoom on the page and zoom on the globe.
I'm impressed it worked at all on mobile.
Isn't this also called "Arcball rotation"? The biggest advantage over the naïve implementation is no un-intuitive "sideways" rotation after a few sequences of rotation.
The important thing in this demo is that his code reduces to arcball-like rotation in the globe projection, but works on arbitrary map projections. Notice how the interaction works for Eisenlohr's projection in the same way as the globe, but the behavior must be different, of course, since the projections are so unlike each other.
I've heard "trackball rotation" but yep, you're spot on.
To give an example, rotate both the unimproved and improved globes so you're facing Antarctica dead on. Then try dragging left and right. The improved is far more intuitive to me at this point.
trackball is what I've been using. Trackball vs turntable is a bit of a religious battle in certain 3d modelling circles.
This is like 100 times faster in Chromium than in Firefox (on Linux). Any idea why? Is JS in FF really that much slower?
As an experiment I used this D3 geo stuff to visualize my last year or so across the globe:
http://dalyons.github.io/where-is-dave/index.html?use_cached...
Works much better on chrome than FF unfortunately.
I thought it turned out pretty cool, as a practical example of what you can use this stuff for. It was super fun to build, D3 is pretty awesome.
You can also load your own photos from FB if you want to see your own track, its just static html/js, i dont store anything anywhere.
Cool. This is pretty much exactly what I've been thinking of doing. The path, pictures and map - more or less spot on.
Another way of doing this (without versors):
Let u and v be the unit vectors of the initial and final click location. We want an R s.t. Ru = v. Create an orthonormal basis ON(u) and ON(v) (you can use the QR decomposition for the vector concatenated with I).
R = ON(v) ON(u)^-1 = ON(v) ON(u)^T
I've been writing accelerometer coordinate system rotation code for the whole day. Almost melted my brain; trying to imagine 3D rotation is hard, especially when you lack the proper tools and have very little experience with it. Finally got the thing working; decided to have one last look at HN before going to bed. It was then when I saw "Rotate the world" and thought to myself: "well this better not be about Euler angles!"
Yup. Thanks pjan, you made my day brighter :)
India is distorted - Kashmir and all. You better be careful about the borders that are under dispute. I took into consideration that it's a low-res border, even then it's way off.
I dont know if the details of map itself are important or not, because I understand it's an exhibition of the interface itself. Just my opinion.
Anyone else tried this on Linux? On Mint 15 and Ubuntu 13.04 FF25 is has >1 second lag. Chrome 30 is fine.
I think it's firefox not linux.
Firefox on Mac is fine (well, more or less; I just filed https://bugzilla.mozilla.org/show_bug.cgi?id=936472 on the slight lag I see there), which suggests the actual issue is cairo's path drawing code, which is not used by Firefox on Mac, but is used on Windows and Linux.
Definitely laggier on FF on Mac than Chrome.
Right, but not 1s+ lag like people are seeing on Windows/Linux.
Same on Mint15 with FF25. It's awesome on Chrome, though!
It's pretty laggy on Windows 7 FF24 too.
And FF 25 as well.
Same thing on Arch linux.
Very nice. Makes me think of http://aladin.u-strasbg.fr/AladinLite/app/?survey=P/Mellinge...
Please Please Please include "show the shortest path between points A and B".
Unless I missed it, where does one get the continent shapes and country outlines?
The files used are from Mike Bostock’s World Atlas TopoJSON project: https://github.com/mbostock/world-atlas
They are in turn derived from Natural Earth data: http://www.naturalearthdata.com/downloads/110m-cultural-vect...
View source. ;)
It's jasondavies.com/maps/world-110m.json which is from http://www.naturalearthdata.com/downloads/110m-physical-vect...
I think https://github.com/mbostock/topojson is what you're looking for
One of the Wikipedia world map SVG's could be used:
I have a couple of questions, and I'm unfamiliar with the Javascript frameworks so I struggle a bit to find the answers in the source:
Are the globes drawn with perspective?
And can it suffer from gimbal lock?
Since it's based around quaternions it shouldn't suffer from gimbal lock.
As for perspective, what do you mean by that? Aren't globes always in perspective?
You can draw orthogonally too. I've messed around with globes and had problems spinning them, hence my curiosity.
http://www.ludumdare.com/compo/minild-40/?action=preview&uid...
The globes are projected orthographically. There is no perspective.
Cheat! What I thought :(
Wow, that's _exactly_ what I needed yesterday. Thanks a lot.
.. however, some more explanation for how the improved rotation works would have been useful.
Are the scale of continents right? Because Australia looks almost bigger than Europe, and Africa looks many times bigger than Europe.
The true size of Africa: http://flowingdata.com/2010/10/18/true-size-of-africa/
The historian Marshall Hodgson referred to the Mercator projection as the "Jim Crow projection." This is why.
I found my mistake. When looking at Europe for some reason I mentally subtracted first the Scandinavia and then Russia, that's why it seemed so tiny. Looking at wiki I can see Africa is only 3 times larger than Europe, which is what I would have expected.
Try rotating this :) http://mxfh.github.io/d3canvasglobes/#GRL
Africa is much larger than you expect if you grew up looking at Mercator projections: http://brucemctague.com/tag/illusion-of-mercator-projections
Brilliant stuff! Would've been better if it had the names of the places. Kinda like a virtual globe. ;)
Rotating maxed out my cpu in both chrome and firefox but only chrome didn't stutter.
Great work! This is a really nice use of d3 and a great visualization tool.
It's more useful when you keep the north at north.
Man oh man, do I hate Euler angles...