When I said I’d post part 2 “soon”, I really meant, “I’ll totally forget about posting it for four months and then post it soon”. Without further delay then, dynamic tessellation (part 2) and a tech demo called BezzyDemo.

Dynamic Tessellation, Part 2

Part 1 went through the initial attempts at dynamic tessellation. They were good but I wanted to do better. Turns out, doing better is really hard. I ended up using a really simple algorithm that works well most of the time, but still isn’t as “perfect” as I wanted.

The algorithm works like this:

segment bézier curve into 4 edges
change = true

while (change)
{
   change = false

   for (each edge)
   {
      if ( edge.length > THRESHOLD )
      {
         change = true
         split the edge in half
      }
   }
}

Basically, we start off with 4 edges, and tessellate the curve until no edge is longer than THRESHOLD pixels. Using a small enough value for THRESHOLD (I used 8.0) ensures that the curve will appear be smooth when rendered. The problem with this method is that it doesn’t work well for small paths. Given a path that is small enough, a complete change in slope can happen within 8 pixels. This method would most likely skip the slope entirely, thus not really rendering the curve correctly.

I suspect a better solution would be to combine the threshold idea presented here with the methods I discussed in Part 1.

BezzyDemo

BezzyDemo tied it all together. The idea was to do something subtle. Not too flashy, not too complicated, but pretty, in that abstract art kind of way. It also had to show off all the features of Bezzy. I’ll let the result speak for itself.