PlayaroundNYC. A Visualization of Playground Access in New York City

I’ve recently submitted an entry to the NYC BigApps contest. My entry is called PlayaroundNYC and it is a visualization of how well supported New Yorkers are by public playgrounds as determined by walking distance and quality.



Pixie Dust. A Particle Experiment in Actionscript

One of the nice things about being a parent is getting to revisit movies you haven’t seen since you were a child. We’ve been on a classic Disney movie binge at my home and I’ve been really enjoying the movies from the 50s and early 60s.


Figure 1. Tinkerbell in Disney’s Peter Pan (1953).


Basic Flocking

The principles behind flocking behaviors were first demonstrated in a computer simulation in 1986 by Craig Reynolds. Flocking is an example of emergent behavior, which I touched on briefly in an ealier post about Conway’s Game of Life.

Flocking behaviors are a lot of fun to play with, but simulating them can be fairly processor intensive. In an earlier post, I talked about using proximity grids to increase performance in this type of simulation. In the demo at the bottom of this post, I have employed a proximity grid and an implementation of verlet integration to control the particle dynamics.

One of the problems I ran into when combining flocking behaviors with proximity grids is that flocking tends to subvert the ways in which proximity grids optimize. A proximity grid reduces processing by making it easy to skip any inter-agent reactions on agents which are far apart. Flocking on the other hand tends to take agents and clump them together into small areas, thereby thwarting some of the benefit of a proximity grid. This is not to say that the proximity grid doesn’t help, because it does, but a proximity grid is more effective in cases where particles are scattered somewhat evenly across an area. I was unable to simulate as many particles in this demo as I did in the proximity grid demo partly because of the clumping nature of flocks, but mostly because of the need to examine the direction in which a particle is heading (a costly operation).

Figure 1. Agents react to near neighbors according to the basic priniciples of flocking. The length of an agent’s tail is based on its current velocity.

The core principles of flocking are alignment, separation and cohesion. Each individual agent (e.g., particle, sprite) operates autonomously by following these 3 basic rules. Each agent can only “see” agents near them (their neighbors). Agents will avoid close contact with neighbors (separation), they will attempt to travel in the same direction as their neighbors (alignment), and they will attempt to navigate towards the average position of their neighbors (cohesion). By employing these 3 basic rules, a wide variety of complex group behaviors emerge.

I’ve built a simple demonstration of flocking in Actionscript which you can view at the bottom of this post. This demo requires Flash Player 9 or later.


Proximity Grid

This experiment is a byproduct of another project I’m working on which involves flocking behaviors. I was trying to maximize performance by eliminating the use of arrays and replacing them with a linked list structure. Generally speaking, direct pointers should be much quicker in Actionscript than accessing data through an array. In practice, I didn’t notice any improvement in performance when using a linked grid and reverted back to a single array in order to reduce code complexity. A linked grid is probably worth exploring further for elements that will not be screen rendered; for my purposes the additional complexity did not seem to yield any benefits.

I put this demo together as a way to test the linked grid concept, but I liked the test enough that I cleaned it up visually and added mouse interaction. Below are a couple of screenshots followed by the actual Flash demo you can interact with.

Figure 1. There are 450 invisible points bouncing around the screen. As they come close to each other, a line is drawn connecting them.

Figure 2. Result of points being repelled by a mouse release action.


Kicks Creator. Nike Launches a Flash 3D Shoe Designer

Nike has launched the “Nike Dunk: Kicks Creator”. The Kicks Creator allows Nike fans to design their own shoes by coloring and painting directly onto a 3D model of a Nike Dunk in Flash. The Kicks Creator goes beyond simply choosing colors, it allows Dunk fans access to an assortment of materials, design patterns, and graphics which they can use to completely personalize their sneakers.

After creating a shoe, designers can submit their creations into the Kicks Creator Battle, a head-to-head competition where the general public gets to determine the best designs.

The Nike Dunk: Kicks Creator was developed in Actionscript 3 and uses Papervision 2.0 to render the shoe model in real time. You can view one of my entries 3D.


GraphicsUtil. A Utility Class for Drawing Arrows

I recently had need of an arrow drawing function in Flash which I wanted to use to annotate diagrams. I was unable to find one through Google that suited my needs, so I decided to roll my own Actionscript class for drawing arrows. I tried to keep the arrow drawing interface easy to use but flexible. It draws a clean vector outline of the arrow, so you can use the graphics.lineStyle and graphics.beginFill to set the color styles.

Figure 1. A sample of the various styles of arrow that can be easily created with GraphicsUtil.drawArrow


« Older Entries