Posts

8. Not all countries are created equal

Image
Big problem. The country might appear on the side, or even on the wrong side. This is Sweden, and you can hardly see it. There's also another big problem. Some parts of the world have loads of countries, like here, there's about 100: And some parts of the world have very few, like the Pacific Ocean: If I just let the globe spin and stop wherever it wants, half the time it'll be over the Pacific Ocean and I won't have much choice of what country to show. We could end up with a lot of Japan and New Zealand. That's nice, but not fair on the rest of the world! My maths of spinning had to be much cleverer. Explaining it would spoil the main idea of how I got it to stop in exactly the right place, but you could think about how this might work. I've also tidied up my code. There was a problem with what coders talk about variable scope , which means making sure some variables are only used in one little place, and some are used everywhere. Scratch h...
Post a Comment
Read more

7. Separation of Concerns: Getting the countries to work!

Image
Last time I found out that the globe we were using for this project had its data set up in a way that was hard for me to use. That's sometimes how it is, we can't expect someone else to do all the hard work, or for everything to be easy! Let's have a look at this, just for curiosity. This place with the colourful buildings is in the country of Cuba, and here's its data  and numbers which tell the map how to draw the outline of the island. {                 "type": "Polygon",                 "arcs": [                     [249]                 ],                 "id": "192",                 "properties": {                     "name": "Cuba"         ...
Post a Comment
Read more

6. Data Format: Failing to make the right countries light up

Image
I've been looking at this, and it's a bit hard. This is why - normally we find a place in the world by giving it a number for how far North or South it is (latitude) and another number for how far East or West it is (longitude). This program stores the points on its map in a different format. Also, the data doesn't have a simple way of choosing a country. It's important in computing that your data is stored in a way that's easy to use, but I'm not finding it that easy. The best I can do so far is to make the countries flash randomly each time the globe is drawn again, like this: This shows the sorts of things we can do with this map, just not the right ones!
Post a Comment
Read more

4. Inheritance: Making the globe do what we want

Image
The globe HERE is quite cool. It does a few things: 1. it rotates automatically 2. you can click and drag it around 3. if you stop dragging it, it just stops 4. little 'pings' pop up randomly We want to change some of these things, but leave some of them the same. In computing, this is called 'inheritance'. When we make a new or different version of an object, we keep things the same unless we tell the program to change them. So instead of the 4 things above, we want to: 1. not rotate automatically 2. drag it around, but just horizontally 3. when you let go, it carries on spinning, and eventually stops 4. when it stops, make it highlight a country. When I'm programming stuff, some things are easy, or quick, and some things can be very hard! Number 1 was easy. There was some code to 'autorotate'. It was set to start at the beginning, pause when you drag the globe, and start again when you let go. I just removed the code, done! Nu...
Post a Comment
Read more

3. Extensibility: Making the world spin, part 1

Image
So I have this idea, but nowhere to start from. A globe is a 3D object, and a computer screen is 2D. The maths to work out how to show 3D objects on a screen is hard! Thankfully, in computing people have usually done something similar before, and these programs are offered either free or for money for you to adapt and build on. This is a really important principle in computing, called 'extensibility'. Nowadays there are '3D engines' which you can use, which do the hard work. Fortnite, for example, uses ' Unreal Engine '. For my website I had a look around the web, and found something called ' planetaryjs '. This was created way back in 2013 by Binary Muse - her real name is Michelle Tilley - here is her programmer profile . She built her program using other people's work again - the 'TopoJSON' world map and the D3 programming library for the 3D. Using these she made a globe for other people to use and customise. This is how it looks...
Post a Comment
Read more

9. Responsive Design: Adding some muscle!

Image
I'm pretty happy with the globe now. Now I want to work out goes where on the website. Also I want to make sure the website looks good, however big or small the whiteboard or PC is. This is called 'Responsive Design'. I decided that, however big the screen was, I use the left half for the globe, and the right half for everything else. If the screen has extra depth, that will be blank. If the screen is even more narrow, there will be stuff missing off the bottom (for now). I also decided to add the 'strongman' feature to the spinning, so that now you see some 'muscles' emojis and some text to tell you how well you span the globe. I decided on this, rather than numbers, as it's less competitive. I also made it fade away after a couple of seconds, so you don't dwell on the muscles for too long. I have set it so '10' is the most muscles you can get. Try it here to see how many muscles you've got. Or look at the full site here . ...
Post a Comment
Read more

5. More natural UI: How to make a spinning globe

Image
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: onDragEnd: function() { // speed based on difference in longitude between last two frames var speed = Math.floor(200 * (this.dragNew - this.dragOld)); this.releaseLongitude =...
Post a Comment
Read more