I recently ran across an interesting way to handle mouse events in a friend’s bit of code. I wanted to share it here. I feel like it hurts readability and is not always the preferred way to go about handling mouse events, but it certainly makes for some concise code. Quite good for when speed is of the essence.

1
2
3
4
5
6
7
8
9
10
11
12
13

button1.addEventListener(MouseEvent.CLICK, onClick)
button2.addEventListener(MouseEvent.CLICK, onClick)
 
function onClick(e:MouseEvent):void {
 switch(e.target.name){
  case "button1":
   //do something
   break;
  case "button2":
   //do something else
   break;
 }
}

I have a certain fascination with virtual worlds. I guess it stems from spending so much damn time in my head as a child, and once I got the internet, too much time role playing online. Perhaps most interesting to me is how virtual worlds have significant events that can affect the real world. Cracked has an interesting article ‘The biggest dick moves in online gaming history’, which contain a number of great examples of how our virtual worlds tend to spill over into the real world. Oftentimes the overlap between the two worlds create some very powerful moments. The most interesting and powerful to me are virtual worlds from earlier times. Perhaps I am merely looking back on history through rose-colored glasses, but the games those earlier games seemed to have a world that the players believed in more strongly than the current crop of MMOs. I suspect this is in part due to the lesser amount of players in those days (Koster’s Law), and also that, at that time, virtual worlds were a new, separate place.

These earlier worlds had a number of fascinating revelations take place for both the inhabitants and researchers of the worlds that we take for granted today. Both
A Rape in Cyberspace and A Story About a Tree exemplify people being amazed at the incredible power of the virtual worlds to affect those who inhabit them. Today it is no surprise when we hear about a couple first meeting through World of Warcraft, or a teen girl being bullied through the ‘Virtual World’ of Facebook.

I gather that what we have seen in the past decades years is a gradual merging of the virtual and real, such that events are no longer separate. Thus, a report on a virtual world is never about the virtual world anymore, but about the the real world and its virtual component. The characters within the virtual world are no longer seen as separate, but one-and-the-same as the players playing them. Years ago, I would have found this idea incredibly exciting. “Yes”, I would think, “finally the real and the fictional have combined together into a whole.” But now I feel a bit nostalgic for the day when virtual worlds were viewed as separate entities. Almost as uncharted lands to explore.

Every so often I come across a bit of animation that seems to capture a bit of awesome playfulness. I ran across this awesome piece of animation the other day, and the clouds reminded me of the clouds/smoke that seb_ly showed off in his creative JS workshop. So, taking cards from both of their hats, I have made a bit of a fun ‘cloud shaping’ tool.

Its mostly just a particle system. The only addition is that it accepts a bit of input looking for collisions within a radius of the mouse pointer, and then adds the pointer’s velocity to the particle.

Next time I think I will explore some blob physics to make those clouds clump together. Until then, I hope you have some fun with it.

A few weeks ago I developed an interest in generative art. This was primarily from my desire to follow in the path of a number of great Flash developers whose art tools were both amazing and inspiring. My search lead me to the generative art wiki, which while sparse, is certainly a good starting place for such things. One page in particular caught my eye: l-systems. These systems can be used to create some very complex and interesting simulations of plants & other abstract visuals (which I discovered quite by accident).

For the full (highly mathematical (and incredibly difficult for me to grok)) breakdown, I would direct you to The Algorithmic Beauty of Plants, which is about a decade and a half old, but still appears to be a great introduction to the subject. Here I will present my own work with l-systems in Actionscript 3 and Flash.

The (extremely) basic concept of an l-system is to generate progressively more complex strings given a start point and a set of transformations (called ‘productions’ or ‘production rules’). Anytime a rule is matched, the character is replaced with the characters from the rule. If no rule is matched, the character is copied into the new string unchanged. For example, an l-system may have a starting string of “A”, and a production rule of “A => BAB”. The first iteration of l-system will be “A”, the second “BAB”, the third “BBABB”, and so on.

(A quick note on the replacement: don’t do what I did and just run a quick stringReplace on each rule & iteration. It has to be done per character, especially as the rules get more complex. That isn’t to say the string replace produces some interesting results…)

In order to create something graphical, the production rules are linked up to a ‘turtle’ with each character affecting the movement of the drawing pointer. The ‘vocabulary’ of the rules is slightly extended in order to allow more complex actions. A basic 2D turtle uses the set of characters ‘F[]+-’.

• F: move forward by a set amount
• [: save turtle state (position, line size, heaving, etc)
• ]: Pop the last turtle state off the stack, and reset turtle to that state
• +/-: Rotate the turtle left or right by a set amount

Other letters may also be added into the vocabulary to be replaced by production rules later on. The first letter typically used is ‘X’.

So, taking a cue from the generative art wiki, a simple system may be defined by these rules:
w: X
p1: X → F[+X]F[-X]+X
p2: F → FF

and would result in

n = 0; X
n = 1; F[+X]F[-X]+X
n = 2; FF[+F[+X]F[-X]+X]FF[-F[+X]F[-X]+X]+F[+X]F[-X]+X

with a graphical representation similar to:

This should be enough to get going. For more information, I highly reccommend “The Algorithmic Beauty of Plants” mentioned earlier.

In addition, I made a little Flash example that randomizes some of the production rules. It creates some interesting results, though not as full-bodied as I would like.