Grant Skinner

The "g" in gskinner. Also the "skinner".

@gskinner

Interactive Elm Tree: Backtracing Branches

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 →

Elm Tree Branching Experiment

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 →

An Exercise in Creative Complexity

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 →

Branching Experiment: Ink Test

Continuing to play with my AS3 branching library. Focusing on texture and style, rather than the structure of the branching right now. This is an attempt to mimic ink on paper with bleed, fade, spatters, and “wiggle”, while keeping runtime performance acceptable. I’ll probably keep tweaking for a bit, then re-envision the logic for tree drawing that I used in my Sakura experiments.

Continue reading →

Spelling Plus Library 1.1 Released for Flash, Flex, AIR

Today we’re releasing version 1.1 of our spell checking engine for ActionScript 3. Version 1.0 of Spelling Plus Library has been available for three months, and has been well received, with very positive feedback from our users. Amazingly we’ve only had a single bug report, and that turned out to be an issue with the Flex framework, rather than our code.

We have had a couple of feature requests, and came up with a few ideas of our own, which version 1.1 of the component addresses. Specific additions include:

  1. ability to turn off spell checking for the currently selected word (ie. so that it doesn’t flag a word as misspelled while you are still typing it).

  2. automatically enable/disable spellchecking on a target text field when it is focused / unfocused.

  3. better integration with Flex data binding.

We’re very committed to maintaining Spelling Plus Library as the best of breed spell checker library for Actionscript (Flash, Flex, AIR). It’s kind of nice to be able to provide support directly, unlike all of our previous components (ex. glic/mCOM and the Flash CS3 components). It means we can ensure the support experience for our users is as exceptional as the code behind the component.

You can visit the Spelling Plus Library product page for demos and more information.

Existing users: SPL 1.1 is a free release, expect your upgrade information within the next day.

ProximityManager updated for AS3

A few years ago, I released an AS2 version of ProximityManager class, which allows you to efficiently track the proximity of large numbers of sprites. You can read a full description of the approach and uses here.

In the last month a couple of people have left comments indicating that they were having difficulty porting it to AS3. This prompted me to port it and do some significant optimizations. The new class runs a lot faster than the original, and is worth taking a quick look at in comparison with the AS2 version even if you don’t use it in a project.

Optimizations:

  1. removed two-dimensional arrays (which are very inefficient, especially in AS3) in favor of using a single array using an aggregate x/y index. The aggregate index is assembled with bit operators to make it even more efficient.
  2. added a simple caching mechanism, so that subsequent calls to getNeighbor for the same grid position do not need to recalculate the results
  3. used a Dictionary instance to hold managed items, which makes it much more efficient to remove objects on the fly.
  4. took full advantage of types and casting
  5. other minor tweaks

Note that these optimizations impose a limit of +/- 1024 rows and columns on the ProximityManager. This shouldn’t be an issue though: even with a gridSize of only 25 pixels, you would still have an area of 51200 pixels wide and high to work with.

Continue reading →

Adobe Exchange: Worth a Look.

While I was vaguely aware of the Adobe Exchange, I hadn’t really checked it out until a recent purchaser of our Spelling Plus Library mentioned that he had been unable to find our component on it. While the Exchange is still in beta, and has some rough edges, it’s looking pretty good overall. I was able to submit SPL, and have it moderated and listed in under 48 hours.

I think one of the major weaknesses of the Flash platform is the lack of a strong component and source code ecosystem. The Exchange provides one of the key elements needed to grow this ecosystem: Providing a central location for finding and rating third party components.

Continue reading →