Category Archives: Uncategorized

ActionSnippet.zip

Who would like a zip of the folder I used when making this site fla files and all? If you want one, post a comment and I’ll send it to you.

Actually have a little new content for the site coming, at least one new post.

If you don’t get yours within a day of posting… just let me know.

Posted in Uncategorized | 43 Comments

Quick IE Test

Found this today, not related to actionscript but rather nice. It allows you to take a screen shot of your website in IE… if your on a mac without windows this is a quick way to test in a pinch:

http://ipinfo.info/netrenderer/index.php

Posted in Uncategorized | 6 Comments

Epicycloid Again

Actionscript:
  1. var xp:Number = 0;
  2. var yp:Number = 0;
  3. var t:Number = 0;
  4. var a:Number = 100;
  5. var b:Number = 10;
  6. x = stage.stageWidth / 2;
  7. y = stage.stageHeight / 2;
  8.  
  9. graphics.lineStyle(0,0x000000);
  10. addEventListener(Event.ENTER_FRAME, onRun);
  11. function onRun(evt:Event):void {
  12.     var p:Number = ((a + b)/b)*t
  13.     xp = (a + b) * Math.cos(t) - b * Math.cos(p);
  14.     yp = (a + b) * Math.sin(t) - b * Math.sin(p);
  15.     if (t == 0){
  16.       graphics.moveTo(xp, yp);
  17.     }else{
  18.       graphics.lineTo(xp, yp);
  19.     }
  20.     t += 0.05;
  21. }

I've messed with Epicycloids in the past - browsing mathworld I decided to create this snippet. It will draw a curve like this:

Posted in Uncategorized | Tagged , , | 1 Comment

Color Project

I've been working on a project for the led facade at medialab prado. The project has an online component that allows users to name colors, these names are then searched on twitter and displayed on the led facade. Right now our color database has about 530 colors about 20% of which are in spanish. We're lookiing to get more colors named particularly in spanish. If you feel up to it, you can enter and name colors, simply pick a color, enter your name and name the color... here for spanish
and here for english.

If you did it correctly you'll see your color show up in our list of colors here

Posted in Uncategorized | 1 Comment

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 | 3 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