Category Archives: Uncategorized

Relaxing with Sine and Cosine

Last night I wanted to play with sine and cosine waves so I created this snippet:

Actionscript:
  1. var wave:Number = 0;
  2. addEventListener(Event.ENTER_FRAME, onLoop);
  3. function onLoop(evt:Event):void {
  4.        graphics.clear()
  5.        graphics.lineStyle(0,0);
  6.        var time:Number = (stage.stageWidth/2 - mouseX)/10
  7.        for (var j:int = 0; j<100; j++){
  8.                var offset:Number = j/10;
  9.                var t:Number = 0;
  10.                var wh:Number = j * 4;
  11.                for (var i:int = 0; i<300; i++){
  12.                        wave = cos(10-offset, t + time + offset)
  13.                               + sin(time, t/2 + time - offset) + wh
  14.                               + cos(3, t * 4);
  15.                        t += 0.1;
  16.                        var xoff:Number = i * 2;
  17.                        if (i == 0){
  18.                                graphics.moveTo(100 + xoff, 100 + wave);
  19.                        }else{
  20.                                graphics.lineTo(100 + xoff, 100 + wave);
  21.                        }
  22.  
  23.                }
  24.        }
  25. }
  26.  
  27. function cos(radius:Number, theta:Number):Number{
  28.        return radius * Math.cos(theta);
  29. }
  30. function sin(radius:Number, theta:Number):Number{
  31.        return radius * Math.sin(theta);
  32. }


Have a look at the swf...

Posted in Uncategorized | 4 Comments

QuickBox2D Nodes

Been thinking about nonsense nodes recently so I created this with my QuickBox2D editor. I have yet to release the editor because its buggy, but it does work nicely for some things:


Have a look at the swf....


Actionscript:
  1. import com.actionsnippet.qbox.*;
  2.  
  3. stage.quality="medium";
  4. var sim:QuickBox2D = new QuickBox2D(this, {gravityY:0.2});
  5.  
  6. sim.setDefault({fillColor:0xEFEFEF, fillAlpha:0.5, lineColor:0x666666});
  7.  
  8.  
  9. var auto4:QuickObject = sim.addBox({x:9.33, y:4.67, width:1.33, height:1.33, angle: 0, density:1});
  10. var auto5:QuickObject = sim.addBox({x:11, y:4.67, width:1.33, height:1.33, angle: 0, density:1});
  11. var auto6:QuickObject = sim.addBox({x:12.67, y:4.67, width:1.33, height:1.33, angle: 0, density:1});
  12. var auto7:QuickObject = sim.addCircle({x:11, y:3, radius:0.67, density:1});
  13. var auto11:QuickObject = sim.addBox({x:9, y:6, width:0.67, height:0.67, angle: 0, density:1});
  14. var auto13:QuickObject = sim.addBox({x:9, y:7, width:0.67, height:0.67, angle: 0, density:1});
  15. var auto15:QuickObject = sim.addBox({x:11, y:6.33, width:1.33, height:1.33, angle: 0, density:1});
  16. var auto17:QuickObject = sim.addBox({x:14, y:4.33, width:0.67, height:0.67, angle: 0, density:1});
  17. var auto18:QuickObject = sim.addBox({x:15, y:4.33, width:0.67, height:0.67, angle: 0, density:1});
  18. var auto19:QuickObject = sim.addBox({x:14, y:3, width:0.67, height:0.67, angle: 0, density:1});
  19. var auto25:QuickObject = sim.addBox({x:12.17, y:6.33, width:0.33, height:1.33, angle: 0, density:1});
  20. var auto26:QuickObject = sim.addBox({x:13.17, y:6.33, width:0.33, height:1.33, angle: 0, density:1});
  21. var auto29:QuickObject = sim.addBox({x:13.67, y:7.67, width:3.33, height:0.67, angle: 0, density:1});
  22. var auto32:QuickObject = sim.addBox({x:10.67, y:7.67, width:0.67, height:0.67, angle: 0, density:1});
  23. var auto35:QuickObject = sim.addBox({x:9, y:8, width:0.67, height:0.67, angle: 0, density:1});
  24. var auto37:QuickObject = sim.addBox({x:9, y:9, width:0.67, height:0.67, angle: 0, density:1});
  25. var auto38:QuickObject = sim.addBox({x:10.33, y:9.33, width:1.33, height:1.33, angle: 0, density:1});
  26. var auto39:QuickObject = sim.addBox({x:11.67, y:9, width:0.67, height:0.67, angle: 0, density:1});
  27. var auto40:QuickObject = sim.addBox({x:12.67, y:9.67, width:0.67, height:0.67, angle: 0, density:1});
  28. var auto41:QuickObject = sim.addBox({x:13.67, y:9.67, width:0.67, height:0.67, angle: 0, density:1});
  29. var auto42:QuickObject = sim.addBox({x:15, y:9.33, width:1.33, height:1.33, angle: 0, density:1});
  30. var auto43:QuickObject = sim.addBox({x:11.67, y:10, width:0.67, height:0.67, angle: 0, density:1});
  31. var auto44:QuickObject = sim.addBox({x:11.67, y:11, width:0.67, height:0.67, angle: 0, density:1});
  32. var auto45:QuickObject = sim.addBox({x:15, y:10.67, width:1.33, height:0.67, angle: 0, density:1});
  33. var auto46:QuickObject = sim.addBox({x:9, y:10, width:0.67, height:0.67, angle: 0, density:1});
  34. var auto62:QuickObject = sim.addCircle({x:12.67, y:1, radius:0.33, density:0});
  35. // joints:
  36. sim.setDefault({frequencyHz:0.7, lineColor:0x666666});
  37. var auto8:QuickObject = sim.addJoint({a:auto7.body, b:auto4.body, x1:11, y1:3, x2:9.33, y2:4.33});
  38. var auto9:QuickObject = sim.addJoint({a:auto7.body, b:auto5.body, x1:11, y1:3, x2:11, y2:4.33});
  39. var auto10:QuickObject = sim.addJoint({a:auto7.body, b:auto6.body, x1:11, y1:3, x2:12.67, y2:4.33});
  40. var auto12:QuickObject = sim.addJoint({a:auto11.body, b:auto4.body, x1:9, y1:6, x2:9, y2:5});
  41. var auto14:QuickObject = sim.addJoint({a:auto11.body, b:auto13.body, x1:9, y1:6, x2:9, y2:7});
  42. var auto16:QuickObject = sim.addJoint({a:auto5.body, b:auto15.body, x1:11, y1:5, x2:11, y2:6});
  43. var auto20:QuickObject = sim.addJoint({a:auto6.body, b:auto19.body, x1:12.67, y1:4.33, x2:14, y2:3});
  44. var auto21:QuickObject = sim.addJoint({a:auto19.body, b:auto17.body, x1:14, y1:3, x2:14, y2:4.33});
  45. var auto22:QuickObject = sim.addJoint({a:auto17.body, b:auto18.body, x1:14, y1:4.33, x2:15, y2:4.33});
  46. var auto23:QuickObject = sim.addJoint({a:auto17.body, b:auto6.body, x1:14, y1:4.33, x2:13, y2:4.33});
  47. var auto24:QuickObject = sim.addJoint({a:auto7.body, b:auto19.body, x1:11, y1:3, x2:14, y2:3});
  48. var auto27:QuickObject = sim.addJoint({a:auto6.body, b:auto25.body, x1:12.17, y1:5.1, x2:12.17, y2:5.97});
  49. var auto28:QuickObject = sim.addJoint({a:auto6.body, b:auto26.body, x1:13.2, y1:5.1, x2:13.23, y2:6.1});
  50. var auto30:QuickObject = sim.addJoint({a:auto18.body, b:auto29.body, x1:15, y1:4.33, x2:15, y2:7.67});
  51. var auto31:QuickObject = sim.addJoint({a:auto17.body, b:auto29.body, x1:14, y1:4.33, x2:15, y2:7.67});
  52. var auto33:QuickObject = sim.addJoint({a:auto15.body, b:auto32.body, x1:11, y1:6.33, x2:10.67, y2:7.67});
  53. var auto34:QuickObject = sim.addJoint({a:auto32.body, b:auto29.body, x1:10.67, y1:7.67, x2:12.33, y2:7.67});
  54. var auto36:QuickObject = sim.addJoint({a:auto13.body, b:auto35.body, x1:9, y1:7, x2:9, y2:8});
  55. var auto47:QuickObject = sim.addJoint({a:auto35.body, b:auto37.body, x1:9, y1:8, x2:9, y2:9});
  56. var auto48:QuickObject = sim.addJoint({a:auto46.body, b:auto37.body, x1:9, y1:10, x2:9, y2:9});
  57. var auto49:QuickObject = sim.addJoint({a:auto37.body, b:auto38.body, x1:9, y1:9, x2:10.33, y2:9.33});
  58. var auto50:QuickObject = sim.addJoint({a:auto46.body, b:auto38.body, x1:9, y1:10, x2:10.33, y2:9.33});
  59. var auto51:QuickObject = sim.addJoint({a:auto38.body, b:auto39.body, x1:10.33, y1:9.33, x2:11.67, y2:9});
  60. var auto52:QuickObject = sim.addJoint({a:auto38.body, b:auto43.body, x1:10.33, y1:9.33, x2:11.67, y2:10});
  61. var auto53:QuickObject = sim.addJoint({a:auto38.body, b:auto44.body, x1:10.33, y1:9.33, x2:11.67, y2:11});
  62. var auto54:QuickObject = sim.addJoint({a:auto39.body, b:auto40.body, x1:11.67, y1:9, x2:12.67, y2:9.67});
  63. var auto55:QuickObject = sim.addJoint({a:auto43.body, b:auto40.body, x1:11.67, y1:10, x2:12.67, y2:9.67});
  64. var auto56:QuickObject = sim.addJoint({a:auto44.body, b:auto40.body, x1:11.67, y1:11, x2:12.67, y2:9.67});
  65. var auto57:QuickObject = sim.addJoint({a:auto41.body, b:auto40.body, x1:13.67, y1:9.67, x2:12.67, y2:9.67});
  66. var auto58:QuickObject = sim.addJoint({a:auto41.body, b:auto42.body, x1:13.67, y1:9.67, x2:14.67, y2:9.67});
  67. var auto59:QuickObject = sim.addJoint({a:auto42.body, b:auto29.body, x1:14.67, y1:9, x2:15, y2:7.67});
  68. var auto60:QuickObject = sim.addJoint({a:auto42.body, b:auto29.body, x1:15.33, y1:9, x2:15, y2:7.67});
  69. var auto61:QuickObject = sim.addJoint({a:auto42.body, b:auto45.body, x1:15, y1:9.33, x2:15, y2:10.67});
  70. var auto63:QuickObject = sim.addJoint({a:auto62.body, b:auto7.body, x1:12.67, y1:1, x2:11, y2:3});
  71. var auto64:QuickObject = sim.addJoint({a:auto62.body, b:auto19.body, x1:12.67, y1:1, x2:14, y2:3});
  72. var auto65:QuickObject = sim.addJoint({a:auto25.body, b:auto29.body, x1:12.17, y1:6.8, x2:12.27, y2:7.67});
  73. var auto66:QuickObject = sim.addJoint({a:auto26.body, b:auto29.body, x1:13.2, y1:6.8, x2:13.2, y2:7.6});
  74.  
  75. sim.start();
  76. sim.mouseDrag();

Posted in Uncategorized | 6 Comments

Catmull-Rom Error

I was messing with Catumull Rom spline code from awhile back and this this came out:

Actionscript:
  1. [SWF(width = 500, height= 500)]
  2. var pnts:Array = new Array();
  3. // make 8 control points
  4. for (var i:int = 0; i<8; i++){
  5.     pnts.push(dot(50 + Math.random() * 80 * i, Math.random()*(stage.stageHeight-40)+20));
  6. }
  7. addEventListener(Event.ENTER_FRAME, onLoop);
  8. function onLoop(evt:Event):void {
  9.    
  10.     graphics.clear();
  11.     graphics.lineStyle(0,0);
  12.     curve(pnts);
  13. }
  14. function tangent(pk1:Sprite, pk_1:Sprite){
  15.     return new Point((pk1.x - pk_1.x) / 2, (pk1.y - pk_1.y) / 2);
  16. }
  17. // all math from http://en.wikipedia.org/wiki/Cubic_Hermite_spline
  18. function curve(p:Array, res:Number=.05):void{
  19.     var px:Number = 0;
  20.     var py:Number = 0;
  21.     var pIter:int = p.length - 1;
  22.     var m:Array = [];
  23.     m[0] = tangent(p[1], p[0]);
  24.     for (var i:int = 1; i<pIter; i++){
  25.         m[i] = tangent(p[i + 1], p[i - 1]);
  26.     }
  27.     m[pIter] = tangent(p[pIter], p[pIter - 1]);
  28.     for (var t:Number = 0; t <1; t+=res){
  29.          var t_2:Number = t * t;
  30.          var _1_t:Number = 1 - t;
  31.          var _2t:Number = 2 * t;
  32.          var h00:Number =  (1 + _2t) * (_1_t) * (_1_t);
  33.          var h10:Number =  t  * (_1_t) * (_1_t);
  34.          var h01:Number =  t_2 * (3 - _2t);
  35.          var h11:Number =  t_2 * (t - 1);
  36.          for (var k:int = 0; k <pIter; k++){
  37.              var k1:int = k + 1;
  38.              var pk:Sprite = p[k];
  39.              var pk1:Sprite = p[k1];
  40.              var mk:Point = m[k];
  41.              var mk1:Point = m[k1];
  42.            
  43.              px = h00 * pk.x + h10 * mk.x + h01 * pk1.x + h11 * mk1.x;
  44.              py = h00 * pk.y + h10 * mk.y + h01 * pk1.y + h11 * mk1.y;
  45.              if (k == 0){
  46.                 graphics.moveTo(px, py);
  47.              }else{
  48.                 graphics.lineTo(px, py);
  49.              }
  50.              
  51.             // canvas.setPixel(px, py, 0xFFFFFF);
  52.          }
  53.     }
  54. }
  55. // draggable dot
  56. function dot(xp:Number, yp:Number, col:uint = 0xFF0000, rad:Number=4):Sprite {
  57.     var s:Sprite = Sprite(addChild(new Sprite));
  58.     s.x = xp;
  59.     s.y = yp;
  60.  
  61.     with(s.graphics) beginFill(col), drawCircle(0,0,rad);
  62.     s.buttonMode = true;
  63.     s.addEventListener(MouseEvent.MOUSE_DOWN, onDrag);
  64.     return s;
  65. }
  66. function onDrag(evt:MouseEvent):void {
  67.     evt.currentTarget.startDrag()
  68. }
  69. stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
  70. stage.addEventListener(MouseEvent.MOUSE_DOWN,onDown);
  71. function onDown(evt:MouseEvent):void{
  72.       dotsVisible(false);
  73. }
  74. function onUp(evt:MouseEvent):void{
  75.     stopDrag();
  76.     dotsVisible(true);
  77. }
  78.  
  79. function dotsVisible(bool:Boolean):void{
  80.     for (var i:int = 0; i<pnts.length; i++){
  81.       pnts[i].visible = bool;
  82.      }
  83. }


You can see the swf over at wonderfl.

Posted in Uncategorized | 4 Comments

Colors For Questions

I get lots of questions about actionscript and QuickBox2D. Too many questions to answer really. But if you enter 30 colors into this project I'm working on I'll help you by answering any question (within reason of course) and possibly giving you a code snippet related to your question.

To enter colors use you'll be using a simple color picker app. Select a color, give it a name "dark red, maroon" etc.. and Then post in the comments that you did so... You'll need to enter a contributer name as well... you can use a handle or your real name... doesn't matter. So go back to this post and watch how to go about adding colors. If you have a question about how to enter stuff, here is the place to ask it....

Posted in Uncategorized | 11 Comments

Polygon Problems

Lots of people have mentioned that they have problems with QuickBox2D Polygons. The simple solution is not to use the verts 2d array (which is more like how Box2D does polys). So when in doubt about polygons, simply use the points array which will nearly always work as long as the contour you define does not cross over itself. Here is a simple example on wonderfl:

Also... polygons are covered extensively in part two of the tutorial over at active tuts... more on that later.

Here is the timeline code:

Actionscript:
  1. import com.actionsnippet.qbox.*;
  2.             /*
  3.                0
  4.               / \
  5.              0_0 0
  6.                | |
  7.                0-0
  8.             */
  9.             var sim:QuickBox2D = new QuickBox2D(this);
  10.             sim.createStageWalls();
  11.             // define the contour of your poly
  12.             // no limits as long as it doesn't cross over
  13.             // itself
  14.             sim.addPoly({x:10, y:5, points:[0.5,0,
  15.                                             1, 1,
  16.                                             1, 2,
  17.                                             0.5, 2,
  18.                                             0.5, 1,
  19.                                             0,1,
  20.                                             0.5,0],
  21.                                             wireframe:false});
  22.             sim.addCircle({x:11, y:10});
  23.             sim.start();
  24.             sim.mouseDrag();

Posted in Uncategorized | Tagged , , , | Leave a comment

Nested Tree Nav

This snippet takes xml and builds a multi-tiered navigation based on how nodes are nested etc...:

So that something like this:

XML:
  1. var menu:XML=<nav>
  2.    <element label="one">
  3.        <element label="a" />
  4.    <element label="b" />
  5.    <element label="c" />
  6. </element>
  7. <element label="two">
  8.      <element label="three">
  9.      <element label="aa">
  10.        <element label="zevan" />
  11.      </element>
  12.      <element label="bb" />
  13.      <element label="cc" />
  14.  </element>
  15.  </element>
  16. </nav>;

Turns into an expandable and collapsible menu that looks like this:

Here is the timeline code:

Actionscript:
  1. var menu:XML=<nav>
  2.    <element label="one">
  3.        <element label="a" />
  4.    <element label="b" />
  5.    <element label="c" />
  6. </element>
  7. <element label="two">
  8.      <element label="three">
  9.      <element label="aa">
  10.        <element label="zevan" />
  11.      </element>
  12.      <element label="bb" />
  13.      <element label="cc" />
  14.  </element>
  15.  </element>
  16. </nav>;
  17.  
  18. var elements:Array = new Array();
  19. setupMenu();
  20.  
  21. function setupMenu():void {
  22.     parse(menu);
  23.     // hide child elements
  24.     for (var i:int = 0; i<elements.length; i++) {
  25.         var mc:MovieClip = elements[i];
  26.         if (mc.parents != 1) {
  27.             removeChild(mc);
  28.         }
  29.     }
  30.     arrangeY();
  31. }
  32.  
  33. function parse(m:XML):void {
  34.     for each (var d:XML in m.children()) {
  35.         makeBtn(d, numParents(d));
  36.         parse(d);
  37.     }
  38. }
  39.  
  40. function makeBtn(d:XML, offsetX:int):void {
  41.     var btn:MovieClip = new MovieClip();
  42.     btn.x = offsetX * 20;
  43.     btn.y = numChildren * 20;
  44.     btn.data = d;
  45.     btn.parents = offsetX;
  46.     btn.value = d.@label;
  47.  
  48.     var txt:TextField = new TextField();
  49.     txt.text = d.@label;
  50.     txt.selectable = false;
  51.     txt.border = true;
  52.     txt.width = 100;
  53.     txt.mouseEnabled = false;
  54.     txt.height = 19;
  55.     btn.addChild(txt);
  56.     btn.buttonMode= true;
  57.     addChild(btn);
  58.    
  59.     // store references to btn
  60.     elements.push(btn);
  61.     elements[d.parent().@label+"_"+d.@label] = btn
  62.  
  63.     btn.addEventListener(MouseEvent.CLICK, onClick);
  64. }
  65.  
  66. function onClick(evt:MouseEvent):void {
  67.     showHide(MovieClip(evt.currentTarget));
  68.     arrangeY();
  69.     trace(evt.currentTarget.value);
  70. }
  71.  
  72. function showHide(btn:MovieClip, forceHide:Boolean=false):void {
  73.     for each (var d:XML in btn.data.children()) {
  74.         var mc:MovieClip = elements[btn.data.@label+"_"+d.@label];
  75.         if (contains(mc)) {
  76.             removeChild(mc);
  77.             showHide(mc, true);
  78.         } else if (forceHide == false) {
  79.             addChild(mc);
  80.         }
  81.     }
  82. }
  83.  
  84. function arrangeY():void {
  85.     var inc:Number = 0;
  86.     for (var i:int = 0; i<elements.length; i++) {
  87.         if (contains(elements[i])) {
  88.             elements[i].y = inc * 20;
  89.             inc++;
  90.         }
  91.     }
  92. }
  93.  
  94. function numParents(e:XML):int {
  95.     var num:int = 0;
  96.     while (e.parent()!= null) {
  97.         num++;
  98.         e = e.parent();
  99.     }
  100.     return num;
  101. }

This is one of those snippets I've had laying around but never got around to posting. Next time I need to do a multi-tiered nav I'll wrap it up into a nice class (the wondeful class was done just by using my script that auto-converts timeline code to doc class code).

Posted in Uncategorized | 2 Comments

BlogShift!

So... If you still want to see quizzes/snippets posted frequently here... post a comment... because I need to know that people still want quizzes and snippets in order to keep working on this blog.

If not enough people respond in the comments I will slowly migrate back to my shapevent blog :

http://shapevent.com/sketchbook/

I would like 20+ comments on this blog post in order to motiviate me to keep writing quizzes and posting snippets... otherwise I will only post when an idea comes to mind.

The idea behind this blog has always been 15-30 minutes a day on a snippet or quiz. I did this for a little over a year straight resulting in about 400 posts :

http://actionsnippet.com/?page_id=549

This blog will definitely not die... especially when cs5 is released, but I want to get feedback to get an idea of how many readers this blog actually has.... so please post a comment if you'd like me to keep up the 15-30 mins a day on quizzes and snippets.

Thanks,

Z!

[EDIT - wow thanks for all the kind remarks and constructive crits. I really needed to see that this blog was actually useful for more than just me. I'll post a new snippet first thing tomorrow!. Thanks very much to everyone who commented :D so far]

Posted in Uncategorized | 64 Comments

Donate Button

I've had many requests to add a donate button to this site, finally added one today....

Posted in Uncategorized | Leave a comment

QuickBox2D Tutorial

Today the first part of a 3 part QuickBox2D tutorial went live on active.tutsplus.com

It's an intro tutorial, so it just scratches the surface. Part 2 digs a bit deeper and part 3 covers complex stuff like joints and contacts.... (part 2 and 3 will be posted sometime in the near future).

Check it out here...

Posted in Uncategorized | Tagged | 13 Comments

QuickBox2D Update On the Way

Been meaning to mention that I'm going to release an updated version of QuickBox2D in the next few days... It will have two minor bug fixes, one or two minor new features and will work with the latest version of Box2D...

Posted in Uncategorized | Tagged | 2 Comments