A Flash Developer Resource Site

Results 1 to 5 of 5

Thread: cos and sin plotting

  1. #1
    Senior Member
    Join Date
    Apr 2001
    Posts
    996

    cos and sin plotting

    I have been playing with cos and sin functions and I understand how to plot items around a circle and also make them move in a circular movement. But what I'm not understanding and can't seem to find much about it is how to achieve swirls and moveclip placements like this image.



    Here is what I have been trying but its nowhere like the image is showing.

    Code:
    		private function init( evt : Event ) : void
    		{
    			centerX = stage.stageWidth / 2;
    			centerY = stage.stageHeight / 2;
    			
    			for( var i : int = 0; i < 20; i++ ){
    				
    				var circ : Shape = new Shape();
    				circ.graphics.beginFill(0x333333);
    				circ.graphics.drawCircle(0, 0, 20 );
    				circ.x = centerX + i * Math.cos(i) * 70;
    				circ.y = centerY + i * Math.sin(i) * 70;
    		 		//circ.rotation = i * 12;
    				addChild(circ);
    			}
    		}
    Can someone please help shine some light how I can plot my items positions like the image with cos and sin.

    Thank,

  2. #2
    5+5=55 Schfifty Five's Avatar
    Join Date
    Jun 2006
    Posts
    698
    Well you're taking the sin and cosine of the loop variable (i), which is essentially meaningless (i is not an angle).

    Assuming you want the circles to go around in a 360 degree spiral, try something like:

    PHP Code:
    private function initevt Event ) : void
            
    {
                
    centerX stage.stageWidth 2;
                
    centerY stage.stageHeight 2;
                
                for( var 
    int 020i++ ){
                    
                    var 
    circ Shape = new Shape();
                    
    circ.graphics.beginFill(0x333333);
                    
    circ.graphics.drawCircle(0020 );
                    
    circ.centerX Math.cos((i/20)*Math.PI*2) * 70;
                    
    circ.centerY Math.sin((i/20)*Math.PI*2) * 70;
                    
    addChild(circ);
                }
            } 
    Tweak the numbers a bit to make it look how you want.

  3. #3
    Senior Member
    Join Date
    Apr 2001
    Posts
    996
    Thanks Schfifty Five
    Can you explain this a little.

    circ.x = centerX + i * Math.cos((i/20)*Math.PI*2) * 70;

    I presume 70 is the radius but not sure why i / 20.
    *Math.PI*2 is multiplying by 360 right or the full circle which is Math.PI * 2

    Is there somewhere where I can read up on plotting points with cos and sin that shows me how to plot points that are like this and not just in a circle like most tutorials.

  4. #4
    Senior Member realMakc's Avatar
    Join Date
    Oct 2002
    Posts
    927
    the /20 part is because of your own choice in for( var i : int = 0; i < 20; i++ ), while i goes from 0 to 19, i/20 goes from 0 to (a little less than) 1.

    to turn circle into ellipse you obviously need to multiply sin and cos by different numbers, not both 70.

    also, I think "i * " part before sin/cos is pointless.
    Last edited by realMakc; 06-16-2009 at 08:03 AM.
    who is this? a word of friendly advice: FFS stop using AS2

  5. #5
    5+5=55 Schfifty Five's Avatar
    Join Date
    Jun 2006
    Posts
    698
    Quote Originally Posted by realMakc View Post
    the /20 part is because of your own choice in for( var i : int = 0; i < 20; i++ ), while i goes from 0 to 19, i/20 goes from 0 to (a little less than) 1.

    to turn circle into ellipse you obviously need to multiply sin and cos by different numbers, not both 70.

    also, I think "i * " part before sin/cos is pointless.

    Yep, what he said.

    i/20 gives you a percentage which you multiply by Math.PI*2 (360 degrees) to get a full circle.

    The "i *" part is necessary to have a spiral rather than an ellipse.

Posting Permissions

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




Click Here to Expand Forum to Full Width

HTML5 Development Center