blog helm shadow

I whipped up a pixel bender filter that measures the hypotenuse between each pixel and a point on the center of the screen. It then multiplies this by a timestamp and places the tangent of that number in each color channel the pixel. The multiplier causes interesting patterns to emerge. This displays the beginning stages of my previous experiment and it is animated!

dx = pixel.x – center.x
dy = pixel.y – center.y
value = tan(sqrt(dx*dx+dy*dy)*speed*.001)
r = g = b = value
color = r | g | b

CAUTION: This is a little mesmerizing. If you are epileptic beware.

click to execute flash

FULLSCREEN!

Update(08-20-10): You can now control the speed of the simulation with your keyboard!
//Speed++ = Right Arrow
//Speed+10 = Up Arrow
//Speed– = Left Arrow
//Speed-10 = Down Arrow
//Speed=0 = Space
//Reset = Backspace or ‘r’
//The number in the bottom left hand corner of the screen displays the speed at which it is traveling
//Hide speed text = Enter

This experiment simply draws the pixels from your webcam to a canvas and compares each successive webcam frame to that canvas. If the pixel’s color is closer to the key image, it draws it to the canvas.

click to execute flash

While tinkering with the coloring of some particles I came across some cool patterns based on the hypotenuse of the angles around a point. This demo simply grabs the hypotenuse of each pixel to the center of the stage and multiplies it by a multiplier to get each color channel. If the channel is 255 or less, circles are simply displayed, but when it is larger and the bitmask applies, interesting textures begin to emerge. Drag the slider at the bottom to change the multiplier.

click to execute flash

The contents of the function are as follows:

1
2
3
4
5
6
7
8
9
10
11

var buffer:Vector.<uint> = new Vector.<uint>;
for (var y:int = 0; y < _height; y++) {
	for (var x:int = 0; x < _width; x++) {
		var mod:Number = Math.sqrt((_centerX - x) * (_centerX - x) + (_centerY - y) * (_centerY - y)) * _multiplier;
		var color:uint = ((0xFF * mod) & 0xFF) << 16 | ((0xFF * mod) & 0xFF) << 8 | ((0xFF * mod) & 0xFF);
		buffer[y * _width + x] = color;
	}
}
_screen.lock();
_screen.setVector(_screen.rect, buffer);
_screen.unlock(_screen.rect);

Check it out fullscreen!

click to execute flash

Here is Conway’s Game of Life using straight AS3 and no pixel bender. At first I created a straight forward implementation, reading each cell and analyzing the neighbors. This was dreadfully slow in straight as3, so I looked into other solving techniques. I ended up using a technique similar to Tony Finch’s List Life and Keno März’s. By only keeping track of the live cells it is easy to determine the relative neighbors and skip the whitespace, saving a very decent amount of processing time. The result is much faster than the pixel bender version I previously implemented. I will be continuing to extend features and optimize this version.

‘space’ pauses the simulation.
While paused, you can step a single iteration by pressing the ‘right’ arrow.
‘w/a/s/d’ moves the player cell.
‘up/down/left/right’ shoots a cell in that direction.
‘ctrl’+click warps the player cell to the mouse location.
clicking and/or dragging on the stage adds cells for the simulation to solve.
edit the brush by clicking on it’s icon or “draw”.
dragging the ’100%’ button allows you to zoom in up to 600%.

Check it out fullscreen!

After writing the 1d cellular automation engine using pixel bender I was surprised at just how long it takes ShaderJob to execute. The best way to use pixel bender for this purpose would be to solve every generation in the same ShaderJob. This version, however, was written in pure AS3 and is faster than the previous incarnation, but lacks the animation while rendering. Rule 89 is default this time.

click to execute flash

View the source

I needed, well desired, a CLI console for my projects so I could add debug commands easily or insert easter eggs. It is pretty simple, but I figure this might come in handy to someone else.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144

package com.shs.utils
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.KeyboardEvent;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import flash.utils.Dictionary;
 
	/**
	 * Command Line Interface
	 * @author Ian Reichert-Watts
	 * www.shadowhelm.com
	 */
public class CLI extends Sprite
{
	private var _parent:Object;
	private var _prompt:TextField = new TextField();
	private var _cmd:TextField = new TextField();
	private var _view:TextField = new TextField();
	private var _format:TextFormat = new TextFormat("sans", 12, 0xFFFFFF);
 
	private var _color:uint;
	private var _alpha:Number;
	private var _height:int;
 
	private var _commands:Dictionary = new Dictionary();
 
	public function CLI(parent:Object, color:uint = 0x000000, alpha:Number = .7, height:int = 64) {
		_parent = parent;
		_color = color;
		_alpha = alpha;
		_height = height;
		this.graphics.beginFill(color, _alpha);
		this.graphics.drawRect(0, 0, _parent.stage.stageWidth, _height);
		this.addChild(_prompt);
		_prompt.autoSize = "left";
		_prompt.y = _height - 20;
		_prompt.defaultTextFormat = _format;
		_prompt.text = ">";
		_prompt.selectable = false;
		this.addChild(_cmd);
		_cmd.height = 20;
		_cmd.width = _parent.stage.stageWidth;
		_cmd.y = _height - 20;
		_cmd.x = 10;
		_cmd.defaultTextFormat = _format;
		_cmd.type = "input";
		this.addChild(_view);
		_view.height = 20;
		_view.width = _parent.stage.stageWidth;
		_view.wordWrap = true;
		_view.autoSize = "left";
		_view.y = _height - _view.height - 20;
		_view.defaultTextFormat = _format;
		_view.selectable = false;
		_parent.addChild(this);
		this.visible = false;
		listen();
	}
 
	public function listen():void {
		_parent.stage.addEventListener(KeyboardEvent.KEY_UP, onKeyUp, false, 0, true);
	}
 
	public function silence():void {
		_parent.stage.removeEventListener(KeyboardEvent.KEY_UP, onKeyUp);
	}
 
	public function display():void {
		this.visible = true;
		_parent.stage.focus = _cmd;
		_cmd.setSelection(_cmd.text.length, _cmd.text.length);
	}
 
	public function clear():void {
		if (_cmd.text.slice(_cmd.text.length - 1, _cmd.text.length) == "`") {
			_cmd.text = _cmd.text.slice(0, _cmd.text.length-1);
		}
		this.visible = false;
	}
 
	public function toggle():void {
		if(!this.visible) display();
		else clear();
	}
 
	public function setCommand(command:String, functionName:String):void {
		_commands[command] = functionName;
	}
 
	public function appendText(text:String):void {
		_view.appendText("\n"+text);
		_view.y = _height - 20 - _view.height;
	}
 
	private function onKeyUp(e:KeyboardEvent):void {
		switch (e.keyCode) {
			case 192: 
				toggle();
				break;
			case 13:
				var func:Array = _cmd.text.split(" ");
				_view.appendText("\n~ "+_cmd.text);
				_view.y = _height - 20 - _view.height;
				_cmd.text = "";
				if (_commands[func[0]]) {
					var command:Function = _parent[_commands[func[0]]] as Function;
					switch (func.length) {
						case 1:
							command();
							break;
						case 2:
							command(func[1]);
							break;
						case 3:
							command(func[1],func[2]);
							break;
						case 4:
							command(func[1],func[2],func[3]);
							break;
						case 5:
							command(func[1],func[2],func[3],func[4]);
							break;
						case 6:
							command(func[1],func[2],func[3],func[4],func[5]);
							break;
						case 7:
							command(func[1],func[2],func[3],func[4],func[5],func[6]);
							break;
						case 8:
							command(func[1],func[2],func[3],func[4],func[5],func[6],func[7]);
							break;
						case 9:
							command(func[1],func[2],func[3],func[4],func[5],func[6],func[7],func[8]);
							break;
					}
 
				}
				break;
		}
	}
}
}

To use it, simply initialize the class and then add commands to the console using setCommand

1
2
3
4
5

var _console:CLI;
//new CLI(parent:Object, color:uint = 0x000000, alpha:Number = .7, height:int = 64)
_console = new CLI(this);
//setCommand(command:String, functionName:String)
_console.setCommand("explorer", "toggleExplorer");

Please remember that you must make any command you call from this class public or it will not see it.

Download the class

Update (06-14-10):
Parameters are now supported! When you call the function in the CLI, simply type “command param0 param1 etc”, using a space to delineate the parameters.

John Horton Conway’s Game of Life is the most well known 2d cellular automation around. It is dissimilar to my first attempt at 2d cellular automata in that rather than comparing the rule grid directly to the neighborhood grid and setting the entire thing to the action, it looks at the amount of live cells surrounding it and applies the rule based on that. I adapted my Pixel Bender 1d cellular automation engine into a 2d version that looks at the immediate surrounding neighborhood. After counting the number of live neighbors, it sets the state of the cell based on the 3 rules of Conway’s Game of Life:
1. Any live cell with fewer than two live neighbours dies, as if caused by underpopulation.
2. Any live cell with more than three live neighbours dies, as if by overcrowding.
3. Any dead cell with exactly three live neighbours becomes a live cell.

click to execute flash

//You must click the stage to activate the keyboard at the moment. :/
//’w/a/s/d’ moves the player pixel.
//’up/down/left/right’ fires pixels in that direction.
//’Esc’ pauses the simulation.
//’Enter’ randomly generates pixels.
//’~’ opens the command line interface. ['explorer' (toggle explorer mode); 'god/tgm/noclip' (the controllable pixel will not die)]
//Dragging on the screen will draw a spray of pixels. You can alter the amount of pixels and the radius of the spray by altering the ‘spray’ and ‘radius’ values.
//’Ctrl’+click teleports the player pixel to the mouse pointer (Only in explorer mode.)
//Clicking on ‘draw’ will toggle between ‘draw’ and ‘erase’ functionality.

View the pixel bender kernel source.

Update(01-28-10): I added the ability to move a pixel around within the simulation and shoot out pixels like a top-down shooter game. Also added is a score counter that counts how many times you enter the dropzone(the orange square). In this simple game scenario, you must navigate yourself through the sea of automata to make it to the next level, which is an even more crowded sea of automata. I plan on adding at least one other game mechanic before packaging this up, but it is a start. I also added a command line interface to manage debug commands among other things.

click to execute flash

This 1 dimensional engine can create all 256 rules of elementary cellular automata. Rule 73 is my current favorite and is the default.

Download the source

shadowhelm is now hosted by slicehost. Load times are much snappier, and root access sure is swell!

click to execute flash

Recursion is when a function calls itself, iterating forever until escaped. This is awesome for consolidating code at the expense of readability. This drawSpring function recursively draws a spring using curveTo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

graphics.clear();
graphics.lineStyle(1, 0);
graphics.moveTo(-200, -200);
drawSpring(-200, -200, 200, 200, 100);
 
//x0 and y0 are the starting coordinates.  
//x1 and y1 are the end coordinates.  
//length specifies how long the spring is, and determines the amount of coils.  
//scale affects the diameter of the spring.  
//span affects the distance between <a href="http://www.adobe.com/livedocs/flash/9.0/ActionScriptLangRefV3/flash/display/Graphics.html#curveTo()">curveTo</a> segments (smaller = more detail).  
//starting rotation and the beginning iteration can also be specified.
 
function drawSpring(x0:int, y0:int, x1:int, y1:int, length:int = 1000, scale:Number = 20, span:Number = .5, rotation:Number = 0, iteration:int = 0, anchorX:int = -1, anchorY:int = -1, controlX:int = -1, controlY:int = -1 ):void {
	if(anchorX > -1){
		graphics.curveTo(anchorX, anchorY, (controlX + anchorX) * .5, (controlY + anchorY) * .5);
	}
	iteration++;
	if (iteration < length) {
		drawSpring(x0, y0, x1, y1, length, scale, span, rotation - span, iteration, controlX, controlY, x0 + (x1 - x0) / length * iteration + scale * Math.cos(rotation - span), y0 + (y1 - y0) / length * iteration + scale * Math.sin(rotation - span));
	}else graphics.curveTo(controlX, controlY, x1, y1);
}

Download the example scene

Also, google ‘recursion’ for a smile. Be sure to spell it right!

click to execute flash

It was about time I rendered a mandelbrot in AS3. I received some help from the psuedocode on the Mandelbrot Wikipedia entry, and I used the Normalized Iteration Count Algorithm for smooth coloring. Click to zoom in 2x, Shift-Click to zoom out, and press Spacebar to reset.

click to execute flash

I decided to write a 2d cellular automation engine in as3 the other morning. The left grid is the rule, and the right is the action. The solver analyzes the neighborhood of every pixel (my engine uses a Moore neighborhood that you can alter the size of), and upon finding the rule, evolves it into the action. You can create 6 of these rules that will be solved in succession. Performance does noticeably slow down for each additional rule though.

Update (12-24-09): You can now zoom out, tiling the canvas.

Having moved almost all of my work from Adobe Flash IDE to FlashDevelop a while back, I must say that my productivity has increased dramatically since then.  This is mostly due to the superior text editor and code hinting, but there are other reasons too, such as compiling and stability.

FlashDevelop uses mxmlc, which injects code changes after initially compiling your resources, saving you a ton of time on successive compiles.  I understand Adobe Flash Builder (previously Flex Builder) also uses this approach, and uses an eclipse based editor, which is far superior to Adobe Flash IDE’s.  I also understand that the actionscript editor in Adobe Flash CS5 will be greatly improved, though if it still has to recompile all resources every time, it still limits me to projects of smaller scale.  This causes me to create most of my vector graphic assets in Adobe Flash IDE and export a swc to use in my FlashDevelop project (or any other superior actionscript editor, such as FDT or Flash Builder).

Another major issue I have with Adobe Flash IDE is stability.  When Flash crashes on me, it is absolutely arbitrary.  I may be right clicking, dragging a symbol, or even saving my project, and suddenly I see desktop.

I still use Adobe Flash CS4 to edit MovieClip assets and prepare graphics/menus for easy construction via AS3.  Flash’s drawing functions have improved since Adobe purchased it, but I feel that they have also neglected and introduced a couple problems as well.

For one, when I zoom in with nothing selected I am transported to an area near the bottom of the stage.  Why not zoom into the reference point or my mouse cursor?

The handles on the Bone tool do not graphically scale properly when I zoom.  This makes it impossible to use bones with smaller symbols because the manipulators are larger than the manipulated objects.

The IDE also gets dreadfully sluggish with large scenes of vector data that would run just fine in Illustrator.

Shapes do not retain transform information in the IDE.  I understand this is not a real problem and has to do with the way the shapes are drawn, but I still believe it would be nice to be able to keep that transform info while the shapes are in the fla.  It would be also nice to be able to freeze the transform on shapes and symbols,  reseting the values and keeping the change.

I love the Flash platform and the IDE as well, but before I see new features on the horizon I wish that the current ones would get hammered into stone first.

Welcome to the dev blog of me, Ian Reichert-Watts. I occasionally build things.