Thinking about Light
As you can probably tell, lighting effects are one of my favourite animated 2D effects. I could look for hours (and I often do) at the way light behaves bouncing off, hitting or travelling through something.
I thought I'd explain what a penumbra is, and why it happens because knowing this can help you create more realistic artwork and animation.
So what the hell's a penumbra?
The blurred part of any shadow is called a penumbra. You can see it everywhere and it just takes a little bit of thought to figure out how/why it happens.
Imagine a man standing in a spotlight. The edges of the spotlight are fuzzy, but the shadow behind him is dark with sharp edges.
Now imagine a man standing facing a large window, but instead of a small point of light, he's illuminated by the natural daylight outside. The shadow on the wall behind him is blurred.
You may have already figured out that it's the size of the light source, but it's more than that. The type of shadow that is cast, and whether it's blurred or sharp is also determined by
In the window example however, the light source is large and close. The window is a large area of diffused light, almost surrounding the guy. A larger light source being closer to the subject allows more light to get in behind him. Now for a very messy diagram:
The white lines are representing the rays of light from the window. You can see where less light is getting in behind him, and there's a spot directly behind where no light rays reach.. and this is the darkest part of his shadow.
So while our sun is a massive light source against which our earth is just a speck, it is millions of kilometres away (or so I'm told).. so it acts like the spotlight. Therefore, in sunlight, all our shadows that are close to the ground are sharp. Objects that are high in the sky cast fuzzier shadows (birds, planes, tops of buildings) because they're further from the shadow and closer to the light source.
On an overcast day, on the other hand, the sky is one huge area of diffused light that is closer to us (like the window example), so we get fuzzy shadows. When something leaves the ground in this case (like a ball bouncing high, or a person jumping), the shadow seems to disappear completely, simply because the shadow is swallowed by light from all angles.
---
A penumbra can vary if part of the object is close to the light source and another part is close to the shadow. A tall building is a prime example, where the shadow of the top of the building is fuzzy, but the shadow that meets the building on the ground is sharp.
Here's a photo I just took, to illustrate this effect.
The fingers that are touching the wall are casting the sharpest shadows because they're touching.. but the parts of the hand and arm that are further from the wall (and closer to the light source in relation to the wall) cast the fuzzier shadows.
--- --- ---
So next time you're making shadows for your characters/elements in a movie/illustration, ask yourself if the shadows are correct. Fuzzy shadows are much easier to do, because you don't need much detail in them. If it's a crystal clear sunny day, or a character under a bright spotlight, you'll need darker shadows with a higher level of detail.
Oh yeah.. "penumbra". The fuzzy part.
I thought I'd explain what a penumbra is, and why it happens because knowing this can help you create more realistic artwork and animation.
So what the hell's a penumbra?
The blurred part of any shadow is called a penumbra. You can see it everywhere and it just takes a little bit of thought to figure out how/why it happens.
Imagine a man standing in a spotlight. The edges of the spotlight are fuzzy, but the shadow behind him is dark with sharp edges.
Now imagine a man standing facing a large window, but instead of a small point of light, he's illuminated by the natural daylight outside. The shadow on the wall behind him is blurred.
You may have already figured out that it's the size of the light source, but it's more than that. The type of shadow that is cast, and whether it's blurred or sharp is also determined by
- the size relationship between the light source and the object
- the distance between the object and its shadow
In the window example however, the light source is large and close. The window is a large area of diffused light, almost surrounding the guy. A larger light source being closer to the subject allows more light to get in behind him. Now for a very messy diagram:
The white lines are representing the rays of light from the window. You can see where less light is getting in behind him, and there's a spot directly behind where no light rays reach.. and this is the darkest part of his shadow.
So while our sun is a massive light source against which our earth is just a speck, it is millions of kilometres away (or so I'm told).. so it acts like the spotlight. Therefore, in sunlight, all our shadows that are close to the ground are sharp. Objects that are high in the sky cast fuzzier shadows (birds, planes, tops of buildings) because they're further from the shadow and closer to the light source.
On an overcast day, on the other hand, the sky is one huge area of diffused light that is closer to us (like the window example), so we get fuzzy shadows. When something leaves the ground in this case (like a ball bouncing high, or a person jumping), the shadow seems to disappear completely, simply because the shadow is swallowed by light from all angles.
---
A penumbra can vary if part of the object is close to the light source and another part is close to the shadow. A tall building is a prime example, where the shadow of the top of the building is fuzzy, but the shadow that meets the building on the ground is sharp.
Here's a photo I just took, to illustrate this effect.
The fingers that are touching the wall are casting the sharpest shadows because they're touching.. but the parts of the hand and arm that are further from the wall (and closer to the light source in relation to the wall) cast the fuzzier shadows.
--- --- ---
So next time you're making shadows for your characters/elements in a movie/illustration, ask yourself if the shadows are correct. Fuzzy shadows are much easier to do, because you don't need much detail in them. If it's a crystal clear sunny day, or a character under a bright spotlight, you'll need darker shadows with a higher level of detail.
Oh yeah.. "penumbra". The fuzzy part.
11 Comments:
Thanks a lot. I often have a hard time understanding how shadows are against different light sources. This is goning to help me out quite a bit
Hey Adam, I've noticed things like your hand picture where the shadow gets blurry if further away, my question is, how to draw it in flash? When I want to do a fuzzy shadow, I instantly reach for the blur tool,
however, as shown in your picture, when part of the object is closer it's less blurred.
I wish flash had some sort of "Gradient Blur" =(
But still, any ideas?
apart from the messy diagram this may be my fave so far :)
Now there is some information Ive never seen anywhere else! Great stuff Adam, you should have started blogging years ago man!
Anonymous:You could split your shadow graphic into multiple sections and then gradually blur the sections out. It may take a few steps, and a bit of final adjustments but that would work.
Theeye:
Tried that, and my reasults where that the more blurred areas left big gaps, also, the filesize and lag was HUUUUUGGGGE
Oh, and just fyi, I'm "Ratio" from the forums, I can't be bothered to get an account here.
Hey Ratio, it sure would be awesome if Flash had gradient blur, and radial blur (zoom and spin!) like Photoshop.
You might have noticed in LittleFoot that I 'faked' a gradient blur on the spider web. That was using Flash 8 so the file size is very small.
It's the exact same way that theeye describes above. The only (very slight> problem with this method is that when you look closely you can see the joins between the sections.. it's quite evident on the LittleFoot spiderweb if you know where to look.
Until Flash comes up with a way of gradient, or radial blurring (I reckon that's more likely now that it's in the same family as Photoshop), we have to revert to the old method of importing bitmaps, or splitting up the symbols.
thanks a lot for this excellent weblog
I already knew about your animations but this blog is a kind of holy grail for the junior flash designer that I am
Hello,
I just wanted to leave you a little note, and your forum wouldn't let me post for some reason so i'm putting it here for lack of a better way to contact you...
http://media.putfile.com/Lucas-Gilbertson-voice-demo-
Take a listen to this voice demo if'n you like. these are the voices that are my most marketable, (search google for 'lucas gilbertson') but my repetoire extends much further.
i've been proffesional for just over 4 years now, but since this is something that I enjoy more than anything in the world, I would jump at the chance to do some free work for individuals in the flash community. I think your work is some of the best i've seen so far, your commitment and talent show well.
contact me at gilbertsonlucas@yahoo.ca if you are interested, or become interested in the future.
Thanks a bunch Adam. It's incredible that you can see all those little details that everyone think they're unnecessary but once you put them in practice you'll notice that adding those details make everything more realistic. Thanks again, keep writing! i love your blog.
Hey Adam, this is a great piece of information. It helps even with photography. Great tut mate.
Jballz
your explanations are easy to understand, thanks for making the effort. I look foward to reading your book on flash when its published. I like your art work its always good to see what ex disney people really do besides the usual generic crap we are force fed.
Post a Comment
Links to this post:
Create a Link
<< Home