So I want to create a browser-based interactive realtime animation of the Earth and the other planets going around the Sun...where do I start?

Question

Hello.

I would like to create a browser based, interactive, realtime animation, showing the Earth as it goes around the sun, depending on the time of day and time of year. This animation should also (eventually) show the other planets in the solar system and the user should be able to pan around the solar system and see it from different sides (by click-drag, scroll etc.).

I wouldn't think it has any real practical application, but I like the artistic value found in the universe...so it would be interesting to start doing it and I'll probably learn a few things while doing this.

I don't have any experience with planetary physics, although I'd probably understand it if given a good source of information. I do have some experience with web development, with languages like JavaScript, HTML, CSS, Python.

Now, questions:

• Most importantly, how would I begin a project such as this?

• Where do I get the information about the rotation of the Earth and the other planets in the solar system?

• What languages should I use/learn?

• What other thoughts do you have about this idea? What functionality do you think would be interesting for a project such as this?

This idea is very much impulse driven, especially at this late hour of the day...as I'm looking out the window and seeing the buildings getting darker and darker, I'm also imagining how the Earth is slowly spinning around itself and also around the Sun and I think it would be a very nice sight to be able to see this from an outside perspective.

Hope to get some feedback. Cheers!

Answer 1

That's a lot of questions for one question ;)

Anyway, I'd do some planning first: divide the big task into subtasks (e.g. celestial mechanics ("how do the planets move" - see e.g. here), representing that in code, rendering that in 3D, texturing and shading, animation?) and start researching/working on those, check back here when you run into problems. The language doesn't matter, really - anything that allows you to render 3D scenes will do.

Maybe you could adapt Stellarium to your project - it does, after all, offer a view from some point in space in some direction. Its purpose is the other way - looking from Earth outwards, but I'd say a code fork may be feasible.

Answer 2

If I was going to do this, I'd start by learning how to use the Javascript canvas element to draw things. Write some code to draw some circles/ellipses on the screen for planetary positions. Then add some animation. Finally, I'd figure out how to do all the celestial mechanics calculations in Javascript.

Others might start with the celestial mechanics, and figure out the graphics later. Just choose which part you find "interesting", and dive in.

Answer 3

Sounds like a cool project! The kind I would be inspired to work on (and rarely finish ;-).

See this related question on graphical frameworks for browsers.

I'd start with, what is your audience? E.g. most internet users and most major browsers?

My preference would be to use O3D (based on WebGL), but that requires that you don't mind that your work of art only runs in bleeding-edge browsers and not in IE. The programming would be done in JavaScript. However it would be challenging. My next question would be, in the cold light of morning, am I still inspired enough about this project to invest significant time learning languages and graphics libraries?

Another question is, are you looking to do this in 3D? It sounds like it, but there is aesthetic value in a 2D representation of the solar system as well, so it's worth asking.

If you're not already experienced in programming or 3D graphics, you might consider Processing. It's aimed at artists rather than programmers, and it has applets to run in browsers.

For planets you'll basically be doing textured spheres, at least to start; see this tutorial for WebGL or these samples for O3D.

Also do a search for open-source solar system simulation projects... there are plenty of them, and you can steal the math algorithms. :-)