blog.andyhume.net

Thoughts and commentary on web development

Solar system model in CSS

This is a brain-dump that got too big for the Idea section on the Science hack day wiki so I’ve moved it over here.

Incidentally, if you like hack days and you like science, you might be interested in finding out more about what’s being planned for this inaugural Science Hack Day. Meanwhile, here’s the idea:

Given an HTML document containing tables of solar system model data, build a stylesheet (using CSS3 transforms and transitions/animations) that can present it as an animated model of the solar system:

  • Would be interesting to see what could be done with only HTML/CSS, but realistically might need some scripting to make it a bit more sane. For example, to read data from the table in the first-place.
  • Cubes rather than circular images of planets, so we can spin them independently at correct speeds. Might not look so pretty, but means we can aim for a more accurate model. Could use more than 6 faces to get a more ’rounded’ shape, eventually it would look spherical I guess.
  • Not sure if reproducing the true elliptical orbits of planets is going to be easy, or even possible. They might just have to be circular, at least in v1.
    • Matthew below has a possible solution for that: using a scale transform to stretch the x-axis.
  • Allow for rotating the entire canvas so you can zoom in and out and look at things from different angles using keyboard or mouse controls.
  • Need to work out solution for scaling distances vs planets sizes independently so we can fit it on a screen. Presumably there’s prior-art for this. Would be nice to have a few different scaling methods.
  • Could do a canvas version too, but probably less fun and actually pretty simple for someone with decent programmatic drawing skills (not me).

Finally, here’s the extremely crappy and ill-conceived 10 minute non-starting point, which I’ve entitled Tiny dots going round a small dot (Webkit only of course). No, none of the table’s data is used in the animations, all the values are hard-coded in CSS, and it’s almost not worth showing. But anyway, if it was all done and dusted we’d have nothing to do on hack day.

See you there?

andyhume.net

I build web sites and web applications. I currently work as a web developer at Clearleft in Brighton. I also write articles for magazines like .Net, and Computer Arts Projects. Sometimes I speak or give lectures on web design and development at universities and colleges. Get in touch.
UX London