Everybody! This is important. In a few days, these forums will be moving over to using the totally sweet Discourse platform. To ensure this migration happens smoothly with no loss of content, these forums are currently in a read-only mode. I do apologize for the inconvenience.

There is never a good time to turn the forums off for an extended period of time, but I promise the new forums will be a billion times better. I'm pretty sure of it.

See you all on the other side in a few days, and if you have any (non-technical) questions, please e-mail me at kirupa@kirupa.com. For technical questions, try to find a tutorial that corresponds to what you are looking for and post in the comments section of that page.

Cheers,
Kirupa

Results 1 to 4 of 4

Thread: Recursive Hexagaon

  1. #1

    3boxes Recursive Hexagaon

    Hello, I've been having a go with a recursive animation, where my hexagons shrink and spawn their relatively scaled offspring, which repeat this action.

    There's a nice snowflake pattern emerging, and I wish to make it interactive, activating a 'shrink and spawn' with roll over.

    Anyhow -> to the code .. It works to an extent. You will certainly see the effect Im trying to achieve... its good - but gets out of hand, and i dont know why! it seems to start getting bigger and bigger - but each recursion is meant to get smaller, like the first couple of instances do...

    Is there any hands to help!? download the source

    ps source is using Tweenmax to cause the animation, and make use of a callback.

    for a quick look online ::: go here
    Attached Files Attached Files
    Last edited by jeancnicolas; April 4th, 2012 at 07:54 AM.

  2. #2
    cor blimey you lot - is this not interesting to someone!?

  3. #3
    I can't open FLAs in Linux.

    Could you paste only the code from it into a new post?
    Blog article of the month: Why My One Line 'if' Statements Are Unusual
    Twitter: @IQAndreas
    GitHub: IQAndreas

  4. #4
    sure .. however - I am loading in a shape from the library inside the fla. And using a tween library to animate.
    Effectively (in the library) it's a shape class which has 6 other smaller hexagons inside, each with an instance name of 'aa'+i .. these are called in the loop to animate to their new positions based on scale and radius of their parent.

    Anyway - its more about getting the loops right and passing data from parent to spawn. So here it is
    Code:
    import com.greensock.TweenMax;import com.greensock.easing.*;
    import flash.display.MovieClip;
    
    
    var master = [];
    master[0] = [];
    var temp_ary = [];
    var count:uint = 0;
    var total:uint = 0;
    var end:Boolean = false;
    var boxes = [];
    
    
    var diameter = 100; // default start width
    var range = diameter *.73;
    var percent:Number = 0.5;
    var angle = Math.PI*2/6;
    var deg90:Number = Math.PI/2;
    
    
    var q:Quad = new Quad();
    boxes[0] = addChild(q);
    q.x = 150; q.y = 150;q.alpha=0.7;
    var strt = { me:boxes[0], xpos:q.x, ypos:q.y, index:0, diam:range,percent:percent};
    animate(strt);
    
    
    function animate(obj:Object):void{
        for(var i:uint=0;i<6;i++){
            total++;
            var container:MovieClip = obj.me;
            var kid:MovieClip = container["aa"+i];
            var tx:Number = obj.diam * Math.cos(angle+(angle*i)-deg90); 
            var ty:Number = obj.diam * Math.sin(angle+(angle*i)-deg90);
            var ob = {
                    me:        container,
                    xpos:    tx,
                    ypos:    ty,
                    diam:    obj.diam,
                    percent:obj.percent
            };
            var tw:TweenMax = new TweenMax(kid, 2, {x: tx,y:ty,scaleX:obj.diam/100, scaleY:obj.diam/100, alpha:0.1, ease:Expo.easeOut,delay:1,onComplete:spawn, onCompleteParams:[ob]});
        }
    }
    
    
    function spawn(obj:Object){
        total++;
        var b:Quad = new Quad();
        boxes[total] = addChild(b); b.alpha=0.7;
        boxes[total].x = obj.me.x + obj.xpos;
        boxes[total].y = obj.me.y + obj.ypos;
        
        var scale:Number = (obj.diam*obj.percent)/100;
        boxes[total].scaleX = scale;
        boxes[total].scaleY = scale;
    
    
        var newRange:Number = 100-(obj.diam*obj.percent); // use for radius
        
        var ob = { 
            me:        boxes[total], 
            xpos:    boxes[total].x, 
            ypos:    boxes[total].y, 
            diam:    newRange,
            percent:obj.percent * .666
        };
        if(total < 500){
            animate(ob);
        };
    }
    Last edited by jeancnicolas; April 7th, 2012 at 08:57 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012