The simplest version of an enumeration you can do in AS3, of course (and the one most people use) are static const String values that are set in a class which is meant not to be instantiated.

package com.example {
	public class SimpleEnum {
		public static const ONE : String = "One";
		public static const TWO : String = "Two";
		public static const THREE : String = "Three";
	}
}

This works for the simplest cases but doesn’t come near to having the features of Java’s enumerations. One alternate version uses int values to make the conversion from Java to AS3 easier (Java uses int values to identify each enumeration value which is called an ordinal).

package com.example {
	public class SimpleEnum {
		public static const ONE : uint = 1;
		public static const TWO : uint = 2;
		public static const THREE : uint = 3;
	}
}

The main problem with both of the above is that any time you use one of your SimpleEnum values, you are using a simple type (String or uint) which allows any random value to be passed in, not just those that you have defined.

The next step is to use instances of the Enum class for each one of the constants. This makes your enumerations typesafe and allows you to have your enum values be real objects with member functions and variables.

package com.example {
	public class SimpleEnum {
		public static const ONE : SimpleEnum = new SimpleEnum("One");
		public static const TWO : SimpleEnum = new SimpleEnum("One");
		public static const THREE : SimpleEnum = new SimpleEnum("One");
 
		private var _name : String;
		public function get name() : String {
			return _name;
		}
 
		public SimpleEnum(inName : String) {
			_name = inName;
		}
	}
}

This is great as it enforces that any time you want to use a value from SimpleEnum you can ensure that it’s the right type, but this has a different form of the same issue above. Other code can happily create new versions of SimpleEnum and use them wherever.

It is at this point that some of the more esoteric bits of AS3 coding can be helpful. Private constructors would fix this problem right away but AS3 also lacks this language feature. For Singletons, most developers use a private class which is appended to the same file, after the package block ends. Unfortunately, this doesn’t work as the “private” class is not yet loaded when the static const variables are being created. Luckily, static initializers fix this problem.

package com.example {
	public class SimpleEnum {
		public static const ONE : SimpleEnum = new SimpleEnum("One");
		public static const TWO : SimpleEnum = new SimpleEnum("One");
		public static const THREE : SimpleEnum = new SimpleEnum("One");
 
		private var _name : String;
		public function get name() : String {
			return _name;
		}
 
		private static var _created : Boolean = false;
 
		//This code is run statically after the const vars above are created, closing off the constructor
		{
			_created = true;
		}
 
		public SimpleEnum(inName : String) {
			if (_created) {
				throw new Error("SimpleEnum is an enumeration, use the class constants instead.");
			}
			_name = inName;
		}
	}
}

I can see only two downsides to this pattern. Any function parameter or variable which is of the SimpleEnum type could be set to null. This is a common issue with Object Oriented programming, though, and can happen with Java’s enum type as well, so this is minimal. The larger possible issue is that the error for trying to use new SimpleEnum() happens at run-time and not compile-time. This could bite users who mistakenly try to instantiate the SimpleEnum class in their code and could potentially not be found right away, since a specific set of run-time conditions may have to be satisfied to call the offending code. However, with a helpful enough error message and documentation I think that this is a small issue.

This is essentially the pattern that I have adopted but I’ve added a few more features. Specifically, I’ve implemented an ordinal value which can be used for interaction with Java enum values or for advanced serialization or hashing and have added a function to get all of the possible values for use in iteration (or enumeration of the values….;-) ). The creation checking is also done in the base class so that a minimum of extra work needs to be done in the concrete enum classes.

package com.reversefold.util {
	import flash.errors.IllegalOperationError;
	import flash.utils.Dictionary;
	import flash.utils.describeType;
	import flash.utils.getQualifiedClassName;
 
	/**
	 * An abstract class to emulate Enum type.
	 * 
	 * Subclasses should follow this pattern:
	 * 
	 * package com.example {
	 * 	public class TestEnum extends Enum {
	 * 		public static const ONE : TestEnum = new TestEnum();
	 * 		public static const TWO : TestEnum = new TestEnum();
	 * 		public static const THREE : TestEnum = new TestEnum();
	 * 		
	 * 		public static function get values() : Vector.<testenum> {
	 * 			return Vector.</testenum><testenum>(Enum.getValues(TestEnum));
	 * 		}
	 * 		
	 * 		{
	 * 			initEnumConstant(TestEnum);
	 * 		}
	 * 	}
	 * }
	 */
	public class Enum {
		protected static var sequence : Dictionary = new Dictionary();
 
		/**
		 * To protect from instantiation after static initializing.
		 */
		protected static var values : Dictionary = new Dictionary();//.<vector .<Enum>>
 
		/**
		 * Function to call for each enum type declared and in static init.
		 */
		protected static function initEnumConstant(inType : Class) : void {
			var className : String = getQualifiedClassName(inType);
			var typeXML : XML = describeType(inType);
			var newValues : Vector.<enum> = new Vector.</enum><enum>();
			for each (var constantXML : XML in typeXML.constant) {
				var name : String = constantXML.@name;
				var constant : Enum = inType[name];
				constant._label = name;
				newValues.push(constant);
			}
			//sort by ordinal (instantiation order)
			values[className] = newValues.sort(
				function(lhs : Enum, rhs : Enum) : Number {
					return lhs._ordinal > rhs._ordinal ? 1 : (lhs._ordinal < rhs._ordinal ? -1 : 0);
				}
			);
		}
 
		protected static function getValues(inType : Class) : Vector.<Enum> {
			return Vector.</enum><enum>(values[getQualifiedClassName(inType)]);
		}
 
		/**
		 * Enum label.
		 */
		private var _label : String;
		public function get label() : String {
			return _label;
		}
 
		private var _ordinal : uint;
		public function get ordinal() : uint {
			return _ordinal;
		}
 
		public function Enum() {
			var className : String = getQualifiedClassName(this);
			if (values[className]) {
				throw new IllegalOperationError("Cannot instantiate anymore: " + className);
			}
			var seq : uint;
			if (sequence[className] == null) {
				seq = 0;
			} else {
				seq = sequence[className] + 1;
			}
			_ordinal = seq;
			sequence[className] = seq;
		}
 
		public function toString() : String {
			return ordinal + " " + label;
		} 
	}
}
</enum></vector></testenum>

And here is an example use:

package com.reversefold.shop.model {
	public class TestEnum extends Enum {
		public static const ONE : TestEnum = new TestEnum("One");
		public static const TWO : TestEnum = new TestEnum("Two");
		public static const THREE : TestEnum = new TestEnum("Three");
 
		//This function gives typesafe access to the list of constants that Enum.getValue() gives
		public static function get values() : Vector.<testenum> {
			return Vector.</testenum><testenum>(Enum.getValues(TestEnum));
		}
 
		//static initializer, make sure to pass in the current class as a parameter
		{
			initEnumConstant(TestEnum);
		}
 
		//read-only getter of the name value
		private var _name : String;
		public function get name() : String {
			return _name;
		}
 
		public function TestEnum(inName : String) : void {
			super();
			_name = inName;
		}
 
		override public function toString() : String {
			return super.toString() + " " + _name;
		}
	}
}
</testenum>

Thanks to all of the linked blog postings for their ideas. I only found Scott Bilas’ post after I’d finished writing my own extension of Peter Moelgaard’s version. Scott’s does nearly the same things mine does, but in a more C#-like way.

Fractal Email - first iteration

Fractal Email - third iteration

Fractal Email - fifth iteration

The pictures link to the updated app. Enjoy, and as usual, don’t slide the slider up to the max unless you’re willing to wait while your entire browser hangs for several minutes.

With the disclaimers out of the way, I hope this is useful to you. Let me know if you have any issues with it or any suggestions for improvements.

This is an update of a previous post.

Fractal Letters, iteration 1

And here is the fifth iteration:

Fractal Letters, iteration 5

Some letters have variations in how they are drawn or how they repeat, or both (hence the 2 lines). The bottom N uses an algorithm I worked out which didn’t change the aspect ratio and had only one repetition per line. Both of the N variants in the words use two repetitions per line and constrict the width faster than the height, which leaves the N recognizable. The idea here, after all, was to make letters which had a cool fractal look but could still be read.

Click either of the pictures to view the flex app and play with the iterations yourself. Just drag (or click on) the slider on the bottom of the app to change the iteration.

Stay tuned, I have another blog post coming up soon specifically about that N on the bottom, the math required to create the algorithm, and some interesting (and beautiful) results I got when implementing a test program.

Finished creases, back side

Finished creases, front side

Yes, that paper is less than 2 quarters wide. Of course, going one more level took a lot of careful and precise folding which took the rest of the night. The next day I started the accordion folds which are the base of the final product.

Accordion halfway done

Accordion finished

That took several hours. The last step is to pop in the reverse folds, one row at a time. This is the most time consuming part of the process and for this fold it took me several nights with a small crafting tool. Here it is with five rows finished.

Five rows finished

And after many painstaking hours of work, here is the finished product:

Finished fold

Finished fold, side view

Finished fold, 3/4 view

And for a little perspective here is a shot of the finished fold compared to the original paper:

Finished fold vs. unfolded paper

And just in case the quarter wasn’t enough, here’s the finished fold in my palm. Yes, it is that small. No, I won’t make you one. ;-)

Finished fold in the palm of my hand

All of these photos link to my newly created flickr account. The entire set is up there along with higher quality versions.

Enter ASCIIMathML, a JavaScript library which converts a simple ASCII format to MathML for rendering in MathML compliant browsers. The syntax is pretty much what you would expect with a few tricks up its sleeve. A simple equation, such as `y=x^2` is written as y=x^2. A more complicated example from my last post such as:
`arc=2*cos^-1(1-r_2^2/(2*r_1^2))*r_1`
is written as:

arc=2*cos^-1(1-r_2^2/(2*r_1^2))*r_1

Another example with a square root:
`y=(+-r_2*sqrt(4*r_1^2-r_2^2))/(2*r_1)`

y=(+-r_2*sqrt(4*r_1^2-r_2^2))/(2*r_1)

Now, those if you viewing these posts in a non-Firefox browser are probably wondering why you are also seeing pretty equations here. The short answer is that you’re seeing images imstead of MathML rendered by your browser. The long answer involves a four part toolchain. The first piece is ASCIIMathML, slightly altered to insert an image tag instead of MathML. The images are generated by a PHP script which first runs the ASCII through ASCHIIMathPHP, a version of ASCIIMathML.js to PHP. The resulting MathML has the times symbol replace by one which the later tools understand (replace ⋅ with ·). The resulting MathML is then passed to svgmath, a python script which converts MathML to SVG. SVG would be great but Internet Explorer still doesn’t support it without a plugin. Because of this the SVG is then passed through inkscape via command-line to render out a png which is what you see in your browser.
Here’s some sample PHP to run these commands:

$ascii = 'y=(+-r_2*sqrt(4*r_1^2-r_2^2))/(2*r_1)';
 
$pngFile = md5($ascii).'.png';
if (!file_exists($pngFile)) {
    require 'ASCIIMathPHP-2.0.cfg.php';
    require 'ASCIIMathPHP-2.0.class.php';
 
    $ascii_math = new ASCIIMathPHP($symbol_arr);
    $ascii_math->setExpr($ascii);
    $ascii_math->genMathML();
 
    $mathml = $ascii_math->getMathML();
 
    $mathml = str_replace('⋅', '·', $mathml);
 
    $mathmlFile = tempnam(sys_get_temp_dir(), 'mathml');
    $td = fopen($mathmlFile, 'w');
    fwrite($td, $mathml);
 
    $svgFile = tempnam(sys_get_temp_dir(), 'svg');
    system("/usr/bin/env python math2svg.py -s $mathmlFile > $svgFile");
 
    system("inkscape -f $svgFile -e $pngFile");
 }
 
header('Content-Type: image/png');
die(file_get_contents($pngFile));

All of this is also wrapped up in a WordPress plugin which includes the JS file in the header. Unfortunately, I don’t have an easy way to package this up as it requires python and inkscape but if you would like to get more info just let me know and I’ll send you more information.

UPDATE: I finally did update the plugin to be useful for others and posted it.

Circles within a circle

When the first arc is filled up you then move to an arc which is the diameter of the small circles further within the large circle. The problem, however, is how to know how many circles can fit along that arc. I started originally with a simplistic realization that the arc length would be similar to the diameter of the small circles. This works out ok but ends up creating problems especially when you get close to the center of the larger circle (i.e. when the radius of the arc is close to the radius of the small circles). The correct solution is to calculate the exact angle along the arc that the circle takes up. After a few false starts with incorrect assumptions regarding tangent lines and their lengths I came up with the following.

Geometric definition

• The large circle is centered at the origin
• `r_1` is the radius of the large circle
• `C` is the center of the small circle
• `r_2` is the radius of the large circle
• `I` are the interseciton points between the circles
• `theta` is the angle between the x axis and the line from the origin to `I`
• `arc` is the length of the arc between the two interseciton points (`I`)

Given

`C=(r_1,0)`
`I=(x,+-y)`
`theta=cos^-1(x/r_1)`
`arc=2*theta*r_1`

Circle Equations

`x^2+y^2=r_1^2`
`(x-r_1)^2+y^2=r_2^2`

Solve for `y^2`

`y^2=r_1^2-x^2`
`y^2=r_2^2-(x-r_1)^2`

Set equal and solve for `x`

`r_2^2-(x-r_1)^2=r_1^2-x^2`
`x^2-(x^2-2*x*r_1+r_1^2)=r_1^2-r_2^2`
`2*x*r_1-r_1^2=r_1^2-r_2^2`
`2*x*r_1=2*r_1^2-r_2^2`
`x=(2*r_1^2-r_2^2)/(2*r_1)`
`x=r_1-r_2^2/(2*r_1)`

`theta` is then:

`theta=cos^-1((r_1-r_2^2/(2*r_1))/r_1)`
`theta=cos^-1(1-r_2^2/(2*r_1^2))`

You could then use `theta` directly but this will leave you with a remainder of space that’s empty in the arc. To make the circles equally spaced you need the arc length.

Replace values for a full `arc` formula

`arc=2*cos^-1(1-r_2^2/(2*r_1^2))*r_1`

You can then divide the large circle’s circumfrence by the arc length to get the actual number of circles that will fit. You then divide the circle into that many pieces and voila, you get equally spaced circles like the first image above.

`y` is not needed for the solution, but comes out to be:

`y=(+-r_2*sqrt(4*r_1^2-r_2^2))/(2*r_1)`

This screenshot shows the app running with a flickr satellite photo feed displaying on each falling plane. Unfortunately, since my code uses BitmapData.draw(), this won’t work from the web as I don’t want to run a flickr proxy. The linked version simply colors the planes, but you can get the idea from it. Right click the movie to view its code. If you run it locally with USE_FLICKR = true you can see the full effect.

I was actually very surprised, there were a lot of well done apps, including others that generated sound but I guess we just had the app polished well enough. Thanks to Rod for that, he gave us the last few bits that really made it look nice. You’ll need Flash Player 10 and a web cam if you want to try it out.

All of the features I saw in Flash Player 10 were ones I’d seen before, except for the sound generation. Things were more in depth and better put together this time, though. The sound generation is nice, but complicated and hard to make it do what you’re expecting. Of course, I’m assuming you know almost nothing about the specifics of sound, like I do.

IK is fun, but I I focused on the other 2 as I didn’t have any IK idea that seemed particularly interesting.

The 3D is very nice, being able to move and rotate objects in all three dimensions opens up a lot of new possibilities. I had a lot of fun creating some simple squares and rotating them, then applying various blend modes and filters. Here are 2 of my favorites:

Those were fun but then someone mentioned webcams. I successfully connected up webcam video to my project and then spent several hours getting the video mapped to each of the rotating squares then getting it all matched up with the video behind it. I then added edge detection (thanks to Luke Walsh’s post), added some more blending and filters and voila!

I was quite proud of that and still think it looks cool. I wish I’d shown it earlier at the Hackathon but then again we won an award so I guess I’m just being greedy.

As an added bonus, here’s an earlier version of Flash Tones which warbled in an interesting way. Try putting your hand up at the very right edge of the screen.