Circle of Nths

Here's my latest Flex control:


The component shows the "Circle of Nths" for a given N and a given scale.

Hopefully, the component's controls are fairly self-explanatory.

Musical Issues
The component uses the interval-naming scheme discussed here.  In brief,
- There are two interval categories: perfect and imperfect.
- The only perfect interval is unison (and its octaves); all other intervals are imperfect.
- Each interval also has a quality: diminished, minor, perfect, major, or augmented.
- All imperfect intervals of diatonic Fa-mode (Lydian) have the quality "major" (including its fourth, the "major fourth").
- All imperfect intervals of diatonic Ti-mode (Locrian) have the quality "minor" (including its fifth, the "minor fifth").
- All perfect or major diatonic intervals, when chromatically widened, have the quality "augmented."
- All perfect of minor diatonic intervals, when chromatically narrowed, have the quality "diminished."
- The resulting interval-names are used to name the widths of the intervals of all scales, whether diatonic or not.  (Specifically, one does NOT generate interval names for non-diatonic scales by applying to them the name-generation algorithm described above; instead, one just names a non-diatonic scale's intervals using the corresponding interval-names generated for the diatonic scale.)  Actually, it may be that these names only make sense within the syntonic temperament; other temperaments, such as Magic, may require different interval-names. I haven't looked into these other temperaments enough yet to know for sure.

This use of color matches this animation of the relationships among the diatonic modes' intervals as one moves from mode to mode along the major-minor axis (which is also the Circle of Fifths).

Using this naming scheme makes it easy to see that, within the diatonic scale, all non-octave intervals occur in exactly two sizes (major and minor). This is Myhill's property, and it is the essential characteristic from which the other properties of the diatonic scale emerge (e.g., maximal evenness, cardinality equals variety, structure implies multiplicity, and being a well formed generated collection). It is also the property from which Dynamic Tonality arises. It is also easy to see that this property is not shared by any of the Prime Scales (i.e., those shown in the scale-selection combo box).
In his book Foundations of Diatonic Set Theory, Timothy Johnson uses a single-octave note-circle for all Circles of Nths. His Circle of Fifths, shown on Page 82, is one example. Using a single-octave circle shows the relationships among the notes clearly, whereas using (N-1)-octave circles shows the relationships among the intervals clearly.

Programming Issues
The sliders don't have tick marks or labels because I can't figure out how to make Spark sliders show these things. Halo sliders had a property, tickInterval, that I could set for this purpose, but Spark sliders don't. I spent a couple of hours searching the documentation and source code (always the best documentation), but couldn't find anything that looked right.

If you know how to decorate a Spark slider with tick marks and bounds labels, please let me know.

The component's interval-arrows are also drawn in a stupid manner -- by simply drawing a sequence of connected straight line segments. I'd rather use an elliptical Path, a la Degrafa/SVG, but Flex 4's FXG stuff -- despite being otherwise quite spiffy -- does not support elliptical paths (why not?).

This component is NOT a good example of how to use Flex 4's Spark architecture, because it doesn't. It is a very Halo-like component, making no use whatsoever of Spark's skinning or layout enhancements.

Now that I've got the basic control working to my satisfaction, I'll see if I can break it up according to the proper Spark-style architecture (components, skins, layouts).

The component is also a fairly egregious example of ravioli code (i.e., "encapsulated spagetti code"). The one component is doing way too much; its source file is nearly a thousand Lines Of Code long (1 K-LOC). That's nothing to compare to Flex 4's 12 K-LOC UIComponent, which is the Mother of All Ravilolis (of necessity) -- but it's still a signal that my component probably should be broken up.

I also need to learn how to bring MXML data into a library-based component. If anyone can tell me how to do that, I'd welcome the instruction.

Once I've re-architected the component to use Spark's new architecture, I should be able to change its superclass to Slider, and presto change-o, enable dragging a thumb around the "clock" to change its mode. Being able to interactively change the Circle on Nth's mode will make it easier for for a student to see the relationship between an interval's width and its degree in a given mode.  (The width of every 4th in the diatonic Circle of 4ths, for example, corresponds to the width of the 4th in the diatonic mode of the interval's starting-note.)

I'd also like to explore smooth animation of the component's state-changes. That way, when the control is changed from (say) being a Circle of 2nds to a Circle of 3rds, the note-labels can move around and change size slowly enough for the eye to follow, hopefully making the transition itself easier to understand.

Hence, this control is providing me with lots of opportunity to explore Flex 4's new architecture and "learn by doing."

CircularSlider

Here's my first attempt at a Spark-based Flex control, using Flex's new skinning architecture. It's a circular slider.  This (uncopyrighted) file, posted by Jacob Goldstein, was a big help.  Thanks, Jacob!  :-)



There's some seriously-weird stuff happening in this control.
- Firstly, it attempts to draw a horizontal slider's track, for reasons that I haven't found yet. This "ghost track" appears to be intercepting some of the slider's events, which causes the thumb to jump around erratically during a thumb-drag.
- Secondly, it resists resizing. Apparently, I need to locate methods that faciliate resizing Spark controls and override them.

It's a start. ;-)