Here’s some quick code to parse individual tags and text elements out of an html string. It might be handy for some people, but it’s also a good example of some advanced RegExp. Note that you could also do this by parsing it to XML, and traversing with E4X.
Continue reading →

The CS3 component architecture makes use of TextFormats for all the text-styling needs. This decision was (likely) made to simplify the API, but still allow full control over the formatting of the text.

Natively, there is zero support for CSS styling, in fact, setting a styleSheet on the textField of a component (all components expose their textField instances) results in a run-time error, since TextFormats can not be set on textFields with a styleSheet.

But fear not! Not only are the components easy to extend, but it is not at all difficult to add CSS support to any component. In this example, I have added a styleSheet component style to a TextArea, which plays nicely with the built-in TextFormat. Rather than just posting the source code, I have broken down how the implementation works to provide some insight on how the components work, and how this sort of approach can be applied to any component, for almost any task.

Continue reading →

A lot of my experiments utilize a *lot* of randomness. This is great because it produces very organic looking results, and often leads to unexpected emergent patterns or behaviours that are more interesting than the intended system.

The downside of this is that if I get a particularly beautiful output from an experiment I have no way of capturing or reproducing it besides taking a screenshot. I can’t easily reproduce it because the Flash Player’s Math.random() function is not seeded, meaning there is no way to get the same series of numbers from it again. Thus, every time I run the experiment I get a completely unique result.

Continue reading →

I thought I’d share the Rnd class I use for all of my experimental work. It’s a very simple collection of utility methods for working with random values, but it has been extremely useful for me. Here’s the list of methods:

// random();
// returns a number between 0-1 exclusive.
public static function random():Number
// float(50); // returns a number between 0-50 exclusive
// float(20,50); // returns a number between 20-50 exclusive
public static function float(min:Number,max:Number=NaN):Number
// boolean(); // returns true or false (50% chance of true)
// boolean(0.8); // returns true or false (80% chance of true)
public static function boolean(chance:Number=0.5):Boolean
// sign(); // returns 1 or -1 (50% chance of 1)
// sign(0.8); // returns 1 or -1 (80% chance of 1)
public static function sign(chance:Number=0.5):int
// bit(); // returns 1 or 0 (50% chance of 1)
// bit(0.8); // returns 1 or 0 (80% chance of 1)
public static function bit(chance:Number=0.5):int
// integer(50); // returns an integer between 0-49 inclusive
// integer(20,50); // returns an integer between 20-49 inclusive
public static function integer(min:Number,max:Number=NaN):int

Continue reading →

My new branching library makes tracking child/parent relationships between branches quite easy, so I wanted to see if I could build a simple interactive demo that took advantage of this. The result was the demo below that lets you roll over the end of any branch of the dynamically generated tree and see it traced back through its parents to the trunk it originated from. Each place it branched from a parent is indicated by a circle.

The real challenge in building this arose due to the fact that there are no sprites that correspond to branches – all the branch instances share a single canvas that they draw to with the drawing API, and those vector graphics are blitted to a bitmap before you ever see them. This means there is nothing to register rollovers, and I cannot (easily) dynamically update the appearance of branches in response to an interaction. To solve this, I did two things:

1. I register each branch end point with a central list, and associate it with the IBranch instance. This lets me find the nearest end point when the user moves their mouse.
2. As the branch draws, it maintains an array of the points it draws to, and a dictionary of child branches and the array index they split off at. This lets me redraw a branch from scratch, from its start, to the position where a child split off from it.

While it wasn’t hugely complicated, it was an interesting programming exercise trying to architect it in a clean way (without relying on things like singletons or root references), and getting it to work properly.

Now I need to try to think of something neat to do with this logic. Ideas are welcome. 🙂

In the previous tree drawing demo, Maz pointed out that the first tree to draw always looks the same if you reload the page. This is because I am using a seeded random class I’ve been working on, and will share in the next few days. The first draw always uses the same seed, whereas subsequent draws (when you click the SWF) use a random seed. I decided to leave that behaviour intact for this demo so people could check it out. If it doesn’t draw the same tree for you each time you reload, let me know your OS, browser, and player version – I’m studying how parts of this work with garbage collection and memory allocation on different systems. More on that in a future post.

Continue reading →

Having grown tired of playing with circular branching experiments (hairball, inktest, flowerGlobe), I decided to tackle generating random trees with my new AS3 branching library.

It only took about 1 hour (plus a couple of hours tweaking numbers), versus a week or two for the original AS2 experiments (sakura, tree), and the results are vastly superior (from a realism perspective, if not yet artistically). Much of this was experience, but a lot of it was AS3 and the branching library giving me the freedom to explore the subject without worrying too much about performance or architecture. I also spent some time looking at real trees and really examining their shape and growth patterns – the advantage of winter in Edmonton is that it’s really easy to see branch structure.

I plan to see if I can make parts of this interactive, and hopefully create a 3D version in the not too distant future, either with PaperVision, or a simpler custom 3D engine (leaning towards the latter to begin).

It’s a little too large to embed here, so you’ll have to click the screenshot below to open the demo. You’ll need a large monitor (> 1200×1200 pixels) to view this well.

Continue reading →

Another branching experiment. This time focusing on how much visual complexity I can generate while maintaining reasonable performance, and some aesthetic appeal.

This experiment generates about half a million individual branch object instances (with about three thousand active at any time), and about 5 million line segments in a minute or two (depending on your CPU speed). Probably not a record of any kind, but neat to see nonetheless.

It’s a little too large to embed here, so you’ll have to click the screenshot below to open the demo. You’ll need a large monitor (> 1200×1200 pixels) and a fast CPU (2ghz+) to view this well.

Continue reading →