By Zevan | February 6, 2009
Actionscript:
-
// for simplicity I left this XML inline, this will work exactly the same if it were external
-
var program:XML=<body>
-
<draw>
-
<![CDATA[
-
beginFill(0xFF0000);
-
drawCircle(100,100,50);
-
endFill();
-
lineStyle(0, 0x666666);
-
moveTo(100, 100);
-
lineTo(200, 200);
-
moveTo(300, 200);
-
curveTo(350, 300, 400, 200);
-
lineStyle(0, 0x0000FF);
-
drawRect(200, 50,100,100) ;
-
]]>
-
</draw>
-
</body>;
-
-
// parse and run the Graphics class commands from the XML
-
render(parseFunctions(program.draw.toString()));
-
-
function parseFunctions(dat:String):Array{
-
var a:Array = dat.split(";") ;
-
for (var i:int = 0; i<a.length-1; i++){
-
a[i] = a[i].split(/\(\)|\(|\)/g);
-
var f:String = a[i][0] = a[i][0].replace(/\s/g,"");
-
a[i] = a[i].splice(0, a[i].length - 1);
-
if (a[i].length> 1){
-
a[i] = a[i][1].split(",");
-
a[i].unshift(f);
-
}
-
}
-
return a.splice(0,a.length - 1);
-
}
-
function render(p:Array):void {
-
for (var i:int = 0; i<p.length; i++) {
-
graphics[p[i][0]].apply(graphics,p[i].splice(1));
-
}
-
}
The above code builds on yesterdays post by showing how one could potentially store graphics class method calls in XML using a few regular expressions and Function.apply().
The parseFunctions() function reads through the CDATA string and formats it in a 2D array that looks like this:
Actionscript:
-
[[beginFill, 0xFF0000], [drawCircle, 100, 100, 50], etc...]
The render() function reads through this 2D array, using the first value of each nested array as the function and the remaining values as arguments...
As is this won't really work with most of the new fp10 graphics methods...
By Zevan | February 5, 2009
Actionscript:
-
var cmds:Array = [["lineStyle", 0, 0xFF0000], ["drawCircle",100, 100, 50], ["drawRect", 50, 50, 100, 100]];
-
cmds.push(["drawCircle", 100, 100, 70]);
-
cmds.push(["beginFill", 0x555555]);
-
cmds.push(["drawRoundRect", 80, 80, 40, 40, 10, 10]);
-
cmds.push(["endFill"]);
-
-
render(cmds);
-
-
function render(p:Array):void {
-
for (var i:int = 0; i<p.length; i++) {
-
graphics[p[i][0]].apply(graphics,p[i].splice(1));
-
}
-
}
The above creates a function called render() that takes a 2D array of Graphics class methods and then runs them. This is a very interesting technique, specifically if you'd like to write Graphics class method calls in an XML or txt file and then have them run on a given DisplayObject in flash.
I've been thinking about the best way to do this for awhile... I started off doing something very convoluted and then realized that I could use Function.apply()....
Tomorrow I'll post a snippet showing how to use this function in conjunction with XML.
By Zevan | February 4, 2009
Actionscript:
-
[SWF(width=900,height=390,backgroundColor=0x000000,frameRate=30)]
-
-
var canvas:BitmapData=new BitmapData(4,8,false,0xFFFFFFFF);
-
var pixNum:int = canvas.width * canvas.height;
-
-
var frame:Bitmap = Bitmap(addChild(new Bitmap(canvas)));
-
frame.scaleX = frame.scaleY = canvas.width * 10;
-
frame.x = stage.stageWidth / 2 - frame.width / 2;
-
frame.y =20;
-
-
var txt:TextField = TextField(addChild(new TextField()));
-
txt.autoSize = TextFieldAutoSize.LEFT;
-
txt.defaultTextFormat = new TextFormat("Verdana", 8, 0xFFFFFF);
-
txt.x = frame.x - 3;
-
txt.y = frame.y + frame.height + 10;
-
-
var s:String, a:Number = 0, d:Number = 0;
-
var r:Number = 0xFFFFFFFF / (stage.stageWidth-20) ;
-
-
addEventListener(Event.ENTER_FRAME, onLoop);
-
function onLoop(evt:Event):void {
-
a += (d - a) / 8;
-
-
d = (mouseX-10) * r;
-
-
s = Math.max(0,Math.min(0xFFFFFFFF, a)).toString(2);
-
-
if (s.length <pixNum){
-
while(s.length-1 <pixNum){
-
s = "0" + s;
-
}
-
}
-
-
txt.text = s;
-
-
canvas.lock();
-
canvas.fillRect(canvas.rect, 0xFFFFFF);
-
for (var i:int = 0; i<pixNum; i++){
-
if (s.charAt(i) == "0"){
-
canvas.setPixel(i % 4, i / 4, 0x000000);
-
}
-
}
-
canvas.unlock();
-
}
Similar to yesterdays post... this snippet visualizes binary numbers. Move your mouse left and right to change the value of the number that's being displayed.
Here are a few stills:
This code uses the mouse position to choose which binary number to display. Going all the way to the left of the screen will set this number to 0 and going all the way to the right will set it to 4294967295... that number may look arbitrary unless you see it in in binary 11111111111111111111111111111111 or in hexadecimal 0xFFFFFFFF.
By Zevan | February 3, 2009
Actionscript:
-
[SWF(width=320,height=512,backgroundColor=0x000000,frameRate=30)]
-
-
var canvas:BitmapData=new BitmapData(32,512,false,0xFFFFFF);
-
addChild(new Bitmap(canvas)).scaleX = 10;
-
-
var a:uint ;
-
var s:String;
-
var m:Number = 0;
-
var d:Number = 0;
-
var mi:int ;
-
var r:Number = 0xFFFFFF / stage.stageWidth;
-
-
addEventListener(Event.ENTER_FRAME, onLoop);
-
-
function onLoop(evt:Event):void {
-
-
d = mouseX * r;
-
m += (d - m) / 30;
-
-
mi = int(m);
-
-
canvas.lock();
-
canvas.fillRect(canvas.rect, 0xFFFFFF);
-
-
a = 0xFFFFFFFF;
-
for (var i:int = 0; i<512; i++) {
-
s = (a -= mi).toString(2);
-
for (var j:int = 0; j<s.length; j++) {
-
if (s.charAt(j)=="0") {
-
canvas.setPixel(j, i, 0x000000);
-
}
-
}
-
}
-
canvas.unlock();
-
}
The above uses setPixel() to visualize numbers in binary format. You can move your mouse left and right to change an incremental counting value....
Here's a still generated by this snippet:
