This post will show a handful of simple tricks for “drawing” using Pixel Bender. That’s not what it’s for, especially in Flash. But it’s still interesting to see how it’s done.
But first, the demo:
And I’m sure the handy tabs across the top for the source code won’t escape your attention, either!
Pixel Bender Metadata
In the demo above, you can notice a couple of things. Some of the parameters are drawn as sliders, but also there’s a checkbox, some color pickers, and, in the drawing area, some draggable spots. This is done by a collusion between the Pixel Bender kernel, and the Flash viewer code. Here’s the parameters from the Pixel Bender kernel:
parameter float3 backgroundColor<kind:"color";defaultValue:float3(1,1,1);>;
parameter float spotRadius<defaultValue:50.0;minValue:1.0;maxValue:800.0;>;
parameter float3 spotColor<kind:"color";defaultValue:float3(0,0,0);>;
parameter float spotSquare<kind:"checkbox";defaultValue:0.0;>;
// This parameter just gets poked with the rendering dimensions, always
// Doesn't get shown to user. In my custom viewer, that is.
parameter float2 dims<kind:"dstsize";defaultValue:float2(300,300);>;
// "point" means it lives somewhere in the image, as a coordinate.
parameter float2 lineStart<kind:"point";minValue:float2(0,0);maxValue:float2(400,400);defaultValue:float2(10,10);>;
parameter float2 lineEnd<kind:"point";minValue:float2(0,0);maxValue:float2(400,400);defaultValue:float2(30,100);>;
parameter float lineWidth<minValue:0.5;maxValue:30.0;defaultValue:2.0;>;
I’ve added a kind property to some of the parameters. Pixel Bender ignores it, but in ActionScript we can access it as part of the ShaderData. For example, it is true that shader.data.spotSquare.kind == "checkbox".
These aren’t special or magic! My Pixel Bender kernel says it, and my Flash viewer reads it. It’s a handy trick, if you happen to be in control of both parts.
How to Draw a Circle
It’s so easy! Given a center and a radius, you check each pixel to see if it’s within that distance of the center. Like so:
float d = distance(co,center);
if(d < spotRadius)
dst = spotColor;
How to Draw a Square
This is ever so slightly trickier. Again, with a center and a radius, we want to see that both the x- and y-distances from the center are within the radius. Like so:
float d = max(abs(co.x - center.x),abs(co.y - center.y));
if(d < spotRadius)
dst = spotColor;
How to Draw a Line
Now this is getting mathy. In an earlier post about Gradient fills, I derive an equation for “position between two points”, like so:
t = dot(uv,xy) / dot(xy,xy)
where a line segment is given by the endpoints (0,0) and (x,y), and some screen spot is given by (u,v). If t is within the range 0 to 1, then (u,v) is somewhere along that line segment if it’s drawn infinitely wide. That’s a short stubby line no matter how you slice it.
To constrain the width of the line, we need to know how far from the center (u,v) is, which is given by:
d = abs(length(xy) * dot(uv,yx) / dot(xy,xy))
(If you followed the Gradient post, it’s the right half — the y-component — of the final 2×2 matrix, times the length of the line, for scaling. But it’s not important.)
So, the combined code to draw a line between two endpoints, with a particular line width, and square-capped ends, is:
// and now, a bit of fun math, as we plot a line between two points.
float2 uv = co - lineStart;
float2 xy = lineEnd - lineStart;
float xy2 = dot(xy,xy);
float g = dot(uv,xy) / xy2;
// if we are between the two points, then g is between 0 and 1.
float dl = abs(dot(uv,float2(-xy.y,xy.x)) / xy2 * length(xy));
// dl is now the distance, in pixels, from outCoord to the line
// if we're between the endpoints and close enough, draw.
if(g >= 0.0 && g <= 1.0 && dl < lineWidth / 2.0)
dst = float3(1,0,0); // draw the line in RED.
Ridiculous?
To reiterate: This is a ridiculous use for Pixel Bender. But the ideas may come in handy. Doing something with a squarish area-of-influence isn’t so outlandash… and while a solid-colored line is a bit unsubtle, a shaded field or beam area begins to seem plausible. Pixel Bender is so powerful and flexible, I know we’re going to continue to see unexpected and novel results from it.