138. A day/night world of Codea users

The world turns, and Codea users all over the world come into view. Day and night are shown accurately. The code is here.

You may have seen this on the forum already, and it’s the kind of project that can look really impressive and intimidating, but I thought I’d explain what went into it, as a guide to what sort of skills it requires.

The users

The app reads in a list of Codea users and their longitude and latitude. This list is stored as a table in the code.

The list came from a Codea forum thread where people wrote where they came from. I wrote them all down by hand and googled their longitudes and latitudes, which took a while.

Skills required: none

The spherical earth

We create a rotating sphere (thanks to Codea user Jmv38 for this code, which I don’t pretend to understand) and use a world map texture image to make it look just like the earth. In fact, there are two images, one for day and one for night.

I hunted around for quite a while before finding how the images needed to be laid out so they would fit on a sphere. There are apparently quite a few ways to do it, but fortunately Jmv38’s method was the simplest – you simply give the images to the sphere mesh as they are, without changes – so I was able to find suitable matching night and day images that would work on our sphere.

Skills required: copy/paste, lots of googling

Creating day and night

Codea calculates where the sun is, based on your current time and your latitude (which you need to put into the code before running the program yourself) – by simply working out where in the world it is currently midday.

Then it uses the day image for 1/4 of the map on each side of the sun (because the map image covers the whole earth, ie 360 degrees, so only half is sunny, ie 14/ on each side of the sun), and the night image for the rest. This is done using a shader, which fades from one image to the other where they join together. (I was originally going to use lighting to create the sun’s shadow, but for some reason it didn’t seem to work too well, and using a night image was way more effective). The shader also puts a yellow blob in for the position of the sun. I could probably  have done the shader better – but it works.

So now we have a realistic earth, with real time (and fairly accurately mapped) night and day, which will change as you watch.

I could have done it without a shader, by calculating the midday position on startup, and creating a mixture of the day/night image using the image get and set commands, one pixel at a time – or perhaps spriting chunks of the day and night images onto an image in memory, and then doing some fading where day and night join. It might have taken a while, and wouldn’t have updated the midday position in real time, but it should have looked OK.

Skills required: nothing too difficult if you mix the images in Codea (previous paragraph) but a shader gives better results. If you know something about shaders, then mixing two images together isn’t hard.

Six months ago, shaders were like black magic to me, something only the wizards of our world could use – but I found they are much easier than they look, and now I enjoy using them.

So if you haven’t tried shaders before, and you are reasonably comfortable with programming, why not try them? Ebook here.

Adding users to the earth

I thought this was going to be really difficult, because I am adding a dot for each user to the day and night images, in the right place for their longitude and latitude. Because images like this are stretched so they fit on a sphere, I thought it would require horrible math formulae, but actually it was very easy indeed.

The images run linearly from -180 to +180 latitude along the x axis, and +90 to -90 up the y axis, so if you want 30N longitude and 120W latitude, that is 1/3 (30/90) above the middle of the image, and 2/3 (120/180) left of the middle. So it’s just some simple arithmetic to figure out where to draw each dot on the two images.

Skills required: googling! This proved to be quite easy (It still took me a couple of hours, though..)

Showing users’s names as the earth spins

I found this the most difficult thing to decide. Should I pop up names if you press on a dot? Should I float the names up as the earth reaches each user?

To make it more difficult,  most of the users are clustered together in Europe, at the top of the globe, so touching was impractical.

I decided to show a list of names at the left, adding new names as the rotation reaches them, and fading them out after 10 seconds. It was quite easy to figure out when to show new users – I sorted the user list based on latitude, and as the earth rotated, I figured out what latitude is facing the screen, and added any users that had been passed since the last redraw.

Making users fade after 10 seconds is easy. I add them to a table, along with the time (ElapsedTime) when they were added. Then each time I draw, I write the text with a colour whose alpha value reduces with time (so they fade) and when more than 10 seconds has gone since they were added, I remove them from the table.

My last problem was how users know where the new names come from, ie which country, because it’s not clear where the middle of the sphere is. So I needed to draw a line round the earth to show where we are up to, and so as the line reaches a dot, the name pops up on the left.

In the end, I used the shader to just draw a very thin line round the sphere at the point where we’ve got to. This was quite tricky and could probably have been done better.

Skills required:  some design skills (of which I don’t have much) and fairly ordinary Codea programming skills.

Overall

So I guess I’m saying that you don’t need to be a code wizard to create projects that look impressive. You borrow whatever code and ideas you can, and figure the rest out yourself. I wasn’t sure I could build this project, but it turned out easier than I expected.

It helps to know as much as possible about Codea, of course, and so I encourage you to look not only at shaders, but 3D, lighting and whatever else interests you. Codea may not be powerful enough to build highly complex graphics, but it is a fantastic learning tool (which is how I have used it), and certainly powerful enough to build impressive apps.

Advertisement