5. More natural UI: How to make a spinning globe
So we can drag the world around to explore it, but when we release our mouse or finger, it's a bit rubbish! We want a better UI.
To get it to carry on spinning after we let go, we need to work out how fast it was spinning when we let go.
The program works by drawing a new 'picture' of the globe very quickly as you move around. I found that the program could tell me the position of the globe as it drew each picture. By remembering the position of the globe when you release your finger, and the position just before that, I can work out the direction and the speed.
These are stored in variables called 'dragOld' and 'dragNew'. These variables are called 'properties' of the globe. Here's some actual code, the green bit works out the speed:
In the code here the 'speed' is calculated by doing a bit of maths. The little * means 'multiplied by', and 'Math.floor' means 'round the number down to the nearest whole number'. That number 200 is what I think makes the movement quite realistic, and for it to carry on spinning for quite a few seconds.
If you look at the CONSOLE (press F12) you can see your speed as a number. This is just like what I do to test a program, but you can use it to see how fast you've gone, and if you can go any faster.
Post a comment if anything odd happens when you spin the globe, then we'll move on to the countries...
To get it to carry on spinning after we let go, we need to work out how fast it was spinning when we let go.
The program works by drawing a new 'picture' of the globe very quickly as you move around. I found that the program could tell me the position of the globe as it drew each picture. By remembering the position of the globe when you release your finger, and the position just before that, I can work out the direction and the speed.
These are stored in variables called 'dragOld' and 'dragNew'. These variables are called 'properties' of the globe. Here's some actual code, the green bit works out the speed:
onDragEnd: function() {
// speed based on difference in longitude between last two frames
var speed = Math.floor(200 * (this.dragNew - this.dragOld));
this.releaseLongitude = this.dragNew;
this.plugins.slow.startSlowing(speed);
}
In the code here the 'speed' is calculated by doing a bit of maths. The little * means 'multiplied by', and 'Math.floor' means 'round the number down to the nearest whole number'. That number 200 is what I think makes the movement quite realistic, and for it to carry on spinning for quite a few seconds.
If you look at the CONSOLE (press F12) you can see your speed as a number. This is just like what I do to test a program, but you can use it to see how fast you've gone, and if you can go any faster.
Post a comment if anything odd happens when you spin the globe, then we'll move on to the countries...
Comments
Post a Comment