Category Archives: Graphics

drawPath() Boxes

By Zevan | May 21, 2009
CLICK HERE TO COPY
Actionscript:
  1. const TWO_PI:Number = Math.PI * 2;
  2. var boxNum:int = 3000;
  3. var pointNum:int = boxNum * 10;
  4. var rot:Vector.<Number> = new Vector.<Number>();
  5. var posX:Vector.<Number> = new Vector.<Number>();
  6. var posY:Vector.<Number> = new Vector.<Number>();
  7. var velX:Vector.<Number> = new Vector.<Number>();
  8. var velY:Vector.<Number> = new Vector.<Number>();
  9. var scale:Vector.<Number> = new Vector.<Number>();
  10. var rotSpeed:Vector.<Number> = new Vector.<Number>();
  11. var geometry:Vector.<Number> = new Vector.<Number>();
  12. var cmds:Vector.<int> = new Vector.<int>();
  13.  
  14. var stageWidth:Number = stage.stageWidth;
  15. var stageHeight:Number = stage.stageHeight;
  16.  
  17. populateGeom();
  18. function populateGeom():void{
  19.     for (var i:int = 0; i<pointNum; i+=10){
  20.         posX.push(Math.random() * stageWidth);
  21.         posY.push(Math.random() * stageHeight);
  22.         velX.push(Math.random()*4 - 2);
  23.         velY.push(Math.random()*4 - 2);
  24.         scale.push(Math.random() * 1 + .2);
  25.         rot.push(Math.random() * TWO_PI);
  26.         rotSpeed.push(Math.random() * 0.2 - 0.1);
  27.         geometry[i] = 0;
  28.         geometry[i + 1] = 0;
  29.         cmds.push(1);
  30.         geometry[i + 2] =  0;
  31.         geometry[i + 3] =  0;
  32.         cmds.push(2);
  33.         geometry[i + 4] =  0;
  34.         geometry[i + 5] =  0;
  35.         cmds.push(2);
  36.         geometry[i + 6] = 0;
  37.         geometry[i + 7] =  0;
  38.         cmds.push(2);
  39.         geometry[i + 8] =  0;
  40.         geometry[i + 9] =  0;
  41.         cmds.push(2);
  42.     }
  43. }
  44.  
  45. function run():void{
  46.     var inc:int = 0;
  47.     var xt:Number, yt:Number, s:Number, r:Number, rs:Number;
  48.     var cos:Number, sin:Number;
  49.     var cosN:Number, cosP:Number, sinN:Number, sinP:Number;
  50.     for (var i:int = 0; i<pointNum; i+=10){
  51.         xt = posX[inc] += velX[inc];
  52.         yt = posY[inc] += velY[inc];
  53.        
  54.         if (xt <0 || xt> stageWidth){
  55.             velX[inc] *= -1;
  56.         }
  57.         if (yt <0 || yt> stageHeight){
  58.             velY[inc] *= -1;
  59.         }
  60.          
  61.         s = scale[inc];
  62.         r = rot[inc] += rotSpeed[inc];
  63.         inc++;
  64.          
  65.         cos = Math.cos(r);
  66.         sin = Math.sin(r);
  67.        
  68.         cosN = -10  * cos;
  69.         cosP = 10  * cos
  70.         sinN = -10 * sin;
  71.         sinP = 10 * sin;
  72.         geometry[i] = xt + (cosN - sinN) * s;
  73.         geometry[i + 1] = yt + (cosN + sinN) * s;
  74.         geometry[i + 2] = xt + (cosP - sinN) * s;
  75.         geometry[i + 3] = yt + (cosN + sinP) * s;
  76.         geometry[i + 4] = xt + (cosP - sinP) * s;
  77.         geometry[i + 5] = yt + (cosP + sinP) * s;
  78.         geometry[i + 6] = xt + (cosN - sinP) * s;
  79.         geometry[i + 7] = yt + (cosP + sinN) * s;
  80.         geometry[i + 8]  = geometry[i];
  81.         geometry[i + 9]  = geometry[i + 1];
  82.     }
  83. }
  84.  
  85. addEventListener(Event.ENTER_FRAME, onLoop);
  86. function onLoop(evt:Event):void {
  87.      run();
  88.      graphics.clear();
  89.      graphics.beginFill(0x000000);
  90.      graphics.drawPath(cmds, geometry,GraphicsPathWinding.NON_ZERO);
  91.      graphics.endFill();
  92. }

I was messing with drawPath() today and did this snippet as a sort of performance test... the code isn't fully optimized but it's clear that drawPath() is rather fast. I wish that there were beginFill() and lineStyle() drawing commands that worked with it though... oh yeah, that's what IGraphicsData is for...

Also posted in motion | Tagged , | Leave a comment

Command Draw Source

By Zevan | May 2, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width = 600, height = 500, frameRate=30, background = 0xFFFFFF)]
  2.  
  3. var cmd:String = "1000 small orange circles, 9000 black lines,3 large white circles"
  4. // try some of these commands:
  5. //"300 small red triangles and 2 big orange circle 3 big black lines";
  6. //"100 big black triangles, ten small white rectangles 1 big white circle and 1 big gray poly";
  7. // "300 small red triangles and 2 big orange circle 3 big black lines";
  8. //"10 big black circles 1000 big white lines 100 small white rects 1 big red circle and 1 green poly"
  9. stage.align = "TL"
  10. var msk:Shape = new Shape();
  11. with(msk.graphics) beginFill(0x00FF00), drawRect(0,0,600, 400);
  12. this.mask = msk;
  13. var amount:Number;
  14. var color:uint = 0;
  15. var shape:String;
  16.  
  17. var hexLookup:Object = {red:0xFF0000, green:0x00FF00, blue:0x0000FF, yellow:0xFFFF00, orange:0xFFCC00, white:0xFFFFFF, gray:0xCCCCCC, grey:0xCCCCCC, black:0x000001};
  18. var sizeLookup:Object = {large:true, big:true, small:true, tiny:true};
  19. var defaultSize:Number = 50;
  20. var size:Number = defaultSize;
  21. var halfSize:Number = size / 2;
  22. var circles:Function = circle;
  23. var ovals:Function = oval, ellipse:Function = oval;
  24. var rects:Function = rect, rectangle:Function = rect, rectangles:Function = rect;
  25. var lines:Function = line;
  26. var triangles:Function = triangle;
  27. var polygon:Function = poly, polygons:Function = poly;
  28. var large:Function = big;
  29. var tiny:Function = small;
  30.  
  31. parse();
  32. function parse():void {
  33.     amount = 1;
  34.     color = 0x000000;
  35.     shape = "circle";
  36.     var words:Array = cmd.split(/[\W]+/g)
  37.     for (var i:int = 0; i<words.length; i++){
  38.         var w:* = words[i];
  39.         if (isNaN(Number(w))){
  40.             if (hexLookup[w]){
  41.                 color = hexLookup[w];
  42.                 trace(w, "color");
  43.             }else
  44.             if (sizeLookup[w]){
  45.                 this[w]();
  46.             }else
  47.             if (this[w]){
  48.                 for (var j:int = 0; j<amount; j++){
  49.                    this[w]();
  50.                 }
  51.                 color = 0x000000;
  52.                 size = defaultSize;
  53.                 trace(w, "command");
  54.             }
  55.         }else{
  56.             trace(w, "number");
  57.             amount = w;
  58.         }
  59.     }
  60. }
  61. function makeShape(p:Array):void{
  62.         var s:Shape = Shape(addChild(new Shape()));
  63.          for (var i:int = 0; i<p.length; i++) {
  64.             s.graphics[p[i][0]].apply(graphics,p[i].splice(1));
  65.          }
  66.         s.rotation = Math.random() * 360;
  67.         s.x = Math.random() * stage.stageWidth;
  68.         s.y = Math.random() * stage.stageHeight;
  69. }
  70.  
  71. function circle():void{
  72.       makeShape([["beginFill",color], ["drawCircle",0,0,Math.random() * halfSize + halfSize]]);
  73. }
  74. function oval():void{
  75.       makeShape([["beginFill",color],["drawEllipse", 0,0,Math.random() * size + halfSize]]);  
  76. }
  77. function square():void{
  78.         var s:Number = Math.random() * halfSize + halfSize;
  79.         var p:Number = -s/2;
  80.         makeShape([["beginFill",color],["drawRect", p, p, s, s]]);  
  81. }
  82. function rect():void{
  83.         var w:Number = Math.random() * halfSize + halfSize;
  84.         var h:Number = Math.random() * halfSize + halfSize;
  85.         makeShape([["beginFill",color],["drawRect", -w/2, -h/2, w, h]]);
  86. }
  87. function line():void{
  88.     var s:Number = size * 2;
  89.     makeShape([["lineStyle",Math.random()*3, color],["lineTo", Math.random()*s - size, Math.random()*s - size]])
  90. }
  91. function triangle():void {
  92.      var s:Number = size * 2;
  93.      makeShape([["beginFill",color],["lineTo", Math.random()*s - size, Math.random()*s - size], ["lineTo", Math.random()*s - size, Math.random()*s - size]]);
  94. }
  95. function poly():void {
  96.      var s:Number = size * 2;
  97.      var cmds:Array = [["beginFill",color]]
  98.      var num:Number = int(Math.random()*8) + 2;
  99.      for (var i:int = 0; i<num; i++){
  100.           cmds.push(["lineTo", Math.random()*s - size, Math.random()*s - size]);
  101.      }
  102.      makeShape(cmds);
  103. }
  104. function big():void{
  105.     size = 100 + Math.random() * 40;
  106.     halfSize = size / 2;
  107. }
  108. function small():void {
  109.     size = 3 + Math.random() * 20;
  110.     halfSize = size / 2;
  111. }

I've been meaning to post this source for a long time. It's a project I created for shapevent called Command Draw. It allows you to use simple sentence structure to create textures and patterns.

See it in action here (this one has some minimal UI and uses flashvars for the command string).


As a side note, this is the 200th post on ActionSnippet.com

Also posted in dynamic, strings | Tagged , | 3 Comments

Drawing Gears

By Zevan | April 16, 2009
CLICK HERE TO COPY
Actionscript:
  1. const TWO_PI:Number=Math.PI*2;
  2. // x, y, max radius, notch number
  3. drawVerts(calcGear(200, 200, 50, 9));
  4.  
  5. drawVerts(calcGear(400, 200, 30, 3));
  6.  
  7. drawVerts(calcGear(300, 350, 30, 5));
  8.  
  9. drawVerts(calcGear(400,400, 30, 2));
  10.  
  11. function calcGear(x:Number, y:Number, maxRad:Number, s:int):Array {
  12.     var verts:Array = new Array();
  13.     var step:Number=TWO_PI / (s * 4);
  14.     var mod:Number=0;
  15.     for (var i:Number = 0; i<=TWO_PI; i+=step) {
  16.         var r:Number = (int(mod)%2+1) * maxRad;
  17.         mod+=.5;
  18.         verts.push(x + r * Math.cos(i));
  19.         verts.push(y + r * Math.sin(i));
  20.     }
  21.     return verts;
  22. }
  23.  
  24. // could  use draw path here instead;
  25. function drawVerts(verts:Array):void{
  26.     graphics.lineStyle(0,0x000000);
  27.     graphics.moveTo(verts[0], verts[1]);
  28.     for (var i:int = 2; i<verts.length; i+=2) {
  29.         graphics.lineTo(verts[i], verts[i + 1]);
  30.     }
  31.     graphics.lineTo(verts[0], verts[1]);
  32. }

Needed to draw some gear shapes today...

Posted in Graphics | Tagged , | Leave a comment

Hippopede

By Zevan | March 30, 2009
CLICK HERE TO COPY
Actionscript:
  1. x=stage.stageWidth/2;
  2. y=stage.stageHeight/2;
  3. var xp:Number = 0, yp:Number = 0;
  4. var r:Number = 0, t:Number = 0;
  5. var speed:Number=.1;
  6.  
  7. var range:Number=.2;
  8. var b:Number = 20;
  9. var a:Number = b * range;
  10. var orbit:Number = 2 * Math.PI + speed;
  11.  
  12. graphics.lineStyle(0,0x000000);
  13.  
  14. addEventListener(Event.ENTER_FRAME, onLoop);
  15. function onLoop(evt:Event):void {
  16.     var sin:Number=Math.sin(t);
  17.     r =  Math.sqrt(4 * b * (a - b * (sin * sin)));
  18.     xp= r * Math.cos(t);
  19.     yp= r * sin;
  20.    
  21.     if (t==0) {
  22.         graphics.moveTo(xp, yp);
  23.     } else {
  24.         graphics.lineTo(xp, yp);
  25.     }
  26.  
  27.     t += speed;
  28.    
  29.     if (t> orbit) {
  30.         range += .5;
  31.         a= b * range;
  32.         t= 0;
  33.     }
  34. }

The above draws a Hippopede

Also posted in Math, motion | Tagged , | Leave a comment