An Extension

Well, this is what every contractor likes to hear – “you’ve been extended.”  Although relatively short, it means that between the gig, taking care of family, and supporting users of the Freehand Drawing Library, my lack of blogging will also be extended for a while.

On a personal note, I hope to get back into tennis after being out of practice since April due to a foot injury.  Looking forward to hitting this afternoon instead of just watching the US Open 🙂

Function Graphing Update Part II

I’ve been very quiet over the last few months, and for good reason.  Just finished a gig involving two pretty complex learning applications for physical science.  I worked on one as a primary developer, and the function graphing engine I authored was used in another.  This is the first of a couple posts summarizing the work before returning to development of the Freehand Drawing Library.

The prior update on the function graphing engine was summarized in this post. This particular learning application involves chemical reactions and equilibrium.  A simulation is started in one tab, as shown below.

Depending on the simulation length, a substantial number of molecules may interact in a single time step.  Clicking on the Graph tab shows a real-time line plot of the state of various reactions.

The x-axis is time steps and the programmer plots the most recent N steps.

A new addition to the graphing engine is the ability to adjust x- and y-axis bounds and tic marks independently.  This provides highly customizable zoom capability.

The graph may be panned by dragging, and panning is setup in XML to be restricted to the first quadrant.

This was a very interesting project both because I enjoyed working with the other application developer and to see a cool use of the function graphing engine.

TinyTLF 2 Explorer App

Paul created a cool demo to explore some of the new features in TinyTLF V2.0 (still in beta).  The circular region demo (yes, we can do the equivalent of CSS Regions right now in Flash) has been expanded.

Check out the blog post here and enjoy!

Update:  For those who have asked, a new version of the demo with text constrained by spline boundaries is in the works, but scheduled for after the V2 formal release.

TinyTLF 2.0 is in Beta

I’ve given several Freehand drawing demos on my iPad-2 here at MAX, but one of the things I’ve failed to mention is the impending release of TinyTLF V2.0.   You can read about the new features and implementation details here.

Paul and I recently collaborated on another organic text layout demo.  I really like it when Paul does all the hard work and I come in at the tail end and wrangle some equations (a bit of analytic geometry).  Where do I get more gigs like that?

Anyway, here’s a demo of the new layout algorithm for organic text.  Given the even lighter weight of the 2.0 code base, I’m envisioning a lot of interesting mobile 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" />

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" />

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 id="deriv"
<lineMetrics thickness="2" color="0xff0000"/>

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" />

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" />

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 id="myMarker"
derivedFrom="cubic" params="marker:test.symbols.TangentMarkerSymbol,rolloverColor:0x9ACD32,digits:2" derivedParams="x-coord:1" >

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.

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

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.

<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"/>
<text offset="2" >left</text>
<lineMetrics thickness="2" color="0x9933CC" alpha="1" lineStyle="line_solid" />
<text offset="2">below</text>
<lineMetrics thickness="2" color="0x9933CC" alpha="1" lineStyle="line_dashed" dashWidth="6" dashSpacing="4" />

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.

<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 id="region2"
fill="none" points="0,0 0,-3 +inf,-3 +inf,0">
<lineMetrics thickness="3" color="0xff0000" alpha="1" />

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 id="quadHighlight" derivedFrom="quad" params="direction:above,color:0xff0000,alpha:0.2" />

Recent Work XML Map System

This is a brief overview of a project I’ve been working on for an Agency client.  This client does a lot of work with interactive applications involving navigation between ‘views’ and ‘frames’ of individual views.  Sometimes, the views correspond to geographic maps, although the images are highly artist-stylized (otherwise we could just use Google/ESRI).  In some applications, the views might correspond to a floor plan or concert hall.  Each new view represents a different snapshot (revealing more detail) of some larger perspective.  We loosely use the term ‘map’ to refer to each view, although programmatically, a view is nothing more than an image.  Frames of a view correspond to rectangular regions having the same aspect ratio as the main ‘map’ window.  Views may have interactive ‘hotspots’, clickable ‘icons’, and animated overlays associated with them in addition to arbitrary framings.  If map projection information is available for a view, icons may be geo-coded.

Instead of developing each such application from scratch, the client wanted a class library, Flash ‘template’ and XML data structure to help organize each application into a common structure.  This provides numerous benefits in addition to code re-use.  Decoupling visual assets from the primary application facilitates easy distribution of design/development workflow among multiple people.  Structuring view/frame layout in XML allows non-coders to make simple changes to the application without touching code.  The system employs a template .FLA (this agency works only with Flash) and base Document class that encourages commonality among all applications using this ‘map system.’  This makes it very easy for one person to learn the application structure and quickly help on another application without having to deconstruct another person’s code and decipher library assets.  The map system employs an internal transition engine that is programmed to an interface, not any specific implementation.  This allows transitions to be coded once and then re-used by simply including the transition in the XML and linking it to a view transition by id.  Artists may experiment with different view transitions and parameters simply by editing XML.  Framing and frame transitions are an interesting exercise in analytic geometry.  These are handled internal to the system by a general-purpose zooming engine.

The template .FLA allows a designer to position the ‘map’ application by placing a blank MovieClip on Stage.  Since all such applications begin with a common, base template, the clip already resides on Stage for the artist.  The widow size is set in XML.  The system itself handles internal preloading of the application and all map assets.  The lead developer extends the base Document class to override event handlers and add any application-specific logic outside the map.  Some of the wiring with regard to hotspots and other interactive elements is handled in XML.  Printing is automatically integrated into the system.  Either the map or the entire Stage may be printed and print parameters are assigned in XML.  Modality is also automatically handled internal to the system and exposed to the application developer via the system API.

Unfortunately, I can’t show the XML or even discuss the code in detail as it’s proprietary, but here are some screen shots shown views/framing, hotspots, and animated overlays.

Interactive Hotpots

This application involved a very complex transition between views.  Once coded, however, the parameters can be modified in XML and re-used in other map applications simply by including the transition class in the XML and assigning it to a view transition via id.  Hotspot interactivity is wired into the main application in XML as each hotspot graphic is associated with a class extending MovieClip inside the system.

Baseline framing of a view

This application used only one view with many framings/overlays.  Frame transitions are handled internally by the zoom engine.  After specifying the framing (rectangle coordinates), the designer sets the transition time in seconds in XML.  The application developer initiates the transition from the Document class.  A default handler is always overridden to implement app-specific functionality after each transition completes.

Framing of a View

Although the term ‘map’ is used to describe the system, the manipulation of views/frames is generic and does not necessarily pertain to geo-coded data.  In addition to the numerous coding challenges (including being forced to debug/develop using the Flash IDE), I enjoyed the practical application of analytic geometry in this project.  I can only hope that the client is open to extending this system to work with AS only projects in FlashBuilder in the future 🙂

AS3 Developer Position in Houston

One of my best clients, an agency in Houston, has an opening for an AS3 developer.  If you are available and in the Houston area (locals strongly preferred), then send me an email at theAlgorithmist[at]gmail[dot]com.  You should have the following background.

A firm foundation in OOP and event-driven programming with demonstrable expertise developing highly interactive applications in AS3.  You should know something about basic design patterns.  Flash 10 experience is a bonus.  Mobile is an even bigger bonus, but not a requirement.  You need to have experience in creating reusable components and helping designers with modest scripting skills create visual elements to be integrated into a larger application.  You also need to know how and when to hack something quick to make a deliverable on a short time frame.

Flex/FlashBuilder IDE experience is valuable, but not required (i.e. creating Actionscript projects and integrating visual content created by designers using Flash CS4/CS5).  Flex framework experience is a bonus but not required.

Any experience you have using third-party AS3 libraries and extending them to create new functionality is highly desirable.  You will be required to work with such libraries developed by me 🙂

Don’t send me a resume.  Resumes are B.S. documents created for HR people and managers that want buzzwords and other B.S.  Show me an online blog/portfolio or something that demonstrates your skills.  Then, we’ll talk.  I will forward promising candidates onto my client.

I’ve worked with this company for over six years and can vouch that although an agency environment can be challenging, these people are absolutely great to work with.  Looking forward to hearing from you.

TinyTLF A Micro-Text Layout Framework

If you haven’t been following Paul Taylor’s work on TinyTLF, then check out the latest example of his work here.  Having wrestled with the Adobe TLF in the past, I’m a big fan of TinyTLF.  You will also find some good introductory tutorials on the FTE at Paul’s blog, so plan on spending some time there.

And, in the event you might be going to 360|Flex, might have a little something-something for you to look at there 🙂  See you in D.C!

Near-term Gig in D/FW Area

If you are a solid Flash developer and looking for a short-term gig in the D/FW area, I’m trying to help a friend at a recruiting firm fill a position.  As I understand it, the gig is with a retailer and involves all the usual suspects ranging from connecting to a back end, integrating with a file uploader, lots of UI interactivity, etc.  If you are immediately available and have a demonstrable portfolio, please contact Ben Hollingsworth at The InSource Group, ben[at] .  Ben is an awesome guy and InSource is great to work  with, so jump on this if you have the required background.

FYI – Seems like most of the work can be done at home, but there is a need to meet and interact with the client on site.  Good luck!

Trigonometric Parameter Model

The question that generated this topic was very similar to a problem I worked on recently. It deals with the trend of the last few posts on creating simple models that fit data. Suppose we have a parameter, z. It does not make any difference what z is; it could be depth or some other value. Suppose an object moves along a path parameterized by some angle, Θ, in [0,2∏].  The maximum value of z is given as zmax. An additional parameter, α, is defined with α in [0,1]. This is used as a multiplier onto zmax to describe the fraction of that value that must be obtained at certain angles.

A model, f(Θ), is to be created that fits the following data.

f(0) = αzmax
f(∏/2) = 0
f(∏) = azmax
f(3∏/2) = zmax
f(2∏) = f(0)

The model is symmetric moving from 3∏/2 to ∏. The general tendency among programmers is to immediately jump to a linear model for any parameter. The person submitting this question had normalized the angle to [0,∏/2], then had a series of if-statements to determine the parameter value.  Next, the parameter value was modified again based on the quadrant containing the actual angle. The question was whether or not a more compact approach was possible.

The answer depends on whether we can find a base function that has the necessary values at the prescribed data points and behaves in a ‘reasonable’ manner as the angle varies across its domain.  In this case, I looked as the cosine function as a starting point.  The absolute value of this function is 1 at Θ = 0 and decreases to 0 at Θ = ∏/2 and then increases back to 1 as Θ increases to ∏.  It does so in a manner that was similar to the sequence of linear approximations modeled by the if-then-else blocks from the person submitting the problem.

A base model in [0,∏] might look like αzmax|cos Θ| .  Fortunately, as Θ moves from ∏ to 3∏/2, the increase in f to zmax can be modeled like a reflection about the horizontal axis. So, we can create a relatively compact model by

1 – normalize the input angle into [0,2∏) – note the open interval at the end
2 – compute p = αzmax|cos Θ|
3 – for Θ in [0,∏], f(Θ) = p, otherwise f(Θ) = zmax – p

Of course, like any other model, this one needs to be tested to see if the parameter values are reasonable for values of Θ other than the ones used to fit the model.  Usually, this is based on some aesthetic criteria.  I hope the exercise shows how to think about such problems in a manner other than breaking the input into a small range, using linear interpolation inside that range, then modifying the value based on quadrant.