Archive for January, 2012

Arrowed Arcs in Freehand Drawing Library

January 31, 2012 Comments off

As promised, arrowed (quadratic) arcs are now in the Freehand Drawing Library.  They use the same two-point stroke as arrowed lines, but a different drawing engine.  Since three points are required to draw a quadratic arc, the free constraint is automatically computed based on a curvature parameter and a multiplier of the segment length between the two endpoints.  The curvature parameter controls whether the curve is concave upward or downward and the multiplier controls the overall general curvature (i.e. smaller values produce overall flatter curves).

A screen shot is provided below.

Start and end arrows are optional, so the ArrowedArc engine offers a back-door to creating simple quadratic arcs.

Lines and arcs use the same stroke, i.e.

import net.algorithmist.freehand.twopoint.TwoPoint;

private var __stroke:TwoPoint = new TwoPoint();

Simply inject the desired stroke engine,

__data.drawingEngine = “net.algorithmist.freehand.engine.ArrowedArc”; = __data;

Then, draw and have fun.  I have not yet coded arc decorators, so only solid-line arcs may be drawn with the current beta.

I’ll add one more stroke to the library before RC1 and hopefully blog about it some time next week.  Thanks for your inquiries to date!

Arrowed Lines in Freehand Drawing Library

January 26, 2012 Comments off

Drawing lines does not sound very interesting, but in addition to my own app. development, another user expressed a desire for animated arrowed lines.  So, a new two-point stroke has been added to the library.  The TwoPoint class is the base for a family of classes in which a stroke is defined only by a starting point and the current mouse/touch point.

In keeping with the FDL architecture, an engine is assigned to a two-point stroke.  Two engines will be provided in the first release candidate, arrowed lines and arcs.  The start and end arrows are optional, so these engines provide a back-door to drawing lines and arcs.  Not sexy, but the existing line decorators are applicable, so it’s incredibly easy to draw dotted or dashed lines.

Since the point sequence to a stroke may be simulated in an animation, it’s now very easy to draw animated dashed or solid, arrowed lines.  Here is a screen shot from one of the demos.

Injecting a new line decorator is a matter of assigning the fully qualified class name of the decorator,

__data.lineDecorator = “net.algorithmist.freehand.decorators.SolidLine”;


__data.lineDecorator = “net.algorithmist.freehand.decorators.DashedLine”;

then, re-assign the stroke’s data provider, = __data;

There are still a couple beta slots open, so if you are interested in developing a Flex-based application (mobile or otherwise) involving freehand drawing, please contact me at theAlgorithmist [at] gmail [dot] com.  There is a small, three-figure license fee that is a one-time cost.  Beta users get free upgrades for life!

I’ll be posting a roadmap for the anticipated release cycle shortly, so even if you are not interested in Flex/Actionscript development, say tuned.  A subset of the Freehand Drawing Library may be coming for JS or Corona developers.

Image Painting in Freehand Drawing Library

January 20, 2012 Comments off

A bonus project is going out to all Freehand Drawing Library beta users this morning.  Currently, the library contains one fixed-width stroke with three drawing engines and three line decorators.  One question arose about how to create different strokes and the role of engines within the architecture.  I also received a comment about an iPad drawing app. that allowed people to ‘stamp’ or ‘paint’ smooth strokes with images.

Having an artist create any variety of cool images in Flash is a no-brainer.  The question is how to stamp that image repeatedly along a smooth stroke.  The answer provides a perfect illustration of stroke creation in the Freehand Drawing Library.  A stroke is designed based on certain desired characteristics, in this case the ability to distribute images along a smooth path.  A stroke engine (that implements IDrawingEngine) is created to match the general characteristics of a stroke.  Not all engines are compatible with all strokes, and that’s fine.

A StampedStroke class (implementing IFreehandDrawable, so it can be used in a Factory) was developed for the desired purpose.  A single engine, Stamp, computes the same smoothed stroke coordinates as the SmoothedStroke engine.  Since nothing is drawn into any graphics context, the concept of line decorators does not apply.  The stroke engine directly instantiates the image symbol and adds it to the display list.

The Stamp engine accepts a single engine parameter, ‘imagestamp’, which is the reference to the symbol created in Flash and exported with a base class that extends MovieClip.  Using the stroke is as simple as instantiation,

private var __stroke:StampedStroke  = new StampedStroke();
private var __data:StrokeDataVO = new StrokeDataVO();

Make sure the stroke engine and symbol are compiled into the SWF,

import net.algorithmist.freehand.StampedStroke;
import net.algorithmist.freehand.symbols.Starburst;

private static const STAMP_ENGINE:Class = Stamp;
private static const STAR_CLASS:Class = Starburst;

Then, inject stroke engine and assign engine parameters,

__data.drawingEngine = “net.algorithmist.freehand.engine.Stamp”;
__data.engineParams = {imagestamp:”net.algorithmist.freehand.symbols.Starburst”};

Assign the data provider for the stroke, = __data;

Draw, and have fun.  The Stamp engine contains a back door to animating the stroke while it’s being drawn.  I may create an online example since it’s pretty cool 🙂

The library is currently in the final beta phase before RC1.  Because of all the new capability, I’ve opened up several beta slots.   There is a small, three-figure license fee, which is a one-time cost.  All beta testers get free upgrades for life!

Please contact me at theAlgorithmist [at] gmail [dot] com if interested.

New Drawing Engines for Freehand Drawing Library

January 9, 2012 Comments off

The upcoming beta for the Freehand Drawing Library now has a single constant-width stroke and three drawing engines.  The basic stroke is architected to work with any drawing engine (IDrawingEngine instance).  The StrokeDataVO contains both the fully qualified class name of the IDrawingEngine instance and an engineParams Object to pass arbitrary parameters to any drawing engine.

The three drawing engines are

1 – SmoothedStroke: Constant-width equivalent of the algorithm used in the variable-width Freehand stroke.  This algorithm allows cusps or sharp angles in the stroke.

2 – ConstantSmoothing:  Same engine as #1 except that smoothing is constant.  Cusps are not possible.

3 – Lagged:  This is an experimental engine that implements lagged smoothing over a small number of prior mouse moves. The entire stroke is redrawn from scratch after every move.  This produces a variety of interesting strokes that move in a serpentine fashion while the stroke is drawn.  I think this one would be fun for a kid’s doodling application.

A screen shot of the lagged drawing engine is shown below.

With the current FDL architecture, all three engines can be interchanged with the same basic, constant-width stroke.  And, each drawing engine can be used with any of the three available line decorators (solid, dashed, dotted).

One stroke, nine different drawings 🙂

I have a few minor details to clean up and then a new beta (0.95) will be released.

Dotted Line Decorator in Freehand Drawing Library

January 6, 2012 Comments off

The line decorator architecture in the Freehand Drawing Library is complete, fully documented, and pretty thoroughly tested.  Here is a screenshot from the demo that shows the new dotted line decorator.  The stroke engine is the same for all strokes.

Switching from solid to dashed to dotted lines is simple and the stroke engine is agnostic to how the strokes are drawn.  The code for the radio button handler is provided below (comments and UI-related code are removed)

switch( )
  case "solid":
    __data.lineDecorator = "net.algorithmist.freehand.decorators.SolidLine";
  case "dashed":
    __data.lineDecorator = "net.algorithmist.freehand.decorators.DashedLine";
  case "dotted":
    __data.lineDecorator = "net.algorithmist.freehand.decorators.DottedLine";
} = __data;

The decorator classes are either pre-compiled into the app or loaded from a SWF in advance of assigning a decorator. The default solid-line decorator is always available.

The final demo (should be ready this weekend or early next week) will demonstrate a single line decorator with multiple stoke engines.  I’ll release another beta (in advance of the first release candidate) at that time.

Categories: Flex, Portfolio Tags: , , , ,

Blogging Year in Review

January 1, 2012 2 comments

I never thought much about blog statistics over the prior year until receiving a WordPress summary.  The reflection also caused me to think hard about where I want to take this blog in the upcoming year.  So, here’s a brief look back and a brief look ahead.

Over 230,000 visits to this blog were logged in 2011, not very impressive as I suspect there are many top programmers who receive that many visits in one or two months.  For a blog devoted primarily to applied math with the occasional tennis diversion, I felt that was better than expected.

The most visitors came from the US, followed by the UK, India, South America, and Australia.

The top referring sites were my business site,, followed by, Facebook, Stack Overflow, and Flashbookmarks.

The most traffic came from search engines and the top search terms were black mathematicians, puremvc tutorial, TRON Clock, and Prince EXO 3 Black.  Where’s my sponsorship from Prince?

The top two posts were from the TRON Clock demo and the top blog commenter was friend and fellow developer, PolyGeek.  I’m guessing he’ll be the first person to respond to this post 🙂

In terms of traffic, the top four posts were Flex-related and number 5 was the Babolat RPM Blast review.  OK, where’s my Babloat sponsorship?

In terms of 2012, I’ll be working a lot on the Freehand Drawing Library and app. development, so I expect personal blog posts to decline.  I’m considering guest posts as a means to keep the content fresh and give others a shot at some exposure.  So, if you are interested in writing posts on applied math or general programming/algorithm topics and have either a resume or personal site to display your background, please email me at theAlgorithmist [at] with the subject ‘Guest Posting on The Algorithmist.’  All posts will contain a link to your personal site or a brief bio.

I’ve received a few requests to do a series on vector math and computational Geometry in Javascript.  I probably won’t be able to devote time to this until Q2, but it’s at the top of the ‘new topics.’ list.  Please feel free to suggest other topics of interest and thanks for your visits.  Hope you found something interesting or useful.

Categories: General Tags: , , ,