HIDIHO!

giving something back to the Flash community

rich strokes

Tags: , , , ,

cover
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:
how to

first I did a naive test that looked like this:
constant normals
and found it convincing enough to add non-constant normals (= the width is indexed on speed)
non constant normals

so for the drawing below
cover
you’d get the following strokes:
example

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:

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 :)

Tags: , , , ,

© 2009 HIDIHO!. All Rights Reserved.

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