Degrafa – Dynamic Knot Generation

Previous Bezier Spline examples have illustrated how to draw a spline directly with pre-generated data in MXML.  In some applications, it is desirable to define the Bezier Spline in MXML, but generate knots (control points) dynamically.

The following diagram shows our infamous arrow generated one segment at a time.

Bezier spline drawn one segment at at time
Bezier spline drawn one segment at at time

The demo allows one knot to be added or deleted (starting with the minimum of three) until the full set is defined.  You may optionally close the spline to complete the drawing.  Once the spline is closed, however, it is not recommended to remove and add knots because of the internal bookkeeping inside the Bezier Spline.

The control points are dynamically redrawn based on the internally generated propertyChange event, which also controls the spline redraw.  This should illustrate the basics of defining a spline in MXML and dynamically generating knots via script.  Download the MXML file here.

Keanu Barada Nikto

If you’re a fan of classic sci-fi, you can probably tell I recently went to see The Day the Earth Stood Still (remake).  I’ve waited a few days to cool down before writing a brief review.  The operative phrase here is ‘fan of classic sci-fi’, meaning that if you want to modernize a remake, then modernize the remake.  Instead, the producers just created Day After Tomorrow II, masquerading as a remake of TDTESS.

I did appreciate attempts to explain how an alien being goes through the process to take on a human form in order to communicate with the species.  I suppose it does make sense that Klaatu would have a flat, almost deadpan personality since the subtle nuances of human emotion would be difficult to comprehend.  Let’s also go out on a limb and give Reeves reasonable marks for a good performance in this regard.

I also appreciated the chalkboard scene reappearing in the remake as that was one of my favorite scenes in the original.  Speaking of appearing in the original, the producers have been rightfully skewered in reviews for not making the safe phrase ‘barada nikto’ more prevalent in the remake.  That’s kind of like making a Superman movie without the ‘S’ symbol on his chest.

Supposedly, it’s there, right after Klaatu is shot by the dumb-ass military (didn’t they see the original?), just before Gort starts to open a can of cosmic whoop-ass.  But, it was mechanically dubbed in a manner that is almost unrecognizable.  And, some research indicated that it was not even in the original remake script.  How can you even approach a remake with this attitude?

Also gone in the remake’s script is the fundamental concept of the original in that it is the human’s potential to spread their destructive tendencies into space (and hence other planets) that is the reason behind the alien’s intervention.  Very timely in the original as it tied the fear of nuclear proliferation into the birth of the space age.  Also possibly timely in the remake given the plans to return to the moon and use that as a base of operations for both mineral extraction and missions to Mars.

Instead, Klaatu just swoops into NY ready to start the extermination process.  Just get rid of those pesky humans.  But wait, let’s check in with my homie that’s been here for a few decades just to see what’s up.   Well hold on there … if he’s been here all that time, couldn’t he just file a final report while Klaatu was en route (or before he left)?   And what up with the meeting at Mickey D’s?  If you want to exterminate the humans, forget GORT, just let them continue eating McFood.  Might take longer, but it will get the job done.

And, this time around, GORT is named by the humans, not the aliens.  Apparently, he’s been taking steroids since the 1950’s as well and can decompose himself into nanobots.  Pretty iteresting, but not enough to overcome some of the terrible characters (i.e. the kid – you know what I’m talking about if you wasted $$$ on this flick) and what is probably the worst sci-fi remake since Lost in Space (which should have never been remade in the first place).   The Earth ‘standing still’ was implemented almost as an afterthought in the remake instead of the high point of the original (in which it was brilliantly implemented).

So, if you are a fan of classic sci-fi and have not seen the flick, then I just gave you the safe-phrase (Keanu Barada Nikto) and saved you from some disappointment.  Spend your money this Christmas season on helping someone in need instead of this flick.  Maybe it will keep Klaatu and Gort away a while longer 🙂

More Hybrid Tests

I’ve been conducting ongoing hybrid tests on my Prince Speedport Black Team.  The incumbent is Babolat Pro Hurricane Tour 17 on the mains and NXT Tour 17 on the crosses @57.  I tried ALU Power Rough on the mains and had to work a bit to get the tension right.  Seemed like the best approach was to drop the tension on the mains as is widely recommended and string the crosses a few pounds higher than the mains (depending on how much tension loss you expect on the crosses).  You will have to work a bit to get the right combination.  Seemed to provide a bit more control, but I didn’t get quite the response I liked with the other combination.  Interestingly, the ALU Power Rough did not seem to provide any more spin than the Pro Hurricane Tour.

My current combination is Pro Hurricane Tour 17 on the mains and xCel Power on the crosses.  Upped the tension to 58 to see if 57-58 is really the upper bound.  I hit extensively on the ball machine (indoors) on my recent Houston trip and at first the response was a bit flatter than my previous favorite.  After 2-3 full rounds on the ball machine, I started to get the response I wanted.  Get the tension right and this is looking to be a potent hybrid for this particular racquet.  On restringing, I’m going to stick with 57 and it seems like it takes this hybrid a bit of ‘break in’ time, whereas I was ready to play with the Pro Hurricane Tour/NXT hybrid immediately after it came off the stringer.

New Degrafa Math Utilities

If you update your code base from SVN, there should now be a com.degrafa.utilities.math folder with some new goodies.  These are low-level math utilities that will be used in upcoming advanced versions of the quad/cubic Bezier classes and Bezier utilities such as closest point to a quad/cubic Bezier.

Current methods include

Bisect – classic bisection algorithm for locating a root within an interval

Gauss – Numerical integeration using Gauss-Legendre

Newton – Simple implementation of Newton’s method

Halley – Simple implementation of Halley’s method

SimpleRoot – AS3 port of Jack Crenshaw’s TWBRF

Solve2x2 – Solve 2×2 systems of equations using Cramer’s method, with support for caching determinant.

A simple test program (MXML file) illustrating the usage of these methods can be downloaded here.  These are very low-level utilities that will be used in future Degrafa development and may be of value to advanced users.

Degrafa Tutorial – Multiple Targets and Transforms

One of the many features I like about Degrafa is the ability to draw the same object in multiple targets.  Let’s take our friendly arrow spline from the introduction to spline series.  If an arrow is worth drawing once, we know the design team will eventually want to draw multiple arrows 🙂

This is a beginner tutorial on how to draw into multiple targets and add a simple rotation transform.  You should understand how to setup a Flex project and work with Degrafa.  Since this example works with splines, you will also need at least Degrafa Beta 3.

If you followed the introudction to splines series, you noticed that the ‘target’ that Degrafa draws objects into was actually an array.  This allows multiple targets to be specified for the same drawing.   Give the following code a try,

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=""
   layout="absolute" >

<LinearGradientFill id="myFill">
  <GradientStop color="#666"/>
  <GradientStop color="#FFF"/>

<BezierSpline id="mySpline"
 graphicsTarget="{[target1, target2,
 target3, target4]}"
 verticalCenter="0" horizontalCenter="0"
 data="20,10 20,30 10,30 30,50 50,30 40,30 40,10"

   <SolidStroke weight="2" color="#000"/>

   <RotateTransform registrationPoint="center"


<mx:Canvas width="500" height="500" >
 <mx:Canvas id="target1" width="250" height="250"
   borderColor="#CCCCCC" borderStyle="solid" />
 <mx:Canvas id="target2" width="250" height="250"
   borderColor="#CCCCCC" borderStyle="solid"
   x="250" y="0" />
 <mx:Canvas id="target3" width="250" height="250"
   borderColor="#CCCCCC" borderStyle="solid"
   x="0" y="250" />
 <mx:Canvas id="target4" width="250" height="250"
   borderColor="#CCCCCC" borderStyle="solid"
   x="250" y="250"/>

 <mx:HSlider id="rotateSlider"
   value="0" />

In comparing this to the original spline example, notice that four separate targets are specified,

graphicsTarget="{[target1, target2, target3, target4]}"

A slider has been added whose value is bound to the angle property of a rotation transform,

   <RotateTransform registrationPoint="center"

Since the transform is applied inside the BezierSpline tag, it is applied to the spline drawn into each individual target. As the transform is modified, the modification is propagated to all targets without any direct action on your part.

Notice that the original arrow is drawn pointing downward. The following screen shot shows how all four arrows are modified by the slider (some of the screen space was cropped to save space here).

Degrafa Spline - Multiple Targets and a Transform
Degrafa Spline - Multiple Targets and a Transform

That’s all you need to do to draw multiple copies of the same item and manipulate all of the targets with a single transform. Experiment and have fun!

Degrafa – Introduction to Splines Part X

Continuing from Part IX, one of the features of building the Bezier spline with cubic segments (individual cubic Bezier curves) is some flexibility in how the control cages are constructed.  The mathematical details are discussed in this TechNote.  At a high level, consider the spline as a rope that is passed through rings at each knot.  Suppose you could ‘pull’ on the rope at any ring.  What would happen to the rope?

We would expect the rope to get tighter and tighter until it reached some point that it could not be pulled any further (without breaking).  Intuitively, we would call this tension.  Bezier curves (individual or composite) do not naturally have tension parameters (as say a cardinal spline).  We can fake a tension setting as a natural consequence of assigning control points.

In the Singularity Bezier spline, the tension setting is a map of a tension scale to parameter values.  The tension scale varies from 1 (loose) to 5 (tight).  The internal parameter map is open for experimentation and some limitations are discussed in the above TechNote.

From a usability standpoint, all the average user need be concerned with is the tension setting from 1-5.  The default value is 1, which can be thought of as having the rope pass ‘loosely’ through the rings.  On average, the spline appears to have more curvature when passing through the knots.

The tension parameter is exposed to MXML, and the following illustrates setting to it maximum value of 5,

<BezierSpline id="mySpline" graphicsTarget="{[theTarget]}"
 verticalCenter="0" horizontalCenter="0"
 data="200,100 200,300 100,300 300,500 500,300
  400,300 400,100"
 fill="{myFill}" autoClose="true" tension="5">

producing the following drawing.

Cubic Bezier Spline with Maximum Tension
Cubic Bezier Spline with Maximum Tension

As you work through the code, you may notice a parameter or two such as ‘quality’ that appear to have no effect on the output.  This parameter in particular was an artifact of the Singularity cubic Bezier spline that was built on top of the FastBezier class.  The quality parameter controlled the number of subdivision steps (used to approximate the cubic Bezier with a small number of quadratic Bezier).  This parameter allowed render quality to be traded for performance.  It will be removed from future versions of the Degrafa Bezier Spline.

This completes the basic introduction to splines in Degrafa.  Future posts will provide demos of more advanced usage of the Degrafa splines and illustration of new features as they are added.