HIDIHO!

flash and you and me and you

hair / fur

Tags: , , , , , ,



… Bilbo, Bulbous Bilbo
Hairy, Hairy Hobbit Hero …

in The Pimp, The Bitch & The Magic Beans – intestinal fortitude by Nuclear Rabbit

this one might make Andreas Weber smile as I found out during my researches that he is (or was) working on hair simulation algorithms like to handle millions of 3D hairs at a time :)

who cares.

many famous and talented people have given it a try alreday:

plus a couple more I guess :)

Litterally speaking, there’s no algorithm nor is there a complex process whatever.
the Hair class is extremely simple and mostly stores values, it has a process() function that calculates each hair segments coordinates and a render() function to draw the hair.

the most problematic (and interesting) part is how to affect the hair’s growth to give it kind of a “natural” look where there is actually no clue on how it should grow.

here’s what I came up with (FP10 required):

The Flash plugin is required to view this object.

  • browse to use a cutsom picture
  • hair length controls … the hair length
  • curliness controls how much the hair can bend on each segment (should remain quite low)
  • hair steps sets the numaber of segments of the hair
  • base angle gives a big direction to all the hairs, like a wind
  • density is the amount of hairs growing at each pixel location
  • hair size si the hair’s root size (decreasing linearly along the length)
  • output scale is the output scale.
  • render renders the comp with the current params.
  • preview wil perform a rough render skipping lots of hairs to render faster
  • auto edge is quite an important feature ; when checked it computes a Sobel edge detection and uses it as a motion map to influence hair growth (red intensity affect the hair horizontally and green intensity, vertically).
  • click on the original / autoedge button to swap between the original and the render. when auto edge is on it shows the motion map.
  • finally you have a save button to save your piece of art

also, you can drag the comp.
you can play in a bigger window.
if ever you don’t have the flash player, here are some pictures.

those look pretty much like felt.

but we can achieve more graphical stuff:

this is an activator inhibitor pattern:

there are hundreds of possible variations around how to affect the growth. this version is rather fast and clean especially as params can be pushed over the limits I gave.
it made me think of that vector field I did a while ago.

this was a test with some rather small pics ( resized to 200 px ).
it also works on bigger pics but I realized it is a constant in my “work” ; using small pictures and make big drawings :)
small files are faster to load and everybody has an avatar somewhere so I think it’s a good approach…

enjoy :)

Tags: , , , , , ,

16 Responses to “hair / fur”


  1. wonderwhy-er
    on Oct 10th, 2009
    @ 12:08 am

    Pretty fun thing :)


  2. Li
    on Oct 10th, 2009
    @ 4:02 pm

    Amazing. The quality and speed is impressive!


  3. Tweets that mention HIDIHO! » Blog Archive » hair / fur -- Topsy.com
    on Oct 11th, 2009
    @ 3:27 pm

    [...] This post was mentioned on Twitter by Philippe Elsass, Devon O Wolfgang and Jim Armstrong. Jim Armstrong said: RT @gillesguillemin hair / fur generator http://bit.ly/1mBDUg [...]


  4. Benjamin
    on Oct 12th, 2009
    @ 9:13 am

    You dit it ! And you dit it well :)


  5. Aleksey
    on Oct 12th, 2009
    @ 12:21 pm

    Looks really great!

    Are you going to share source code for this effect? :)


  6. dVyper
    on Oct 12th, 2009
    @ 1:12 pm

    Well and truly brilliant!


  7. nicoptere
    on Oct 12th, 2009
    @ 2:36 pm

    thanks all.

    @aleksey actually the Hair class is really simple (check Hair.as).
    The only tricky thing is the way you generate the hair.
    what I did is to take the intensity of each pixel of the sobel map to spot the important locations of the picture:

    in this picture (a H/V Sobel filter affecting repsectively the RED and GREEN channels) hairs are growing at non black location and depending on the intensity of the red and green values, the hair’s direction changes.


  8. Dominic
    on Oct 12th, 2009
    @ 10:37 pm

    ça c’est vraiment cool pour le coup
    awesome work, as usual


  9. Aleksey
    on Oct 13th, 2009
    @ 1:27 pm

    nicoptere, thank you for sources and explanation!

    P.S. Your blog is awesome! Keep doing such interesting experiments! :)


  10. nicoptere
    on Oct 13th, 2009
    @ 1:50 pm

    @dominic & @aleksey thanks, such enthusiasm is really rewarding.

    it’s cool to find people interested in the same things as you.


  11. Andreas Weber
    on Oct 15th, 2009
    @ 9:13 am

    A _big_ smile. Keep up the great work!


  12. Mark
    on Oct 20th, 2009
    @ 12:32 pm

    Cool, i created a fun fur tool too:
    http://projects.stroep.nl/fur/

    But your is much faster (+great options)!


  13. hair / fur - inspiration
    on Nov 10th, 2009
    @ 2:45 am

    [...] by nicoptere [...]


  14. Joacim
    on Nov 15th, 2009
    @ 3:00 pm

    Awesome :)


  15. babeuf
    on Nov 30th, 2009
    @ 5:23 pm

    Great render !


  16. Ed
    on Jan 7th, 2010
    @ 10:21 am

    Hi Nicolas,

    Awesome work! I’m really impressed by both the speed and the result of what you did.

    I’m trying to recreate your effect here with your Hair class, was wondering if you will ever release a better commented version or maybe provide some guidance or an example of how it works?

    I’ve been at it whole day and got no results…

Leave a Reply

© 2009 HIDIHO!. All Rights Reserved.

This blog is powered by Wordpress and Magatheme by Bryan Helmig.