creating better looking dynamic strokes
for a recent project (that almost cost me my sanity) I came to re-open illustrator. I hadn’t for years.
it’s really a great soft btw one of my favorite with fireworks.
can’t remember since when it features that very cool ‘custom stroke’ thing.
you draw something and then choose some shape for the the stroke.
you can even draw your own shapes.
so last friday I told myself why not trying it in flash and off I went.
here’s an explanation of how it works:
first I did a naive test that looked like this:
and found it convincing enough to add non-constant normals (= the width is indexed on speed)
so for the drawing below
you’d get the following strokes:
which is already nice but the best is still to come for those strokes can be animated and that’s where it becomes really interesting.
hereunder is a demo. first you should draw something:
- show debug will show you how the curve is decomposed
- constant will swap between regular / speed based shapes creation
- animate map will .. well… animate the map (a simple loop movement)
- smooth bitmap will swap the smoothing of the drawTriangles method
- the smooth curve slider is used to tune the smoothnes of the curve. As I’m using my good old Natural Cubic Spline algo to create and smooth the curves, smoothness is quite an important factor.
- and finally the brush# radio buttons change the brush shape.
I really like the sensation when everything is building up before disappearing.
could be really really nice.
especially as the bitmapData could be processed in much more graphical ways.
otherwise the brushes pictures come from:
- http://www.room122.com/freebies/free-illustrator-art-brushes/
- http://www.bittbox.com/freebies/random-free-vectors-part-11-watercolors
and here’s a snippet to instantiate a stroke:
//creates a new RichStroke object var rs:RichStroke = new RichStroke(); //debug is an int => 0 | 1 rs.debug = 1; //this method turns a curve ( curve = Vector. Point ) into a set of Quad objects var quads:Vector. quad = rs.fromCurve( points, constant, debugCanvas.graphics ) //and this assigns them to the stroke rs.setQuads( quads ); //assigns a bitmapdata rs.bitmapData = src; //draws the stroke on a given graphics object rs.draw( this.graphics, smooth );
and finally the classes:
plus a zip file containing everyone
you’ll need Keith Peters minimal components to get Main to work.
I hope you have a tablet for it works much better than a mouse.
now that was a first shot.
I tried a couple of things including the use of the very cool inspirit’s Canny edge detector to create the strokes but it was not a success ; the strokes were sort of misplaced, too long, too short etc. in a way it’s kind of reassuring to know that some things still need the human sensitivity to work.
oh and this can be the basis for a very interesting system I’ve been thinking of for a while now… well … later.
enjoy :)
John del Rosario
on Sep 16th, 2009
@ 1:41 am:
wow that’s impressive work. I’ve always wondered how to do that.. kinda still wondering. :P
thanks for sharing.
David
on Sep 16th, 2009
@ 2:37 am:
Simply amazing. I’d love to get in touch with you regarding a possible collaboration.
Lucas Motta
on Sep 16th, 2009
@ 3:47 am:
Amazing Nicolas!!
elliotrock
on Sep 16th, 2009
@ 5:15 am:
Very cool mate, you got a lot of exposure on twitter with this one!
Martin
on Sep 16th, 2009
@ 8:05 am:
great work
simppa
on Sep 16th, 2009
@ 8:25 am:
Well done! Went straight top to my “Hey! Have you seen this one yet” -list. Extremely cool stuff mate.
TarGz
on Sep 16th, 2009
@ 9:15 am:
Tu dessines vraiment comme un pied…. en revanche l’article est SUPER interessant. BRAVO
Trevor Boyle
on Sep 16th, 2009
@ 9:44 am:
Very nice! I think this could be very useful for the generative art framework I have been working on.
http://code.google.com/p/artionscript/
Nice work.
Andreas Weber
on Sep 16th, 2009
@ 9:50 am:
Fantasic and inspiring work. Thanks a bunch for sharing!
electrofrog
on Sep 16th, 2009
@ 9:52 am:
Wow wow wow ! It throws some Toulouse sausages ! Nice one dude !
maru
on Sep 16th, 2009
@ 10:22 am:
I would add : it throws some supersonic rillettes du Mans !
(et n’écoute pas les jaloux, il est très bien ton dessin ;)
Benjamin
on Sep 16th, 2009
@ 10:23 am:
Really nice Nico!
Frank Reitberger
on Sep 16th, 2009
@ 10:33 am:
very nice.
nicoptere
on Sep 16th, 2009
@ 11:36 am:
thanks all,
your comments are truely gratifying especially as they come from such varied and talented people.
plus it gave me the occasion to discover some great projects like livebrush and ARTionscript
@FR pire: c’est un craquage de slip ; bien au delà de l’envoyage de pâté ^^ merci d’être passés.
Mathieu
on Sep 16th, 2009
@ 12:18 pm:
Je suis sur le cul. It is quite a while i follow your blog, it is getting better and better! I think it would also be greatly useful for my application : http://www.pyskopaint.com
Je vois que tu as deja proposition de collaboration. J’aurai bien aime egalement faire passer psykopaint a un autre niveau a l’aide de quelqu’un comme toi.
Keep up the good work!
Lee Probert
on Sep 16th, 2009
@ 1:01 pm:
Wow!!! That’s amazing work. Very impressed. I just finished this little app … I wish I’d had these classes!
http://lyraspace.com/2009/09/intelikids-painter/
KinRou’s Blog » Brush stroke in Flash
on Sep 16th, 2009
@ 1:16 pm:
[...] http://en.nicoptere.net/?p=476 [...]
Tek
on Sep 16th, 2009
@ 3:12 pm:
There’s a lot to do with the animation feature. I hope that you or someone will have time to create an interesting drawing app with this. Great work again and again!
Ramon Fritsch
on Sep 16th, 2009
@ 5:53 pm:
Muito bom, parabéns!
Hidiho! Rich Strokes | ¿y por qué no?
on Sep 16th, 2009
@ 6:37 pm:
[...] http://en.nicoptere.net/?p=476 [...]
babeuf
on Sep 18th, 2009
@ 6:01 pm:
Just amazing…
links for 2009-09-21 - curiosity killed hec
on Sep 22nd, 2009
@ 12:06 am:
[...] HIDIHO! » Blog Archive » rich strokes (tags: as3 flash actionscript brush illustration paint drawing programming) [...]
Didier
on Sep 28th, 2009
@ 11:28 am:
So great !!! Clever & beautiful.
ethan
on Oct 5th, 2009
@ 5:51 pm:
Incredible! Genius!
kamil
on Nov 29th, 2009
@ 7:28 pm:
Wow!!!Cool!!
shaman4d
on Feb 9th, 2010
@ 5:13 pm:
Wow! You Rock! Great!