Tag Archives: actionscript

Circle Fitting

Actionscript:
  1. var circs:Array = []
  2. var circNum:int = 600;
  3. addEventListener(Event.ENTER_FRAME, onAdd);
  4. function onAdd(evt:Event):void {
  5.     if (circs.length <circNum){
  6.         makeGrowable();
  7.     }
  8. }
  9.  
  10. function makeGrowable(){
  11.    
  12.     var s:MovieClip = MovieClip(addChild(new MovieClip()));
  13.     s.x = Math.random() * stage.stageWidth;
  14.     s.y = Math.random() * stage.stageHeight;
  15.     with(s.graphics){
  16.         lineStyle(0,0);
  17.         drawCircle(0,0,10);
  18.     }
  19.     s.scaleX = s.scaleY = 0;
  20.     circs.push(s);
  21.     s.addEventListener(Event.ENTER_FRAME, onScaleUp);
  22. }
  23.  
  24. function onScaleUp(evt:Event):void {
  25.     var c:MovieClip = MovieClip(evt.currentTarget);
  26.     c.scaleX = c.scaleY += 0.05;
  27.     for (var i:int = 0; i<circs.length; i++){
  28.         var circ:MovieClip = circs[i];
  29.         if (circ != c){
  30.             var amt:Number = circ.width/2 + c.width/2;
  31.             var dx:Number = circ.x - c.x;
  32.             var dy:Number = circ.y - c.y;
  33.             var dist:Number = Math.sqrt(dx * dx + dy * dy);
  34.             if (amt> dist){
  35.                 c.removeEventListener(Event.ENTER_FRAME, onScaleUp);
  36.                 if (c.scaleX <0.1){
  37.                     if (contains(c)){
  38.                     removeChild(c);
  39.                     }
  40.                 }
  41.             }
  42.         }
  43.        
  44.     }
  45. }

Circle fitting is one of those things I've never bothered to do... today I figured I'd give it a try and this is what I came up with. I posted it on wonderfl:

Posted in Graphics, misc, motion | Also tagged , , | 6 Comments

Fill in the Blank

Actionscript:
  1. var story:String = "Fill in the _____.";
  2.  
  3.  
  4. var txt:TextField = new TextField();
  5. txt.defaultTextFormat = new TextFormat("Georgia", 20);
  6. txt.width = stage.stageWidth;
  7. txt.multiline = true;
  8. txt.wordWrap = true;
  9. txt.text = story;
  10. addChild(txt);
  11.  
  12. var alph:Array = "abcdefghijklmnopqrstuvwxyz".split("");
  13. var keys:Object = {};
  14. for (var i:int = 0; i<alph.length; i++){
  15.     keys[65 + i] = alph[i];
  16. }
  17. stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPressed);
  18. function onKeyPressed(evt:KeyboardEvent):void{
  19.      
  20.     if (evt.keyCode == Keyboard.ENTER){
  21.         story = "Fill in the _____.";
  22.         txt.text = story;
  23.     }
  24.    
  25.     for (var i:int = 0; i<story.length; i++){
  26.         if (story.charAt(i) == "_"){
  27.             var head:String = story.substr(0, i);
  28.             var tail:String = story.substr(i + 1);
  29.             var letter:String = keys[evt.keyCode];
  30.             if (!letter) return;
  31.             story = head + letter + tail;
  32.            
  33.             txt.text = story;
  34.            
  35.             break;
  36.         }
  37.     }
  38. }

I needed to do a fill in the blank for a personal project that I'm working on and this is what I came up with. Have a look at the swf here:

(you need to click first so you can type with the keyboard):
Fill in the blank

Posted in TextField, UI | Also tagged , | 3 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 | Also tagged , | 1 Comment

Fish Curve

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

While surfing mathworld I stumbled upon the equation for something called the Fish Curve. This snippet will draw something like this:

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

Astroid Pedal Curve Variation

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

While browsing mathworld I decided to do a variation on this curve . The above snippet will draw something like this:

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

3D Ring

Actionscript:
  1. [SWF(width = 500, height=500)]
  2. var ring:MovieClip = createRing();
  3. ring.x = stage.stageWidth / 2;
  4. ring.y = stage.stageHeight / 2;
  5. addChild(ring);
  6.  
  7. function createRing(sectionNum:int = 30):MovieClip{
  8.     var container:MovieClip = new MovieClip();
  9.     container.circles = [];
  10.     container.theta = 0;
  11.     container.thetaDest = 0;
  12.     var step:Number = (Math.PI * 2) / sectionNum;
  13.     for (var i:int = 0; i<sectionNum; i++){
  14.         var c:MovieClip = new MovieClip();
  15.         with (c.graphics){
  16.             lineStyle(0,0x000000);
  17.             beginFill(0xCCCCCC);
  18.             drawCircle(0,0,20);
  19.         }
  20.         c.thetaOffset = step * i;
  21.         container.addChild(c);
  22.         container.circles.push(c);
  23.     }
  24.     container.addEventListener(Event.ENTER_FRAME, onRun);
  25.     return container;
  26. }
  27. function onRun(evt:Event):void {
  28.     var container:MovieClip = MovieClip(evt.currentTarget);
  29.     var num:int = container.circles.length;
  30.     for (var i:int = 0; i<num; i++){
  31.         var c:MovieClip = container.circles[i];
  32.         var angle:Number = container.theta + c.thetaOffset;
  33.         c.x = 200 * Math.cos(angle);
  34.         c.y = 100 * Math.sin(angle);
  35.         c.scaleX = (100 + c.y) / 120 + 0.2;
  36.         c.scaleY = c.scaleX;
  37.     }
  38.     container.circles.sortOn("y", Array.NUMERIC);
  39.     for (i = 0; i<num; i++){
  40.         container.addChild(container.circles[i]);
  41.     }
  42.     if (container.mouseX <-100){
  43.         container.thetaDest -= 0.05;
  44.     }
  45.     if (container.mouseX> 100){
  46.         container.thetaDest += 0.05;
  47.     }
  48.     container.theta += (container.thetaDest  - container.theta) / 12;
  49.    
  50. }

This snippet shows how to create a 3D ring navigation using sine and cosine. Have a look:

Posted in 3D, Graphics, MovieClip, UI, arrays, motion, sortOn | Also tagged , | 3 Comments

Propeller Sketch

Actionscript:
  1. makeFlyer();
  2.  
  3. function makeFlyer():void{
  4.     var thing:MovieClip = new MovieClip();
  5.     thing.x = 200;
  6.     thing.y = 200;
  7.    
  8.     addChild(thing);
  9.    
  10.     var prop:Shape = new Shape();
  11.     with (prop.graphics){
  12.         lineStyle(0,0x000000);
  13.         beginFill(0x000000);
  14.         moveTo(-100,0);
  15.         curveTo(-100, -30, 0, 0);
  16.         curveTo(100, 30, 100, 0);
  17.         curveTo(100, -30, 0, 0);
  18.         curveTo(-100, 30, -100, 0);
  19.     }
  20.     prop.scaleX = prop.scaleY = 0.5;
  21.     var container:MovieClip = new MovieClip();
  22.     //container.x = -50;
  23.     container.addChild(prop);
  24.     container.scaleY = 0.6;
  25.     thing.addChild(container);
  26.    
  27.     var body:Shape = new Shape();
  28.     with (body.graphics){
  29.         lineStyle(0, 0x000000);
  30.         beginFill(0x000000);
  31.         lineTo(0,80);
  32.         drawCircle(0,80,10);
  33.     }
  34.     thing.addChild(body);
  35.     thing.velX = 0;
  36.     thing.velY = 0;
  37.     thing.posX = thing.x;
  38.     thing.posY = thing.y;
  39.     thing.theta = 0;
  40.     thing.prop = prop;
  41.     thing.addEventListener(Event.ENTER_FRAME, onRun);
  42. }
  43. function onRun(evt:Event):void{
  44.     var t:MovieClip = MovieClip(evt.currentTarget);
  45.     t.prop.rotation += 10
  46.     t.velY = 3 * Math.cos(t.theta);
  47.     t.velX = 3 * Math.sin(t.theta / 2);
  48.     t.theta += 0.05
  49.     t.posX += t.velX;
  50.     t.posY += t.velY;
  51.    
  52.     t.x = t.posX;
  53.     t.y = t.posY;
  54. }

This snippet creates a small flying object that moves with sine and cosine.


Have a look at the swf...

Posted in motion | Also tagged , | 2 Comments

Drawings and Animations

So there are 434 posts on this site to date. I hope to keep posting but it isn't always easy to come up with new ideas. Another project I've been working on is a series of drawings and interactive animations over at my other website (shapevent). I've been creating entries for this part of shapevent pretty regularly - go have a look:

http://www.shapevent.com/log/

Posted in Announcements, projects | Also tagged , | Leave a comment

TextLineMetrics

Actionscript:
  1. var word:String = "TextLineMetrics are useful";
  2. var letters:Array = word.split("");
  3.  
  4. var pre:TextField;
  5. for (var i:int = 0; i<letters.length; i++){
  6.     var t:TextField = new TextField();
  7.     t.defaultTextFormat = new TextFormat("Arial", 40);
  8.     t.autoSize = TextFieldAutoSize.LEFT;
  9.     t.textColor = int(Math.random() * 0xFFFFFF);
  10.     t.text = letters[i];
  11.     if (pre){
  12.         var metrics:TextLineMetrics = pre.getLineMetrics(0);
  13.         t.x = metrics.width + pre.x;
  14.     }
  15.     pre = t;
  16.     addChild(t);
  17. }

Sometimes you need to do something to a TextField one letter at a time. One way to do this is to create a separate TextField for each letter and position them based on the TextLineMetrics object. This snippet creates textFields for a string and colors each TextField randomly.

Posted in string manipulation, strings | Also tagged , | 6 Comments

QuickBox2D Editor

When I first created QuickBox2D I simultaneously developed a simple editor to aid in the creation of complex simulations. The result is very alpha and should be used cautiously. There is no UI, it is entirely key controlled. It generates actionscript files that can be copy and pasted into working simulations. It also has a preview mode for previewing simulations as you develop them. This is by no means a full featured editor, there is a good deal of work to be done on it. I am releasing the code as a simple zip for people who would like to develop it further. If there is enough interest I'll create some kind of code repositiory, but for now I'm just releasing the below zip.

Take a look at the editor

Download the Source

I may post further instructions for the editor in the future... Remember to save your work frequently and to create new versions for every change that you make to a file.

Suggested Features:
Simple GUI
Base64 encoding for get string

Known Issues:
Making joints that don't touch things can break the preview app.

Posted in QuickBox2D | Also tagged , , , | 24 Comments