how to create a three points gradient with the drawing API methods.

since my (early) Delaunay triangulation attempts (2006!) I’ve wanted to draw a 3 point gradient.
like for instance you give some vertices, associate them with colors and it would draw a smooth, super complex gradient between the vertices… still dreaming of it though.

lately pixelero blew my attempts to smithereens when he released a Pixel Bender shader to do just that: Three Point Gradient.
actually this article by omino is also interesting.

Now if you work with the FP10, you may stop reading here ; using the ShaderFill is 10 * faster than the method described hereafter. it is also far more accurate.

still here? :)
ok, the biggest interest of the method is that the algorithm can work with AS1 / FP6+ files.
yes, you heard right, in the FP6 release, the API already had the beginGradientFill method and the Point & Matrix Objects which is approximately all we need to do the thing.

here’s a quick demo click, click, clik to draw triangles:

and here’s how it works (love thoses schemes ^^):

so the colors are drawn one after the other which means that the result irectly depends on the colors order.
that’s why I’ve added a baseColorMethod. this will draw the triangle once with the given color to help reinforce the colors. in the demo below it’s a grayscale to enhance the effect but it can be any color.
this does not happen with the pixel bender version for each pixel is a mathematical interpolation. with PB the colors are brighter and exact…

I had a hard trying to solve the matrix issues and finally used Quasimondo’s matrix class (thanks :) )

the good thing is that the very same result can be achieved in the FP6 !
ok, apart from banners there are no real reasons to use such an old version of the player but it might come in handy if you have to .. say.. hem.. do an animated three pointrs gradients in a FP6 banner ^^’
wellwellwell

so here’s a comparison between Pixelero’s Pixel Bender shader (on the left) and my method (on the right ).

you’ll find the class here : GradientTriangle.as
you can use it as follow:

var gt:GradientTriangle = new GradientTriangle( p0, p1, p2, c0, c1, c2 );
gt.render( graphics );

with p0, p1, p2, being Points and c0, c1, c2 their associated colors.

ok I haven’t ported it to AS1 but fell free to do so :)

and finally for your eyes only I’ve coupled the PB filter with a Delaunay triangulator to create nice pictures like this.
you can tune the opacities of the bitmaps. you can click to create triangles manually or try to catch canny edges. keep the canny scale low (around 10 ) or it might just crash.
it should look like the pictures hereunder with rather high scales.


(a cover of the crystal castles album)

you can also set a random cloud of points.
this is a direct allusion to jonathan puckey

enjoy :)

Tags: geometry, gradient