5 ms·

FourShadows.js – Time-aware algorithm driven shadows for icons

48 points by Gigacore 12y ago

rguldener 12y ago
When I click the demo link I get a 404
- Gigacore 12y ago
  Fixed. Thanks for pointing that out.
peter_l_downs 12y ago
This feels unnecessary, although it's some cool code for sure. I think it ends up looking unnatural when the generated shadow doesn't match the shadow in the icon itself; in the demo on the github page, this would be at 1 o'clock and 5 o'clock.
- deleted 12y ago
  [deleted]
SwellJoe 12y ago
Clever, but light comes from the sky (it always comes from the sky in nature...light from below weirds us out). It's probably poor design to have shadows rotating throughout the day. Might be more friendly to have the shadows play like real shadows (never going above the object). Source: http://static.tvtropes.org/pmwiki/pub/images/TV_Tropes_Flashlight_Image_5440.jpg http://static.tvtropes.org/pmwiki/pub/images/TV_Tropes_Flash...
- meesterdude 12y ago
  This. Light from below is unnatural. Also, I think this generally would confuse users. I visit at 10AM it looks one way, I visit at 3PM it looks another, and I have no idea why as a user. Even if you paired it with other elements, you've still got the shadow all over the place. I remember about 10 years ago watching a guy in school build a site that had a header that would have full sunrise-sunset based on your time in cute artwork. If you gave your location, it would display current weather too. So OP, I think this has limited use; but its good to explore and experiment and see what you end up with. Perhaps with more thought/iterations you'll end up with something really amazing.
  - dwild 12y ago
    It would confuse users? Having a shadows on your logo that can take 4 different positions would confuse the users?
- hemmer 12y ago
  I pictured looking top-down at the object, for which the shadow seemed quite natural?
  - SwellJoe 12y ago
    Do you work with your screen laying flat, such that you're looking down on it? I'm not being argumentative; there is a history of the "desktop" metaphor, where it did seem sort of like the user was looking down on it from above. That particular approach to the metaphor seems to have faded deep into history. Not saying it's wrong, just that we seem to have moved somewhere else with UI, and I feel like a corkboard with pieces of paper tacked to it is a more fitting analogy for the way many of our current desktops work. The way shadows are used in most current desktops match that metaphor more closely than objects on a horizontal "desk" surface. And, given that we never use screens sitting flat on a horizontal surface (even the Microsoft Surface evolved to go vertical). The ergonomics of staring straight down is pretty awful. Our heads get really heavy at that angle, causing back pain. Edit: Some "desktop" metaphor UIs where a "top-down" light source might logically lead to OPs shadow design: http://blog.codinghorror.com/content/images/uploads/2006/05/6a0120a85dcdae970b0120a86d6338970b-pi.png http://blog.codinghorror.com/content/images/uploads/2006/05/... http://kruzeniski.com/wp-content/uploads/2011/04/how_print_is_future_interaction_12.jpg http://kruzeniski.com/wp-content/uploads/2011/04/how_print_i... Even the modern take (Bumptop for Mac) seems needlessly cluttered and cumbersome to manage. Then again, I prefer tiled interfaces, so I lean toward the extreme on the other end of the spectrum.
asadlionpk 12y ago
It would have been a great effect if it had 12 shadows. Although unnecessary but cool.
richbradshaw 12y ago
Google maps does this for shadows on buildings - check out something tall to see. It makes more sense there as the shadows actually fall in that location. As an interface it's a cool idea but we normally consider light to fall from top to bottom.
dsl 12y ago
Does it remove the shadows at night?
balazsdavid987 12y ago
I'm not sure about the usefulness of this, but it's creative, beautiful and unconventional for sure.
andrewliebchen 12y ago
Neat idea, but shadows cast on the ground don't move around an object a full 360deg over the course of the day. If the metaphor is that we're looking at the object from above, then the angle of the shadow would depend on the time of day, the day of the year, and the object's latitude. Now THAT would be a neat plugin. Others have mentioned that Google does it like this in Google Maps...which is even stranger because there is a very clear real world analog in that case. I would have expected that they would take the care to render the shadows as they would actually appear for that location at that time.
- monk_e_boy 12y ago
  As soon as the shadow flowed up the page, I was like, WTF the sun is underground now? This, on a tech news site is.... dumb
emsy 12y ago
This would be cool on a mobile, since you usually hold it with the display facing towards the sky. But then, the length and angle of the shadow have to depend on the orientation of the phone.
fit2rule 12y ago
Think of the Icon as a planet, and your attention and focus as the sun .. only then will you find true nirvana. Daily.
vstp 12y ago
Waste
adamwong246 12y ago
Wouldn't using svg's be tremendously more powerful, rather than pngs and image sprites? Of course, there are compatibility issues with older browsers but placing 1 of 4 pngs is just barely "time aware"
LukeB_UK 12y ago
The effect gets totally ruined on the demo page where the HTML5 and CSS3 shields are used which have their own light source. Screenshot: http://i.imgur.com/prMIIOQ.png http://i.imgur.com/prMIIOQ.png
- Gigacore 12y ago
  You're right. I shouldn't have used logos with their own shadows. Replaced with flat ones. Sorted out. Thanks!
social_quotient 12y ago
Cool demo and js file size. I did something similar a while back and thought I would share http://codepen.io/social_quotient/pen/msrIx http://codepen.io/social_quotient/pen/msrIx
iandanforth 12y ago
Nerd Snipe! - Pick a website that uses consistent shadows. Assume that the website is a 3 dimensional object that could cast those shadows. Also assume that the object is positioned sitting on the ground, with the length of the page normal to the surface of the earth. Provide a location, rotation, time of day and day of year in which the shadows are accurate.
califield 12y ago
To be honest, this library doesn't really make sense. Perhaps a related but more useful idea would be to adjust the colors of your site to match the user's local time like f.lux...

48 points by Gigacore 12y ago

rguldener 12y ago

When I click the demo link I get a 404

Gigacore 12y ago
Fixed. Thanks for pointing that out.

peter_l_downs 12y ago

This feels unnecessary, although it's some cool code for sure. I think it ends up looking unnatural when the generated shadow doesn't match the shadow in the icon itself; in the demo on the github page, this would be at 1 o'clock and 5 o'clock.

deleted 12y ago
[deleted]

SwellJoe 12y ago

Clever, but light comes from the sky (it always comes from the sky in nature...light from below weirds us out). It's probably poor design to have shadows rotating throughout the day. Might be more friendly to have the shadows play like real shadows (never going above the object). Source: http://static.tvtropes.org/pmwiki/pub/images/TV_Tropes_Flashlight_Image_5440.jpg http://static.tvtropes.org/pmwiki/pub/images/TV_Tropes_Flash...

meesterdude 12y ago
This. Light from below is unnatural. Also, I think this generally would confuse users. I visit at 10AM it looks one way, I visit at 3PM it looks another, and I have no idea why as a user. Even if you paired it with other elements, you've still got the shadow all over the place. I remember about 10 years ago watching a guy in school build a site that had a header that would have full sunrise-sunset based on your time in cute artwork. If you gave your location, it would display current weather too. So OP, I think this has limited use; but its good to explore and experiment and see what you end up with. Perhaps with more thought/iterations you'll end up with something really amazing.
- dwild 12y ago
  It would confuse users? Having a shadows on your logo that can take 4 different positions would confuse the users?
hemmer 12y ago
I pictured looking top-down at the object, for which the shadow seemed quite natural?
- SwellJoe 12y ago
  Do you work with your screen laying flat, such that you're looking down on it? I'm not being argumentative; there is a history of the "desktop" metaphor, where it did seem sort of like the user was looking down on it from above. That particular approach to the metaphor seems to have faded deep into history. Not saying it's wrong, just that we seem to have moved somewhere else with UI, and I feel like a corkboard with pieces of paper tacked to it is a more fitting analogy for the way many of our current desktops work. The way shadows are used in most current desktops match that metaphor more closely than objects on a horizontal "desk" surface. And, given that we never use screens sitting flat on a horizontal surface (even the Microsoft Surface evolved to go vertical). The ergonomics of staring straight down is pretty awful. Our heads get really heavy at that angle, causing back pain. Edit: Some "desktop" metaphor UIs where a "top-down" light source might logically lead to OPs shadow design: http://blog.codinghorror.com/content/images/uploads/2006/05/6a0120a85dcdae970b0120a86d6338970b-pi.png http://blog.codinghorror.com/content/images/uploads/2006/05/... http://kruzeniski.com/wp-content/uploads/2011/04/how_print_is_future_interaction_12.jpg http://kruzeniski.com/wp-content/uploads/2011/04/how_print_i... Even the modern take (Bumptop for Mac) seems needlessly cluttered and cumbersome to manage. Then again, I prefer tiled interfaces, so I lean toward the extreme on the other end of the spectrum.

asadlionpk 12y ago

It would have been a great effect if it had 12 shadows. Although unnecessary but cool.

richbradshaw 12y ago

Google maps does this for shadows on buildings - check out something tall to see. It makes more sense there as the shadows actually fall in that location. As an interface it's a cool idea but we normally consider light to fall from top to bottom.

dsl 12y ago

Does it remove the shadows at night?

balazsdavid987 12y ago

I'm not sure about the usefulness of this, but it's creative, beautiful and unconventional for sure.

andrewliebchen 12y ago

Neat idea, but shadows cast on the ground don't move around an object a full 360deg over the course of the day. If the metaphor is that we're looking at the object from above, then the angle of the shadow would depend on the time of day, the day of the year, and the object's latitude. Now THAT would be a neat plugin. Others have mentioned that Google does it like this in Google Maps...which is even stranger because there is a very clear real world analog in that case. I would have expected that they would take the care to render the shadows as they would actually appear for that location at that time.

monk_e_boy 12y ago
As soon as the shadow flowed up the page, I was like, WTF the sun is underground now? This, on a tech news site is.... dumb

emsy 12y ago

This would be cool on a mobile, since you usually hold it with the display facing towards the sky. But then, the length and angle of the shadow have to depend on the orientation of the phone.

fit2rule 12y ago

Think of the Icon as a planet, and your attention and focus as the sun .. only then will you find true nirvana. Daily.

vstp 12y ago

Waste

adamwong246 12y ago

Wouldn't using svg's be tremendously more powerful, rather than pngs and image sprites? Of course, there are compatibility issues with older browsers but placing 1 of 4 pngs is just barely "time aware"

LukeB_UK 12y ago

The effect gets totally ruined on the demo page where the HTML5 and CSS3 shields are used which have their own light source. Screenshot: http://i.imgur.com/prMIIOQ.png http://i.imgur.com/prMIIOQ.png

Gigacore 12y ago
You're right. I shouldn't have used logos with their own shadows. Replaced with flat ones. Sorted out. Thanks!

social_quotient 12y ago

Cool demo and js file size. I did something similar a while back and thought I would share http://codepen.io/social_quotient/pen/msrIx http://codepen.io/social_quotient/pen/msrIx

iandanforth 12y ago

Nerd Snipe! - Pick a website that uses consistent shadows. Assume that the website is a 3 dimensional object that could cast those shadows. Also assume that the object is positioned sitting on the ground, with the length of the page normal to the surface of the earth. Provide a location, rotation, time of day and day of year in which the shadows are accurate.

califield 12y ago

To be honest, this library doesn't really make sense. Perhaps a related but more useful idea would be to adjust the colors of your site to match the user's local time like f.lux...