Category Archives: Graphics

Nonsense Clocks

By Zevan | March 15, 2010
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width = 500, height=500, backgroundColor=0x000000)]
  2.  
  3. var clockNum:int = 100;
  4. var clocks:Vector.<Function> = new Vector.<Function>(clockNum, true);
  5.  
  6. var clockContainer:Sprite = Sprite(addChild(new Sprite()));
  7. clockContainer.x = stage.stageWidth / 2;
  8. clockContainer.y = stage.stageHeight / 2;
  9. buildClocks();
  10. runClocks();
  11.  
  12. function buildClocks():void{
  13.     for (var i:int = 0; i<clockNum; i++){
  14.         var theta:Number = Math.random() * Math.PI * 2;
  15.         var radius:Number = Math.random() * 200;
  16.         var xp:Number = radius * Math.cos(theta);
  17.         var yp:Number = radius * Math.sin(theta);
  18.         clocks[i] = makeClock(xp,yp,Math.random() * Math.PI * 2);
  19.     }
  20. }
  21. function runClocks():void{
  22.     addEventListener(Event.ENTER_FRAME, onRunClocks);
  23. }
  24. function onRunClocks(evt:Event):void{
  25.     for (var i:int = 0; i<clockNum; i++){
  26.         clocks[i]();
  27.     }
  28.     clockContainer.rotationX = clockContainer.mouseY / 30;
  29.     clockContainer.rotationY = -clockContainer.mouseX / 30;
  30. }
  31. function makeClock(x:Number, y:Number, time:Number=0):Function{
  32.     var radius:Number = Math.random() * 20 + 5;
  33.     var border:Number = radius * 0.2;
  34.     var smallRadius:Number = radius - radius * 0.3;
  35.    
  36.     var clock:Sprite = Sprite(clockContainer.addChild(new Sprite()));
  37.     clock.x = x;
  38.     clock.y = y;
  39.     clock.z = 100 - Math.random() * 200;
  40.     clock.rotationX = Math.random() * 40 - 20;
  41.     clock.rotationY = Math.random() * 40 - 20;
  42.     clock.rotationZ = Math.random() * 360;
  43.     return function():void{
  44.         with (clock.graphics){
  45.             clear();
  46.             lineStyle(1,0xFFFFFF);
  47.             drawCircle(0,0,radius + border);
  48.             var xp:Number = smallRadius * Math.cos(time/2);
  49.             var yp:Number = smallRadius * Math.sin(time/2);
  50.             moveTo(0,0);
  51.             lineTo(xp, yp);
  52.             xp = radius * Math.cos(time);
  53.             yp = radius * Math.sin(time);
  54.             moveTo(0,0);
  55.             lineTo(xp, yp);
  56.         }
  57.         time+=0.1;
  58.     }
  59. }


You can go check the swf out at wonderfl.net...

Also posted in 3D, misc, motion | Tagged , , | 3 Comments

Polar Coordinates Distribution

By Zevan | March 3, 2010

If you're at all interested in watching me free from code. I recorded a video of me coding this snippet (which is about 11 minutes long or so).

In the video I create a few functions that allow you to draw shapes like these:

Mathematically this stuff is really simple ... the free form nature of the video takes a less technical perspective as you'll see (I even made a few funny mistakes).



CLICK HERE TO COPY
Actionscript:
  1. [SWF(width = 600, height = 600)]
  2. var dotNum:int = 1000;
  3. var dotRad:Number = 0.5;
  4.  
  5. x = 120
  6. y = 100;
  7.  
  8. // extra stuff to display what the functions can do
  9. stage.addEventListener(MouseEvent.CLICK, onDrawAll);
  10.  
  11. function onDrawAll(evt:Event):void{
  12.     graphics.clear();
  13.     for (var i:int = 0; i<16; i++){
  14.         var m:Number;
  15.    
  16.         var rad:Number = 120;
  17.         var xp:Number = i % 4 * rad
  18.         var yp:Number = int(i / 4) * rad
  19.    
  20.         var type:int = int(Math.random() * 4);
  21.         if (type == 0){
  22.           makeShape(xp, yp, rad-60, Math.random() , 1);
  23.         }else if (type == 1){
  24.            makeShape(xp, yp, rad-60, 1,  Math.random());
  25.         }
  26.         else if (type == 2){
  27.            m = Math.random() * 2;
  28.            makeShape(xp, yp, rad-Math.random()*120, m, m);
  29.         }
  30.         else if (type == 3){
  31.            m = Math.random() * 2;
  32.            makeShape(xp, yp, rad-Math.random()*120, m, m/2);
  33.         }
  34.     }
  35. }
  36.  
  37. // main part from the video
  38. function makeShape(xp:Number, yp:Number,
  39.                    maxRad:Number = 100,m0:Number=1,
  40.                    m1:Number=1):void{
  41.     var polarX:Number;
  42.     var polarY:Number;
  43.     var radius:Number;
  44.     graphics.lineStyle(0, 0);
  45.     var theta:Number = Math.random() * Math.PI * 2;
  46.     for (var i:int = 0; i<dotNum; i++){
  47.         radius = Math.random() * maxRad
  48.         polarX = xp + radius * Math.cos(theta * m0);
  49.         polarY = yp + radius * Math.sin(theta * m1);
  50.         theta += 0.1;
  51.          
  52.         makeDot(polarX, polarY);
  53.        
  54.     }
  55. }
  56.  
  57. function makeDot(xp:Number, yp:Number, fillColor:uint = 0x000000):void{
  58.     graphics.beginFill(fillColor);
  59.     graphics.drawCircle(xp, yp, dotRad);
  60.     graphics.endFill();
  61. }

Here it is over at wonderf:

Also posted in Math, functions, misc | Tagged , , | 4 Comments

AS Quiz #8

By Zevan | January 20, 2010

Today's quiz is not multiple choice. Instead, your task is to write a function that draws stairs that look like this:

Your function should have the following arguments:

drawStairs(graphics, stairNum);
// you may include additional arguments for size, depth etc..

Feel free to post your solution in the comments.

I'll post my solution for this in the comments tomorrow. There is also another multiple choice quiz in the pipeline for tomorrow...

BONUS: Try to use as few Graphics class method calls as possible.

You can see my solutions here.

Also posted in Quiz | Tagged , , , | 19 Comments

Graphics Class and Twitter

By Zevan | December 11, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width = 700, height=700, frameRate=12)]
  2. var cmds:Array = [];
  3.  
  4. var loader:URLLoader = new URLLoader();
  5. var req:URLRequest = new URLRequest("http://search.twitter.com/search.atom");
  6. var vars:URLVariables = new URLVariables();
  7. vars.q = "#asgraph";
  8. // results per page
  9. vars.rpp = "100";
  10. vars.page = 1;
  11.  
  12. req.data = vars;
  13. req.method = URLRequestMethod.GET;
  14.  
  15. loader.addEventListener(Event.COMPLETE, onLoaded);
  16. loader.load(req);
  17.  
  18. var txt:TextField = TextField(addChild(new TextField()));
  19. txt.defaultTextFormat = new TextFormat("_sans", 12);
  20. with (txt){ x=10, y=10, autoSize="left"; }
  21. txt.htmlText = "loading...";
  22.  
  23. function onLoaded(evt:Event):void{
  24.        removeChild(txt);
  25.    var searchData:XML = new XML(loader.data);
  26.    var atom:Namespace = searchData.namespace("");
  27.  
  28.    var leng:int = searchData.atom::entry.length() -1;
  29.   for (var i:int = leng; i>=0; i--){
  30.        var cmd:String =
  31. searchData.atom::entry[i].atom::title.toString().replace(/\#asgraph/g,
  32. "");
  33.       // added this to ignore words starting with @
  34.       cmd = cmd.replace(/@(\w+)/g, "");
  35.        cmds.push(cmd);
  36.    }
  37.  
  38.        var time:Timer = new Timer(100, cmds.length);
  39.        time.addEventListener(TimerEvent.TIMER, onTick);
  40.    time.start();
  41. }
  42. function onTick(evt:TimerEvent):void{
  43.        render(parseFunctions(cmds[evt.target.currentCount - 1]));
  44.        graphics.endFill();
  45.        graphics.lineStyle();
  46. }
  47.  
  48. // parse and run Graphics class commands
  49. function parseFunctions(dat:String):Array{
  50.    var a:Array = dat.split(";") ;
  51.    for (var i:int = 0; i<a.length-1; i++){
  52.        a[i] = a[i].split(/\(\)|\(|\)/g);
  53.        var f:String = a[i][0] = a[i][0].replace(/\s/g,"");
  54.        a[i] = a[i].splice(0, a[i].length - 1);
  55.        if (a[i].length> 1){
  56.         a[i] = a[i][1].split(",");
  57.         a[i].unshift(f);
  58.        }
  59.    }
  60.    return a.splice(0,a.length - 1);
  61. }
  62. function render(p:Array):void {
  63.    for (var i:int = 0; i<p.length; i++) {
  64.        try{
  65.        graphics[p[i][0]].apply(graphics,p[i].splice(1));
  66.        }catch(e:Error){};
  67.    }
  68. }

This is a simple idea I had awhile back... This snippet searches twitter for the #asgraph hashtag and if it finds standard Graphics class method calls it renders them.

So if you tweet something likethis :

#asgraph beginFill(0xFF); drawCircle(200,200,10);

it will get rendered into the below swf (you'll need to refresh to see your tweet get rendered):

This movie requires Flash Player 9

Here is a direct link to the swf

Also posted in external data | Tagged , , | 3 Comments