Archive for the ‘Flash’ Category

Recent Work on Unit Conversion

February 24, 2012 Comments off

My first thought about this project was “boring, but at least it’s a payday.”  This application allows students to practice converting across different types of units on actual problems.  In terms of interactivity, it’s pretty much dragging rectangular tiles with a numerator and denominator into slots inside a work area.  Yes, I’m fading off to sleep as I write 🙂  A screenshot of the basic layout is shown below.

Standard tiles are fixed-width and defined in XML so that the tile set for a conversion category can be easily changed (and it was changed multiple times during development).

<category name="Distance">
<tile id="Distance0" >
<numerator value="1000" useCommas="false">meters</numerator>
<denominator value="1" useCommas="false">kilometer</denominator>

which brings us to the interesting part of the application – the text formatting.  I worked within the framework used by this client and all UI text components are based on Flash TextFields.  Each numerator and denominator has a value and units.  Units are written out as text strings, however, units may have singular, plural, and abbreviated forms.  The rules for formatting values are comma-formatted unless otherwise specified and scientific notation is used if the number is outside a pre-specified range.  The number of displayed digits in scientific notation is also variable.  Powers are handled with a superscript font.  I had to test if an exponent was applied in the formatting to vertically adjust text placement.

Unit text is auto-converted to an abbreviation if the text is to wide to fit inside the tile.  The XML unit type is the preferred formatting, but only if it fits.

The objective of the lesson is to convert the starting units to the requested units using the minimum number of tiles.  No more than three tiles may be dragged into the work area and each problem can be solved using no more than three tiles.  Tiles may be flipped, which adjusts the numerator and denominator; however, tiles are restored to their original (XML) form when moved back into the work area.  When a tile is released outside the work area, it automatically jumps to the nearest open slot (left-to-right).

As tiles are dragged into position, the program checks if any units cancel.  Cancellation must take into account any combination of singular, plural, or abbreviated unit.

This is where it gets fun.  The program is supposed to draw a red, diagonal strike-through mark across the unit when cancelation is detected.  Again, this has to work for any combination of singular, plural, or abbreviated unit, so the drawing is completely programmatic.

The other interesting text-processing aspect of units is that units must be gathered into like form with a single power in the event there is no cancellation.  There are also rules for formatting the answer that vary from the work-area tiles, such as rounding to the nearest 0.001 where the rounding value is arbitrary.  An example is shown below.

In the denominator, the singular unit, ‘cubic centimeter’ is combined with the abbreviated unit ‘cm^3’ to create a new unit cm^6.  This processing is done by a gathering pass where all units are broken down into a ‘fundamental’ unit and exponent.  All like units are gathered and the exponents processed to produce the output.

Currently, there is no cancellation in this step unless there is an exact unit match, i.e. cm in the denominator does not cancel cm^4 in the numerator.  The goal is to make it easier for the student to see the unit collections across tiles so that they can quickly decide which tiles to move back to the work area.

The text and dynamic drawing aspects of this project proved to be quite interesting.  The next time I think someone is presenting me with a boring project, I’ll know to think again 🙂

Categories: Flash, Flex, Portfolio

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.

Recent Work Measuring Volume

December 19, 2011 Comments off

Anyone who has ever played with a chemistry set should enjoy the description of this project 🙂  This learning application teaches students how to measure the volume of regular and irregular objects by their effect on water level in a container.

The application begins in an exploration mode with a layout consisting of a work area and a cabinet containing objects to measure, some containers, and a few tools.

Water may be added to a container from the faucet, which pours at three different rates depending on the slider position.  All water levels and animation were drawn programmatically.  After adding water, the student may drop an object into a container.  Objects may be ‘added’ to empty containers as well.  If any part of the object overlaps a container, it is automatically added to the container.  In addition to collision detection of irregular objects, a general-purpose animation manager was written for this project.  It controlled the animation of objects dropping into containers and setting of a ‘critical’ level, which was used to dispatch an event, from which the rise of the container’s water level was choreographed.  This allows the water level to animate in a reasonable manner and be timed to correspond with the object reaching the water level.

Water level rises in a physically realistic manner in that all objects have a mathematical model; box, cylinder, or spherical.  Depending on the container and object properties, water in a container may not rise by the volume of the object.  For box and cylinder models, computing the water level rise is straightforward. For spherical models, roots of a cubic polynomial must be computed.  I added a cubic root finder to this client’s math library.  Fortunately, the physics of the problem result in only one root, so resolving multiple roots in an interval was not necessary.

Objects are stacked behind containers by default and when the student moves a container with an object ‘inside’ it, the object moves as well.  However, if the student clicks such that the mouse is over the object, the object is moved instead.  This is indicated by a glow filter to inform the student they are about to move the object instead of the container.

Layering, however, is not static.  If an object is released in such a manner that it does not fall into a container, it is immediately layered in front of all containers.  If the same object is later dropped into another container, it is layered behind all containers.

Collision detection includes not only container-object collisions, but detecting when an object is positioned so that it will drop into a container and when a container is in ‘pouring position’ above another container.  Container pouring represented the most intricate part of this application.

Two models are involved in pouring, both of which were supplied by the science curricula manager responsible for this application.  The first involves computing the pouring angle as a function of the horizontal position of each container’s spout.  Given a pouring angle, the second model determines how the ‘side view’ of water in the pouring container is drawn and how much water leaves the container.

This water does not immediately transfer into the destination container.  If water spills from a container in the drag handler, a Timer is initiated whose handler transfers water from a virtual ‘in buffer’ to the destination container according to a pouring constant whose value is container-dependent.  This constant allows certain visual and interactive constraints (such as water not pouring in too fast or too slow into certain containers) to be met.  Adjustment of the water level in the destination container is physically accurate in the presence of contained objects.

In addition to pouring into containers, students may pour water into the sink, which is treated as a faux container for just that purpose.

Overflow from containers is allowed.  Certain containers are allowed to overflow into other containers, as shown below.

Three tools are provided, a Ruler (for measuring object dimensions), an eyedropper (for extraction and addition of tiny amounts of water), and a magnifying glass for measuring the meniscus of water in a graduated cylinder.  The latter is dynamically drawn using a quadratic Bezier, according to properties assigned by the science curricula manager.

The meniscus is shown whenever a specified interior section of the lens is over the actual meniscus in a graduated cylinder.  This test is performed inside the magnifying glass handler using a highly optimized circle-rectangle collision test.  The magnifying glass and containers may establish a two-way connection (think of it as two-way binding) so that if water is added to a graduated cylinder, the magnified meniscus view is dynamically redrawn until the meniscus is ‘out of view’ of the lens.

In addition to the exploration view, the application also contains a test or practice view.

Each problem presents students with a selected number of objects, tools, and containers, sufficient to answer the question.  Answers are deemed correct if they lie within a specified tolerance.  To create a virtually limitless number of questions from a small base, initial volumes and object parameters may be randomized in the question XML.  One example problem is

<question type="answer" number="9" category="all" target="Prism" textBox="true" >    <questionText>
  <![CDATA[To the nearest 0.1 cm <span class='sup'><font size = '+4'>3</font></span>, what is the volume of this rectangular prism?]]>
   <![CDATA[cm <span class='sup'><font size = '+4'>3</font></span>]]>
  <answer tolerance="0.1" />
  <containers />
    <object id="Prism" x="330" y="330">
    <generate>3.9 + 0.3*rnd()</generate>
<generate>2.4+ 0.3*rnd()</generate>
     <generate>7.3 + 0.3*rnd()</generate>
  <tool id="ruler" x="460" y="300" />

Whenever a <generate> node is encountered, the parser sends the node’s contents to a specialized method that randomizes a value and generates the numerical value of the node.  That value is either in-lined into question text or used to calculate object volume.

So, each time the student practices in this view, they receive a the same set of questions with differing values.  The code is very efficient in the sense that the same base class for container-object interaction is used to create the two Views.  The hierarchy for lab items is DraggableItem -> LabItem -> Lab Object -> LabContainer.

I suppose you can see why I’ve been so busy for the last couple months 🙂  Going to take a few days off now before returning to work on the Freehand Drawing Library.

Merry Christmas and best wishes for 2012 to all readers.

Function Graphing Update Part II

December 16, 2011 Comments off

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.

Categories: Flash, Math, Portfolio Tags: , , , ,

Recent Work: Upgrades to Function Graphing Engine

November 14, 2011 Comments off

I wrote a class library for function graphing and exploration (with several complex, interactive features) years ago that uses XML for most of the graphing setup.  The library dealt with functions defined by a modest number of parameters whose values may change, but the basic functional representation is immutable.

A student might explore x2 + 3x + 2 over a variety of intervals, or may even study ax2 + bx + c, where the constants a, b, and c are interactively varied.  The function is still defined, in advance, by a small, finite number of parameters.

My client recently wished to use this engine to explore functions that arise from physical simulations over time.  The ‘function’ is not mathematically defined by a  formula.   Instead, its values are sampled over time.  Data points are plotted either separately, or connected by lines.  Two new low-level functions, ScatterPlot and LinePlot were introduced into the defined functions library and new methods were added to the function graphing class to allow data that ‘defines’ a function to be updated at runtime.  New methods to adjust the graph range and tic increments were also added.

The function graphing engine now supports panning restrictions by quadrant.  Many physical simulations are sampled over time intervals, so the graph x-coordinate is a time sample (always greater than or equal to zero).  For simulations whose y-axis values are positive, restricting graph panning to the first quadrant is desirable.  One or two-quadrant combination panning restrictions are now allowed in the function graph XML.

<learningObject id=”simulationGraph” class=”display.graphing.functions.FunctionPlot” x=”35″ y=”40″ width=”350″ height=”280″ display=”f1,f2,f3″ pannable=”true” restrictPan=”quadrant:1″ >

Here’s a screenshot of the engine in action,

The modifications have been quite interesting, but would have been far more difficult without the extreme level of internal and external documentation generated for this complex class library.  Over two years went by between modifications.  So, think about the next person that comes along after your code is written.

It might be you 🙂

TinyTLF 2 Explorer App

October 24, 2011 Comments off

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.

Categories: Flash, Flex Tags: , , ,

Some Recent Work with TinyTLF

June 19, 2011 4 comments

I’ve been extremely busy with a gig the last couple months, so posts have been sparse.  This is a quick preview of some work with Paul Taylor’s TinyTLF –  Paul and I have collaborated in the past on spline-constained text layout and dynamic scrolling with quad. Bezier splines.  While I’ve been keeping up with progress on with TinyTLF, this is my first serious application of the library.

The problem is to render interactive ‘word selectors’ in-line with text, provided in html format.  An example input is of the form,

<passage><p>Sarah’s <word>father</word> had died in 1797, two years earlier. Life was difficult with him gone, but the family had learned to <word>adapt</word>. Sarah found that she had to support the family with her daily hard work.</p><p>The family’s main <word>product</word> was cattle, but it also raised chickens—and Sarah had been put in charge of both types of animal. Father had worked hard at <word>farming</word> and building furniture, but that business was <word>defunct</word> now that he was gone. Together, the family survived without him due to their courage, tenacity, and <word>strength</word> of character.</p></passage>

Some passages may contain <b> or <i> tags as well.  Everywhere a <word> tag is present, an interactive word selector must be rendered in-line with the text.  TinyTLF is used to render the text and the word selectors are rendered by a custom TextBlock factory assigned to the TinyTLF text engine.  The factory and the word selectors implement specified interfaces (IWordSelectorBlockFactory and IWordSelector).  An event is dispatched when the word selectors are added to the stage, which allows the skinnable component controlling passage display to obtain references to the created IWordSelector.

TinyTLF allows the text to be easily styled by assigning styles, either through an external style sheet or constructed from Flex style properties assigned to the passage display class (the technique I use in this app).  The rendered result is shown below after some interaction with the word selectors (the same synthetic data is used across all test passages, so the concept of correct vs. incorrect selection is meaningless in this example).

The really cool thing about programming the skinnable component to a set of interfaces and not specific implementations is the ability to quickly create new block factories and selector implementations.  This was actually used to switch out rectangular 2D selectors with Actionscript 3D rectangular boxes.

After this gig is finished, I plan to become a contributor to TinyTLF and hope to create some cool examples for public consumption as well as advance the use of splines in TinyTLF layout.

Categories: Flash, Flex, Portfolio Tags: , ,