{"author_name":"namuol","cat":"LD #23","comments":[{"author_name":"Chinchilla","time":"May 11, 2012 7:49 am","epoch":1336740540,"text":"Very, very cool effect!","spam":"N"}],"epoch":1336160460,"likes":2,"metadata":{"p_key":"55846","p_author":"namuol","p_authorkey":"12236","p_urlkey":"91564","p_title":"Fake Atmosphere","p_cat":"LD #23","p_event":"LD23","p_time":"1336160460","p_likes":"2","p_comments":"1","p_status":"UPD5","us_key":"12236","us_name":"namuol","us_username":"namuol","event_start":"1334880000","event_key":"10","event_name":"LD23"},"text":"

(This is a cross-post<\/a> from my post-compo devlog<\/a>.)<\/p>\n

I’ve been playing around with different ways to fake the atmosphere of a planet in a 2D canvas context.<\/p>\n

<\/img><\/a><\/p>\n

That’s interactive, by the way, so mess around with it (Chrome\/Chromium is recommended!). Clicking on\/around the planet changes the “angle” of light. You can get some pretty nifty looking results. I made this to determine what were reasonable parameter-ranges to use to generate plausible-looking planets.<\/p>\n

The way I get the sort of “volumetric” look for the atmosphere is really simple: I just stack many semi-opaque layers of the same gradient-filled-circle over the planet, each one having a radius slightly bigger than the previous.<\/p>\n

I actually threw this together using with a JSFiddle which you can view\/hack here<\/a>.<\/p>\n

Of course, I still need to figure out how to combine this with a surface\/cloud texture (procedurally generated or otherwise…).<\/p>\n \n

Tags: canvas<\/a>, html5<\/a>, javascript<\/a>, muniverse<\/a>, procedural generation<\/a>, space<\/a><\/p>","time":"May 4th, 2012 2:41 pm","title":"Fake Atmosphere"}