Time Texuring - The Source
How it works
The source provided should be heavily documented, but I will explain exactly how this all works. But first a back story on how bezier lines work.
With a bezier line, you can give it 2 points and be able to draw a line between those 2 points based on time; t represents time.
x = px1*(1-t) + px2*t
y = py1*(1-t) + py2*t
Screen pixel position = x , y
Bezier lines are drawn from 0 to 1, and anywhere in between.
If you replace t with .5, you will come up with an x and y position half way through the line. What you want to do than is, cycle through multiple times to be able to draw a line. Lower numbers advance the line in smaller steps. Example. t starts at 0 then stepping .01 .02 .03 .04 … until 1 is reached.
As you can see, if you have a line that was exactly 100 pixels apart, it would take 100 iterations to get to 1. Problem is, when you have a line that’s only 10 pixels apart, drawing a dot 100 times to get 10 pixels is not ideal. In that case, you can divide 1 by 10 and you only step 10 times, or 0 … .10 … .20 … .30 … 1.
But those examples assume your line is going either up and down or left and right. Drawing a line at an angle complicated matters. In that case you can get the distance between those 2 points and divide 1 by distance.
The distance between two points goes as follows.
Distance = square root of (((px1 - px2)*(px1 - px2)) + ((py1 - py2)*(py1 - py2)))
You have to understand this because when I draw my triangles, I need the distance between the 2 base points in my triangles. I then draw my lines from the first point, to the point in time along the base of the triangle.
This is why this routine is not that efficient, you are literally redrawing the same pixels at the top of the triangle, more than what’s needed. That’s where more optimization is needed.
But you may be saying, but that’s how you draw a triangle. That’s true, but if you take that same triangle, and convert those same points into U.V coordinates, you will be able to pick off the colors from the texture.
Each triangle should have a reference to a U.V coordinate which represents where the texture points are. U.V is normally stored as a value from 0 to 1. Lets say you have a texture that is 256×256 (0..255 x 0..255). Just like with the bezier line, .5 equals 128, and .25 equals 64, while 1 will come out to 255.
What if instead of drawing a triangle to the screen, we converted the U.V coordinates to the real value and grabbed a color from the texture. To get the U and V you multiply U * width and V * height. Your bezier equation is now:
x = u1*(1-t) + u2*t
y = v1*(1-t) + v2*t
texture pixel position = x , y
Everything now matches up, .5 on the triangle to the screen is the same as .5 on the triangle from the texture. In the end, you are drawing multiple lines from the first point of a triangle to the base point in time of points 2 and 3 of the triangle. All the while converting your screen pixels to the same place in time on the texture map.
Copyright David Fawcett 2007 fawzma.com
