Patrick Matte Creative Coder

Reproducing the Labuat brushstroke

This week i had a stint at reproducing 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.
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.

Download the source files.

11 comments on “Reproducing the Labuat brushstroke”

  1. 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.

  2. 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

  3. 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.

  4. 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…

  5. hey there,
    Love the recreation of the original, I was just wondering how to get it to follow the mouse rather than using MOUSE_DOWN. I am doing a few experiments in university with this code but I am fairly new at this so would appreciate some help. 🙂

  6. Pingback: brushstroke effect

Comments are closed.