Tag Archives: as3

Circle Fitting

By Zevan | June 5, 2010
CLICK HERE TO COPY
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 , , | 2 Comments

Fill in the Blank

By Zevan | June 4, 2010
CLICK HERE TO COPY
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

By Zevan | May 14, 2010
CLICK HERE TO COPY
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

By Zevan | May 13, 2010
CLICK HERE TO COPY
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

By Zevan | May 12, 2010
CLICK HERE TO COPY
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

By Zevan | May 3, 2010
CLICK HERE TO COPY
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

By Zevan | May 3, 2010
CLICK HERE TO COPY
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

By Zevan | April 30, 2010

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

Circle Mouse Toy

By Zevan | April 24, 2010
CLICK HERE TO COPY
Actionscript:
  1. var circles:Array = [];
  2. for (var i:int = 0; i<30; i++){
  3.     var c:Sprite = makeCircle();
  4.     c.x = stage.stageWidth / 2;
  5.     c.y = stage.stageHeight / 2;
  6.     c.scaleX = 1 + i/2;
  7.     c.scaleY = 0.5 + i/4;
  8.     addChild(c);
  9.     circles.push(c);
  10. }
  11. addEventListener(Event.ENTER_FRAME, onLoop);
  12. function onLoop(evt:Event):void {
  13.     circles[0].y += (mouseY - circles[0].y) / 4;
  14.     for (var i:int = 1; i<circles.length; i++){
  15.         var pre:Sprite = circles[i - 1];
  16.         circles[i].y += (pre.y - circles[i].y) / 4;
  17.     }
  18. }
  19. function makeCircle():Sprite{
  20.     var s:Sprite = new Sprite();
  21.     with(s.graphics){
  22.         lineStyle(0,0x000000);
  23.         drawCircle(0,0,10);
  24.     }
  25.     return s;
  26. }

This morning I woke up with a vision of this simple mouse toy in my head. I decided I might as well code it up... I may do more simple things like this in the next few days, it's relaxing.

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

TextLineMetrics

By Zevan | April 23, 2010
CLICK HERE TO COPY
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