Posts Tagged ‘Geometry’

Progress on Freehand Drawing Library Splines

April 25, 2012 Comments off

Splines in the Freehand Drawing Library have been a challenge in two areas.  First, the concept of freehand drawing is centered around strokes.  Strokes are defined by sequence of mouse/touch points that begin with a press, continue with a sequence of moves (while pressing), and end with a release.  An interpolative spline is defined with a series of interpolation points or vertices and continuity conditions at the join points.  There is no concept of press-move-release. Fortunately, the FDL architecture is sufficiently general to allow points to be artificially added to strokes.  The UI issue with splines is creating a user-friendly mechanism for identifying the last interpolation point.

The second issue is editing, both vertex and in/out tangents at each vertex.  Since all strokes allow their input points to be either manually defined or cached and returned via user input, editing is not part of the core library.  It’s impossible to create an editing system that is general, maintainable, and equally satisfies all prospective users.  When it comes to splines, I don’t want to add more methods to the IFreehandDrawable interface simply to accommodate new features.  New methods should be added only with careful thought and because it makes good, long-term sense for the library.  Fortunately, ample back-doors exist to arbitrarily set and retrieve properties for various stroke engines through parameter access and mutation methods. I plan to use that existing scheme to expose parameters that facilitate spline editing.

Tangent construction is handled by a Command pattern that is applied across the engine spline or at individual vertices.  The tangent command is injectable and its fully qualified class name is part of the stroke engine parameter set.

There is currently one spline-based stroke engine for the PolyLine stroke.  The CubicBezierSpline engine is based on the cubic bezier spline in this TechNote.  The tangent construction is handled by a NormalBisector Command that is injected into the stroke engine.  I also plan to add another tangent command that uses the same approach as Catmull-Rom splines.  This provides two different cubic bezier splines with a single code base.  I also plan to provide a corner tangent command that allows sharp corners to be inserted into otherwise continuous splines.

One final feature of the architecture is the decoupling of the spline computations from the drawing facilities in the FDL.  This is similar to how I decoupled spline computations from the drawing architecture in Degrafa.  There are no actual spline computations performed in the CubicBezierSpline drawing engine.  It contains a FDLCubicBezierSpline, which is a concrete implementation of the IFDLInterpolatingSpline interface.  FDLCubicBezierSpline is completely independent of the FDL.

The final implementation issue is on-the-fly arc-length parameterization.  In order to draw the spline with line decorators, all requests for x-y coordinates along the spline are based on normalized arc length, not the spline’s natural parameter.  In other words, getX(0.5) returns an x-coordinate of a point that is approximately one-half the length along the entire spline.  The arc-length parameterization is optimized for monotonically increasing or decreasing normalized arc-length queries.  It presumes constant redraws of the spline, so there is no pre-computation/lookup applied in the parameterization.

A screenshot of work in progress is provided below.

During debugging, the outer edge of the convex hull of the bezier control points is drawn (in black).  The red dots are points on the cubic bezier spline at (approximate) uniform normalized arc length.  The next step is to apply a line decorator to actually draw the spline.  Another advantage of automatic arc-length parameterization is relatively easy computation of the Δs to use in point-to-point drawing of the spline.  This mimics a freehand curve like all the other engines, which allows automatic application of the existing line decorators in drawing the spline.

Categories: Flex, Math, Portfolio Tags: , , , ,

New Strokes in Freehand Drawing Library

April 2, 2012 Comments off

Based on beta feedback, I’ve added two new strokes into the Freehand Drawing Library.  The first is an alternate variable-width stroke.  The standard variable-width drawing emulates a brush stroke that begins at negligible size and its width increases with speed (like pushing down harder on the brush).  The alternate stroke begins at a maximum size (initial point is a dot) and its width decreases with speed.  This is an experimental implementation and the creation as a separate stroke illustrates how to modify standard strokes for custom usage.  A screenshot is provided, below.

PolyLine is a constant-width stroke that interpolates a set of points.  An interesting feature of this stroke is that it is permanently non-interactive, that is it bypasses the normal stroke interaction for mouse or touch points.  Instead, the user manually adds vertices to the PolyLine.  Like any other constant-width stroke, it is assigned a solid-line drawing engine by default, which produces the drawing below.

The dots are manually added by the demo program.  In the future, they will be draggable.  This demo is currently a placeholder to test the spline drawing engines, now under development.

Because of these new additions, I’ve opened up several more beta slots.  There are currently two remaining.

The FDL is a serious commercial product, designed for serious commercial applications.  All FDL distributions include source code with full ASDoc.  As such, a small three-figure license fee is required to join the beta.  Beta users, however, get free upgrades for the life of the product.

If you have an application that could benefit from the FDL, especially if it is mobile or involves spline drawing, please contact me at theAlgorithmist [at] gmail [dot] com to discuss joining the beta program.

Quadratic Arc Decorators for Freehand Drawing Library

March 28, 2012 Comments off

I just finished the first cut at the quadratic arc decorators for the Freehand Drawing Library.  Previously, only solid arcs could be drawn.  The example below shows dashed- and dotted-line decoration applied to arrowed arcs.

The decorators all share a fast, on-the-fly arc-length parameterization utility.  I still have a few tweaks to make to one of the decorators before full production release, but the new library is going out to all beta users this morning.

Based on feedback, I’m going to add one more stroke (Polygonal) and two spline-based drawing engines to the full release.  Because of this new addition, I’m seeking a couple more beta users.  If your drawing requirements could benefit from a variety of splines, including splines that auto-convert to shapes (i.e. lines and quads) for creating dynamic outlines/fills, please e-mail me for more information on entering the beta program.

The beta includes full source code and there is a small, 3-figure license fee.  All beta users get FREE upgrades for life.  Email is theAlgorithmist [at] gmail [dot] com.  Thanks!

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.