Home / Flash / Starry Night

Starry Night

Some years ago i was involved in a very beautiful project, the idea is to recreate all the stars and constellations, i started at the beginning to do some prototype, however i was pulled out of the project later, i’m always fascinated by these stars and constellations, they are so beautiful, and it’s more interesting when you can actually see those connected lines to form the constellation, ok some of them are really abstract. So now i decide to rebuild it on my own and with the power of stage3D.

During the development i was focus to create a good texture-look feeling, and i learned a lot of things :


Facing to center 

The data i have for all these stars is their right ascension and declination, then i map it to a sphere, the way to do it is really simple: create a matrix3d, append translation(0, Radius, 0), append rotation of declination to Z axis, append rotation of right ascension to Y axis, then the position of this matrix3d is the position you are looking for. Then here comes the problem : the star that i’m drawing actually is an 2d plane with texture, so when i rotate the camera it gets distorted, so i need to some how “turn” them to face the center (0, 0, 0) here i use the old trick here, simple but useful, however i learned another way to do this.


Facing to screen

The other way to avoid the distortion is to make sure the plane is always facing the screen, the idea is : it is the camera matrix cause the distortion, so what we have to do is simply remove the camera matrix, but how ? just append with an invert matrix of your camera then you can “undo” the distortion of the camera, so the plane will always face the screen. I learn this skill from this blog, make sure you visit it, it has a good explanation on this, and other good blog post and amazing effects as well. I was using this skill for the name of the star, so no matter how you move your camera they always sit straight.


Blur on the edge

I want to create an effect that for the names of the stars get a little blurry when they move away from the center, at beginning i did it straight forward : do the first render, get the texture then apply vertical blur and horizontal blur, then mix this blur texture and the original texture with an radical gradient map, similar to build a depth of field effect, however i ran into several problems here, the first problem is after i did the vertical blur and horizontal blur the image is hardly visible, it became a little bit transparent, then i came up with the idea that i do the blur on the bitmap data first, so i can skip the blur rendering and the result is better as well, but still the image is not as clear as render directly to the buffer, take a look at this picture :

so as you can see using render to texture makes the text a little bit skinner and the glow is gone.

And another thing i discovered when i tried to get a clear text is the texture size when you render to texture :

when using 1024 the text is really blurry and a little bit transparent, it gets better in 2048, however it’s heavier.


So this is a small case study on this project hope this will be useful for you, i had a lot of fun building this project and i’m going to do more about it, one thing i want to try is to create an old chars feeling and also a closer view on the star as well, the database i have is really amazing, it has not only the position of the star, but also their color and size, so the size and color of the star in this project is really based on this actual data, recently the sky is clear during the night in london, and you can really see all the stars and recognise the constellation, it’s so much fun ! especially when you have a tool like this that you can check right away :P

2 thoughts on “Starry Night

  1. Pingback: Five – Case study |

  2. Pingback: Star Canvas – Case study |

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>