This week i had a stint at trying to reproduce the brushstroke effect as seen on the famous labuat website, winner of the FWA’s 2009 people’s choice award. The tricky part was getting that same smoothness in the curves but i’m pretty happy with the results i got so far. For kicks, i also added some animation and velocity to the brushstroke.
Click to open SWF
Click to open SWF
It was a nice continuation from the previous work i did on the 25 lines of code contest. I’m gonna thinker a little bit more with the code and post more advanced experiments later on.
very nice! is the thickness random? Did you try mapping it to the mouse speed?
Thanks Felix, yes the thickness is just tweened from 40 to 4 and yoyo-ed back again. I didn’t try the mouse speed. Next thing i want to try is to divide each curve in multiple quads and draw a bitmap texture that follows the path.
This is very cool. Nice job Patrick.
Wow!! realy nice..
Hey…Thanks for posting this… I have learned a lot form playing around with this.
I have modified it to use a particle with an attraction to the mouse postion, as opposed to just the mouse position. This way we can easily base the brush stroke on it’s velocity, and it also draws more natural curves.
Take a look:
adamcoulombe.info/lab/as3/ribbon/Ribbon_Remix.swf
adamcoulombe.info/lab/as3/ribbon/classes/Ribbon_Remix.as
This is amazing and I was wondering is there any way of creating this effect with coding…? I am not all that familiar with physics yet.
Kash…
I used Arnaud Icard’s Traer AS3 engine… It is actually very simple to implement and you don’t actually need to know any physics stuff really.
Take a look at the source code and you’ll see that it’s not drastically different from Patrick’s non-physics version…