The Blog is Back!!!

After many years of maintaining the algorithmist.net domain (and a business blog on that site), the cost-effectiveness of that effort in combination with the meteoric rise of social media has led me to let go of that domain.

My primary online presence is now my LinkedIn Profile.  This is a quick post to inform past readers to expect new content here based on my efforts since May 2015 to focus almost exclusively on Angular/Typescript development.

And yes, just like before, … there will be math!

Please note that some of the older posts may contains links to the old site (Flash/Flex projects) that are no longer valid.  If there is sufficient interest, I will try to re-create these in Angular/Typescript and place the repos in my GitHub.

Thank you.

 

Dragging Bounds After Rotation

Ah, finally!  Some code to give away!  I was recently asked to develop a prototype for a friend.  I don’t mind helping someone out, but my general policy is that if I do something free for one person, then I do it for everyone.  All such developments are performed with the understanding that I reserve the right to post results to my blog.

This particular prototype dealt with simple dragging inside bounds with the twist that the rectangular item (most often an image) could be rotated about its upper, left-hand registration point yet still dragged only within the prescribed bounds.  This was accomplished with a DraggableItem class that extends MovieClip.  The visual symbol is associated with an instance of this class.  Rectangular bounds are assigned and the DraggableItem class dispatches events on start drag, end drag, and collision with a boundary.

Bounds are in parent space and the DraggableItem rotation method recomputes the axis-aligned bounding box after rotation.  The demo draws the AABB during rotation.

The computations are a simple application of trig and the entire demo could be ported to a number of environments.  I may convert this to html/js and deconstruct the math in a subsequent series of posts.  In the mean time, realize that like most demos, this one was created hastily and only lightly tested.  Documentation is sparse, so you are on your own for the deconstruction.  There may be an issue or two that requires polishing (for example, you can rotate the visual symbol beyond bounds) and I invite people to make this demo better.  That’s what open source is all about 🙂

View demo

View source

Use of Singularity in Scrutinizer

In 2004, I had an idea to write a series of TechNotes to help developers obtain a basic understanding of principles in computational geometry.  I also decided to start a blog and authored a small AS library to go along with the material.  It seems that so many people turn to high-priced books for information and I simply wanted quality material to be available for free.

The Singularity library began in AS2 and was eventually ported to AS3.  Although never intended for commercial use, I now have dozens of requests for use of the library in commercial applications.  One recent application was in a set of new features for a product called Scrutinizer ™.

The upcoming release will use the arc-length parameterized quad. Bezier to draw dashed arcs.

While the Singularity package is no longer available (its capability ported to and expanded upon in Degrafa), I’m glad that a lot of people learned something new and applied it to actual applications.

Recent Work XML Function Graphing Engine

I’m in the process of creating permalinks to some significant recent projects, so I would be remiss not to include what I consider to be the most extensive project I’ve worked on in the last couple years (not to mention the most fun).  The AS3 function graphing class library allowed layout and many graphing details to be described in XML.  Perhaps the most unique feature of the library was the high level of interactivity.  The library supports multiple zoom levels (bounds of each zoom level specified in XML) and unlimited panning via dragging the graph display.  The code automatically redraws axes, labels, function graphs, and overlays while dragging.

A simple. blank graph (with default control panel) is shown below.

created with the following XML

<learningObject id="graph" x="0" y="0" width="100" height="100" display="{ALL}" graphType="" pannable="true" lockZoom="true" sampling="auto" hideControlsOnShapshot="true" >
<controls id="myControls" x="0" y="0" />
<learningObject id="background" />
<learningObject id="grid" />
<arrows color="0x000000" length="10" width="8" alpha="1" curvature="5" />
<learningObject id="title" />
</learningObject>

A robust library of predefined functions (AS3 classes written to a specific interface) exist to rapidly plot common functions over arbitrary open/closed intervals as shown in the following screenshot.

which is created from the following XML

<function id="complexStepfunc">
<lineMetrics thickness="2" color="0xff0000" />
<data d1="closed" d2="open" radius="4" openFill="0xffffff">
<interval left="-inf" right="-1" functionClass="graphing.functions.library.Polynomial" functionParams="-3,1,2" />
<interval left="0" right="10" functionClass="graphing.functions.library.SineWave" functionParams="a:2,b:1,c:1" />
</data>
</function>

More complex displays are created by deriving a function from another function. One simple example is the derivative of a function. All functions in the base library evaluate their first and second derivatives (or indicate that no such definition is available in which case derivatives are numerically approximated). The following example shows the plot of a cosine wave and its first derivative.

created with the following XML

<function id="cosine" >
<lineMetrics thickness="2" color="0x0000ff"/>
</function>
<function id="deriv"
derivedFrom="cosine">
<lineMetrics thickness="2" color="0xff0000"/>
</function>

The concept of derived functions allows a wide variety of plots from a single base function. The following example shows the plot of a tangent line that can be derived from any base function.

and its associated XML

<function id="tangentLine"
derivedFrom="cubic" params="length:auto" derivedParams="x-coord:1" plotType="LINEAR">
<lineMetrics thickness="2" color="0xff0000" />
</function>

I must admit that my favorite function display is freeform. Many functions are not re-used enough to support creating a function display class to fit into the graphing engine. Instead, these functions can be described in a calculator-like syntax with arbitrary parameters such as a, b, c, etc. Specific parameter values describe a unique plot of a family of functions as shown below.

and the XML

<function id="freeForm1" params="1,-1,2,1">
<data vars="a,b,c,d,x" function="a*x + b*x^2 - 3*sin(c*x) + d*x^3" />
<lineMetrics thickness="2" color="0xff0000" />
</function>

A variety of ‘overlays’ are supported in the engine. The simplest is an interactive Marker or draggable visual symbol that follows the trace of a function. An example is shown below.

created from the following XML

<function id="cubic"
params="3,1,-1,0.5" plotType="LINEAR">
<lineMetrics thickness="2" color="0x0000ff" />
</function>
<function id="myMarker"
derivedFrom="cubic" params="marker:test.symbols.TangentMarkerSymbol,rolloverColor:0x9ACD32,digits:2" derivedParams="x-coord:1" >
</function>

On rollover, a tooltip-style displays shows the numerical value of the function and its first derivative.  Custom Markers are created by extending the Marker class.  The base library includes TangentMarker and SecantMarker classes that display a Marker along with tangent and secant lines.

Probes represent interactive overlays that are bound to the graph dimensions, not any specific function. On drag, they continuously dispatch a (bubbling) custom event, allowing information to be computed and displayed that depends on the current horizontal or vertical probe location. A horizontal Probe is shown below.

<probes>
<learningObject id="horProbe" y="-1" snap="0" color="0x000000" thickness="2" updateOnSnap="true"
symbol="test.symbols.Probe1Handle" showAllHandles="true" tipID="probe1" >
</learningObject>
</probes>

The MarkerProbe is an interesting overlay that has attributes of both a Marker and Probe. Its display is derived from a specific function, as shown in the following diagram and XML.

<probes>
<learningObject id="markerprobe"
x="0.5" snap="0" color="0x000000" thickness="2" updateOnSnap="true"
symbol="test.symbols.Probe1Handle" showAllHandles="true" derivedFrom="cubic" tipID="probe1" >
<params horVisible="true" vertVisible="true" />
<marker symbol="test.symbols.TangentMarkerSymbol" rolloverColor="0x9ACD32" digits="2"/>
<horizontalLine>
<text offset="2" >left</text>
<lineMetrics thickness="2" color="0x9933CC" alpha="1" lineStyle="line_solid" />
</horizontalLine>
<verticalLine>
<text offset="2">below</text>
<lineMetrics thickness="2" color="0x9933CC" alpha="1" lineStyle="line_dashed" dashWidth="6" dashSpacing="4" />
</verticalLine>
</learningObject>
</probes>

ShadedRegions are rectangular regions (some of which may extend infinitely) designed to draw attention to specific regions of the graph. Infinite regions are drawn as such when the graph pans as shown below.

<shadedRegions>
<learningObject id="region1"
fill="0xffcccc" alpha="0.5" points="0,1 0,3 4,3 4,0 3,0 3,1" >
<lineMetrics thickness="1" color="0x0000ff" alpha="1" />
</learningObject>
<learningObject id="region2"
fill="none" points="0,0 0,-3 +inf,-3 +inf,0">
<lineMetrics thickness="3" color="0xff0000" alpha="1" />
</learningObject>
</shadedRegions>

Highlights can be considered a non-rectangular type of ShadedRegion that are bound above or below by a function. These are used to emphasize the geometry of the area above or below a function.  Since these overlays are bound by a function, they must be derived from a function in XML.

<function id="quad"
params="-3,1,2" plotType="LINEAR">
<lineMetrics thickness="2" color="0x0000ff" alpha="1" />
</function>
<function id="quadHighlight" derivedFrom="quad" params="direction:above,color:0xff0000,alpha:0.2" />

Papervision for Golf

I went through my golf craze in the 90’s and eventually worked my way to a single-digit handicap.  Although I don’t play any more,  I remember a lot of famous courses and holes, including the 15th hole at Bethpage.  At US Open green speeds, this setup is diabolical, but you can’t really get an appreciation for the difficulty of a hole from a few TV shots.  So, I was really interested when I saw this post from Carlos on a 3D recreation of that hole.   Papervision fans should enjoy the 3D and golfers should gain additional appreciation for the difficulty of the hole.