Tag Archives: as3

JS Sketch Experiment

By Zevan | October 5, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width=950, height=600)]
  2. with (graphics) beginFill(0xefefef), drawRect(0,0,stage.stageWidth, stage.stageHeight);
  3. var btn:Sprite = Sprite(addChild(new Sprite()));
  4. with (btn.graphics) beginFill(0x666666), drawRect(0,0,100,20);
  5. with(btn)  x=320, y=430, buttonMode = true;
  6. btn.addEventListener(MouseEvent.ROLL_OVER, function():void{
  7.   with(btn.graphics) clear(), beginFill(0x222222), drawRect(0,0,100,20);
  8. });
  9. btn.addEventListener(MouseEvent.ROLL_OUT, function():void{
  10.   with(btn.graphics) clear(), beginFill(0x666666), drawRect(0,0,100,20);
  11. });
  12. btn.addEventListener(MouseEvent.CLICK, function():void{
  13.     var res:*= ExternalInterface.call("function(){ plot=[]; colors=[]; " + txt.text + " return {plot:plot, colors:colors};}");
  14.     render((res == null) ? {plot:[], colors:[]} : res);
  15. });
  16.  
  17. var v:Shape = Shape(addChild(new Shape()));
  18. v.x = 700;
  19. v.y = 220;
  20. function render(obj:Object):void{
  21.     var plot:Array = obj.plot;
  22.     var colors:Array = obj.colors;
  23.     var leng:int = plot.length;
  24.     v.graphics.clear();
  25.     var inc:int = 0;
  26.     v.graphics.moveTo(plot[0], plot[1]);
  27.     for (var i:int = 2; i<leng; i+=2){
  28.         v.graphics.lineStyle(0,colors[inc++]);
  29.         v.graphics.lineTo(plot[i], plot[i + 1]);
  30.     }
  31. }
  32.  
  33.  
  34. var submit:TextField = TextField(btn.addChild(new TextField()));
  35. submit.defaultTextFormat = new TextFormat("_sans", 12);
  36. with(submit) textColor=0xFFFFFF, width=100, autoSize="center";
  37. with(submit) mouseEnabled = false,  text="submit";
  38.  
  39. var txt:TextField = TextField(addChild(new TextField()));
  40. with(txt) x = y = 20, type = "input", multiline=true;
  41. with(txt) width = 400, height = 400, border = true, background = 0xFFFFFF;
  42. txt.defaultTextFormat = new TextFormat("Monaco", 12);
  43. txt.text = "enter text";
  44. txt.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
  45. function onDown(evt:MouseEvent):void{
  46.     txt.text = "";
  47.     txt.removeEventListener(MouseEvent.MOUSE_DOWN, onDown);
  48. }

This snippet is a mini code editor that allows the user to write javascript into a textfield - the javascript is then run using external interface. Optionally the javascript code can populate two arrays (plot and colors). If these arrays are populated flash, will render the data in each array using the Graphics class.

Have a look at the demo:

If you do something nice with this... post your javascript snippet as a comment and I'll add it to the JS Sketch page...

Posted in Graphics, Math, dynamic, external data, functions | Also tagged , , | Leave a comment

E8 Inspired Forms

By Zevan | October 2, 2009

This doesn't have much to do with E8.. but it is vaguely inspired by it...

View the demo... (source code is below)

CLICK HERE TO COPY
Actionscript:
  1. var hw:Number = stage.stageWidth / 2;
  2. var hh:Number = stage.stageHeight / 2;
  3.  
  4. var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight, false, 0x333333);
  5. addChild(new Bitmap(canvas));
  6. var vector:Shape = Shape(addChild(new Shape()));
  7.  
  8. // contrast
  9. var cm:ColorMatrixFilter = new ColorMatrixFilter([2.6,0,0,0,-101.6,0,2.6,0,0,-101.6,0,0,2.6,0,-101.6,0,0,0,1,0]);
  10. filters = [cm];
  11.  
  12. var over:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight, false, 0x333333);
  13. var frm:Bitmap = Bitmap(addChild(new Bitmap(over)));
  14.  
  15. frm.blendMode = BlendMode.OVERLAY;
  16.  
  17. var dotNum:int = 250;
  18. var dotConnected:int = 0;
  19. var curr:int = 0;
  20. var prevConnected:int = -1;
  21. var dots:Vector.<Point> = new Vector.<Point>(dotNum, true);
  22.  
  23. // consider altering this value manually
  24. var step:Number =  Math.random()*10
  25.  
  26. var theta:Number = -.5234;
  27. for (var i:int= 0; i <dotNum; i++){
  28.     var r:Number = 280
  29.     theta += step;
  30.     var xp:Number = hw + r  * Math.cos(theta);
  31.     var yp:Number = hh + r * Math.sin(theta);
  32.     dots[i] = new Point(xp, yp);
  33. }
  34.  
  35. var col:uint = 0xFFFFFF;
  36. var a:Point, b:Point;
  37. var connections:int = 0;
  38.  
  39. var txt:TextField = TextField(addChild(new TextField()));
  40. txt.defaultTextFormat = new TextFormat("_sans", 12);
  41. txt.textColor = 0x555555, txt.x = 10, txt.y = 10;
  42. txt.autoSize = "left";
  43. txt.text = step.toString();
  44.  
  45. addEventListener(Event.ENTER_FRAME, onLoop);
  46. function onLoop(evt:Event):void{
  47.      
  48.     over.applyFilter(canvas, over.rect, new Point(0,0), new BlurFilter(10,10, 1));
  49.    
  50.     for (var i:int = 0; i<100; i++){
  51.         if (dotConnected <dotNum - 1){
  52.             if (prevConnected != dotConnected){
  53.                 a = dots[dotConnected];
  54.             }
  55.             prevConnected = dotConnected;
  56.             b = dots[curr];
  57.             curr++;
  58.            
  59.             if (a != b){
  60.                 connections++;
  61.                 vector.graphics.clear();
  62.                 vector.graphics.lineStyle(0,col,0.05);
  63.                 vector.graphics.moveTo(a.x, a.y);
  64.                 vector.graphics.lineTo(b.x, b.y);
  65.                 canvas.draw(vector);
  66.             }
  67.             if (curr> dotNum - 1){
  68.                 curr = 0;
  69.                 dotConnected++;
  70.                 col =[0,0xFFFFFF][int(Math.random()*2)];
  71.             }
  72.         }else{
  73.             break;
  74.             trace("done");
  75.             removeEventListener(Event.ENTER_FRAME, onLoop);
  76.         }
  77.     }
  78. }

Posted in BitmapData, Math, misc | Also tagged , | Leave a comment

QuickBox2D Mini-Machine

By Zevan | October 1, 2009

Since this is a rather large snippet check out this demo first:

View Demo...

and here is the source:

CLICK HERE TO COPY
Actionscript:
  1. import com.actionsnippet.qbox.*
  2. import Box2D.Collision.Shapes.*;
  3. import Box2D.Common.Math.*;
  4.  
  5. [SWF(width = 800, height = 600, backgroundColor = 0x000000, frameRate = 60)]
  6.  
  7. var sim:QuickBox2D = new QuickBox2D(this, {debug:true});
  8.  
  9. var sw:Number = stage.stageWidth / 30;
  10. var sh:Number = stage.stageHeight / 30;
  11.            
  12. sim.addBox({x:sw / 2, y:sh, width:sw - 3, height:1,  density:.0})
  13. sim.addBox({x:sw / 2, y:0, width:sw - 3, height:1,  density:.0 })
  14. sim.addBox({x:0, y:sh / 2, width:1, height:sh ,  density:.0})  
  15. sim.addBox({x:sw, y:sh / 2, width:1, height:sh,  density:.0})  
  16.  
  17. var slider:QuickObject = sim.addBox({x:3, y:6, width:6, height:0.25, density:0, angle:0.05});
  18. var pusher:QuickObject = sim.addBox({x:15, y:18, width:4, height:4, density:0});
  19.  
  20. sim.setDefault({collideConnected:false, frequencyHz:10});
  21. var anchor:QuickObject = sim.addCircle({x:3, y:2, radius:0.2, density:0});
  22.  
  23. var m0:QuickObject = sim.addBox({x:3, y:5, width:1, height:0.25, fixedRotation:true});
  24.  
  25. var j0:QuickObject = sim.addJoint({type:"distance", a:anchor.body, b:m0.body});
  26.  
  27. var m1:QuickObject = sim.addBox({x:2.5, y:9.5, width:0.25, height:6, fixedRotation:true});
  28. var m2:QuickObject = sim.addBox({x:3.5, y:9.5, width:0.25, height:6, fixedRotation:true});
  29.  
  30. var j1:QuickObject = sim.addJoint({type:"distance", a:m0.body, b:m1.body});
  31. var j2:QuickObject = sim.addJoint({type:"distance", a:m0.body, b:m2.body});
  32. var j3:QuickObject = sim.addJoint({type:"distance", a:m2.body, b:m1.body});
  33.  
  34. var boxes:Array = [];
  35. var boxNum:int = 21;
  36. var index:int = boxNum;
  37. var filter:b2FilterData;
  38. var lookupQuickObject:Dictionary = new Dictionary();
  39. for (var i:int = 0; i<boxNum; i++){
  40.     boxes[i] = sim.addBox({x:3, y:6.3 + i * 0.3, width:0.6, height:0.3,  friction:0.0, allowSleep:false});
  41.     lookupQuickObject[boxes[i].shape] = boxes[i];
  42. }
  43.  
  44. var m3:QuickObject = sim.addBox({x:3, y:12.25 , width:1, height:0.25, allowSleep:false,fixedRotation:true, groupIndex:-1});
  45.  
  46. var j4:QuickObject = sim.addJoint({type:"revolute", a:m1.body, b:m3.body});
  47. var j5:QuickObject = sim.addJoint({type:"revolute", a:m2.body, b:m3.body});
  48.  
  49. var t:Number = Math.PI;
  50. var dropBox:int = 0;
  51. var prevBox:QuickObject;
  52. var resetVec:b2Vec2 = new b2Vec2(0,0);
  53.  
  54. function setGroupIndex(b:QuickObject, index:int):void{
  55.     filter = b.shape.GetFilterData();
  56.     filter.groupIndex = index;
  57.     b.shape.SetFilterData(filter);
  58. }
  59.  
  60. sim.start();
  61. sim.addEventListener(QuickBox2D.STEP, onStep);
  62. function onStep(evt:Event):void{
  63.     dropBox++;
  64.    
  65.     if (dropBox % 80 == 0){
  66.         index--;
  67.         if (index> -1){
  68.             if (prevBox){
  69.                 setGroupIndex(prevBox, 1);
  70.             }
  71.             prevBox = boxes[index]
  72.             setGroupIndex(boxes[index], -1);
  73.             m3.y += 0.05;
  74.         }
  75.     }
  76.    
  77.     if (index <0){
  78.         if (pusher.x> 3.5){
  79.             pusher.x -= 0.05;
  80.         }
  81.     }
  82.     for (var i:int = 0; i<boxNum; i++){
  83.         if (boxes[i].y> 22){
  84.             boxes[i].angle = 0;
  85.             boxes[i].y = -2;
  86.             boxes[i].x = 1;
  87.             boxes[i].body.SetLinearVelocity(resetVec);
  88.         }
  89.     }
  90.    
  91.     if (index> 0){
  92.       anchor.x = 6 + 3 * Math.cos(t);
  93.       t += 0.01;
  94.     }
  95. }

Posted in Box2D, QuickBox2D | Also tagged , , , | 9 Comments

QuickFRIM

By Zevan | September 30, 2009
CLICK HERE TO COPY
Actionscript:
  1. import com.actionsnippet.animation.*;
  2.  
  3. stage.frameRate = 60.0;
  4.  
  5. // args: main display object, Hz
  6. var frim:QuickFRIM = new QuickFRIM(this, 60.0);
  7.  
  8. // start QuickFRIM internal loop
  9. frim.start();
  10.  
  11. // listen for step and render
  12. frim.addEventListener(QuickFRIM.STEP, onStep);
  13. frim.addEventListener(QuickFRIM.RENDER, onRender);
  14.  
  15. // happes from 0 or more times per frame depending on your framerate and desired Hz
  16. function onStep(evt:Event):void {
  17.      //
  18. }
  19.  
  20. // happens once per frame after all STEP events have
  21. // been dispatched
  22. function onRender(evt:Event):void{
  23.      // number of times a step even was dispatched this frame
  24.      trace(frim.stepsPerFrame);
  25. }

I have been using this QuickFRIM class for the past few days and have been pretty happy with it. Being someone who still occasionally likes to roll their own AS animation... with Zeno's, Hooke's, Polar Coordinates etc... Having a simple solution for frame-rate independent motion is nice... especially for small games... I used to have a more complex technique for this that was significantly harder to maintain. The above is just the basic setup for using the class.

The most important part of the class is the Hz (Hertz) argument in the QuickFRIM constructor. This should be set to how many times you want your step event to be dispatched per second. Usually this would simply be set to your target fps... so if your swf fps is 30, you should probably pass 30 to the QuickFRIM constructor. If you were to have an fps of 30 and pass 60Hz to your constructor... the step event would consistently dispatch 2 times per frame. If you had an Hz of 10 and an fps of 30, your step even would only get triggered every three frames etc...

Here's a demo...

I should note that I spent some time looking at different FRIM implementations online and in the end I found this thread https://developer.playfirst.com/node/860 which my implementation is significantly based upon.

Here's the code for the class
Here you can download a zip of the class

... and here is some very quick documentation
QuickFRIM:

/*
@param main - the main timeline or other DisplayObject
@param hz - Hertz for he timeStep
*/
new QuickFRIM(main:DisplayObject, hz:Number = 60.0)

// dispatched every time a step even occurs
QuickFRIM.STEP

// dispatched after all step events have occurred at the end of the frame
QuickFRIM.RENDER

// start dispatching events
public function start();

// stop dispatching events
public function stop();

// 1.0 / Hertz
public var timeStep:Number;

// total number of time steps that have been dispatched
public var totalTimeSteps:Number=0;

// numer of step events dispatched this frame
public var stepsPerFrame:int=0;

// boolean to disable FRIM
public var disable:Boolean = false;

Posted in motion | Also tagged , | Leave a comment