RE: [Flashcoders] Placing sprites on the circumference of a circle
Jason, yes, indeed you should be able to use Point.polar() it should of course give the same result as long you give the angle in radians ;) OK, so just curious, why all the trig? Converting angles to radians and vice versa is easy enough. Jason Merrill Bank of America Global Learning Learning Performance Soluions Join the Bank of America Flash Platform Community and visit our Instructional Technology Design Blog (note: these are for Bank of America employees only) ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
[Flashcoders] Placing sprites on the circumference of a circle
Hello, I am currently working on a little flash project where I would like to place the sprites or elements on the line or circumference of a circle. Now I know how I can get x,y-position of each sprite using the cosinus and sinus functions together with the radius and angle. Only the problem I am currently experiencing is the putting the sprites nicely on the line of the circle. It's some rotation related thing but I don't get it. The basic idea is to have an earth and then all kind of items such as buildings to be positioned on the line/circumference of the circle and then follow the form of the circle. I only don't get it. I know I can get the x,y position for these (building) sprites the following way: var radius: Number = 50; var angle: Number = 60; var x: Number = Math.sin(Math.PI/180 * angle) * radius; var y: Number = Math.cos(Math.PI/180 * angle) * radius; Now I only have the problem to nicely rotate the sprite in such manner is basically following the form of the circle. I have made a drawing of how the sprites and/or buildings (every rectangle is a sprite) should be placed on the circle [1] but I don't know how i get that nice rotation calculated. Anyone having any idea how to do this? Too bad, they didn't discuss this during math class :( [1] http://i35.tinypic.com/2a7daop.jpg Weyert ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Re: [Flashcoders] Placing sprites on the circumference of a circle
it depends on your registration point for each clip. If it is at the bottom centre, than just set the x and y have it be rotated by degree - 90 W.R. de Boer wrote: Hello, I am currently working on a little flash project where I would like to place the sprites or elements on the line or circumference of a circle. Now I know how I can get x,y-position of each sprite using the cosinus and sinus functions together with the radius and angle. Only the problem I am currently experiencing is the putting the sprites nicely on the line of the circle. It's some rotation related thing but I don't get it. The basic idea is to have an earth and then all kind of items such as buildings to be positioned on the line/circumference of the circle and then follow the form of the circle. I only don't get it. I know I can get the x,y position for these (building) sprites the following way: var radius: Number = 50; var angle: Number = 60; var x: Number = Math.sin(Math.PI/180 * angle) * radius; var y: Number = Math.cos(Math.PI/180 * angle) * radius; Now I only have the problem to nicely rotate the sprite in such manner is basically following the form of the circle. I have made a drawing of how the sprites and/or buildings (every rectangle is a sprite) should be placed on the circle [1] but I don't know how i get that nice rotation calculated. Anyone having any idea how to do this? Too bad, they didn't discuss this during math class :( [1] http://i35.tinypic.com/2a7daop.jpg Weyert ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Re: [Flashcoders] Placing sprites on the circumference of a circle
If you put the circle and the sprites of building in a movieclip and then
rotate the MC, they should stick to the circle, i think.
Or, keep the variable of the angles and then keep increasing the angles of
all the sprites for the same amount. (angle1++, angle2++, angle3++)
Or, since the angle of each is angle of first + n*spacing (where n is the
number of sprites and spacing the distance - in angles - of each ) you just
have to increase one angle.
OK, i don't think i am very clear. I've had a bad day and my ideas are
confused.
Below is a modified code of a carousel i once created. I think it should
work for you (haven't check after i just made some modifications), but you
could simplify it a lot.
var original_speed:Number=2;// raise or lower to adjust the orbiting speed
var speed:Number=original_speed;
var currentDegrees:Number=0;// don't change
var thumbNum:Number=this.numChildren; //the number of sprites you have to
rotate
var id:Number=0;// don't adjust
var seperation:Number=Math.round(360/thumbNum);// you could hard code a
number here for the amount each thumb is seperated, but this math works
nicely
var circle_radius:Number=thumbNum*50;// radius of the earth
addEventListener(Event.ENTER_FRAME, movingCode);
function movingCode(event:Event):void {
currentDegrees=currentDegrees+speed;
while ( id thumbNum) {
var radians:Number = (currentDegrees + (seperation * id)) * Math.PI
/ 180;
var posX:Number=Math.sin(radians)*circle_radius;
var posY:Number=Math.cos(radians)*circle_radius;
this[thumb+id].x=posX;
this[thumb+id].y=posY;
}
id=id+1;
}// ends while loop
if (id==thumbNum) {
id=0;
}
}// end function code
___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
RE: [Flashcoders] Placing sprites on the circumference of a circle
Rotate the sprite the same as the angle your using. So if it is at the top of the circle use 90 degrees, if it is half way between the equator and the north pole then 45 degrees etc... -Original Message- From: flashcoders-boun...@chattyfig.figleaf.com [mailto:flashcoders-boun...@chattyfig.figleaf.com] On Behalf Of W.R. de Boer Sent: Monday, November 09, 2009 10:41 AM To: flashcoders@chattyfig.figleaf.com Subject: [Flashcoders] Placing sprites on the circumference of a circle Hello, I am currently working on a little flash project where I would like to place the sprites or elements on the line or circumference of a circle. Now I know how I can get x,y-position of each sprite using the cosinus and sinus functions together with the radius and angle. Only the problem I am currently experiencing is the putting the sprites nicely on the line of the circle. It's some rotation related thing but I don't get it. The basic idea is to have an earth and then all kind of items such as buildings to be positioned on the line/circumference of the circle and then follow the form of the circle. I only don't get it. I know I can get the x,y position for these (building) sprites the following way: var radius: Number = 50; var angle: Number = 60; var x: Number = Math.sin(Math.PI/180 * angle) * radius; var y: Number = Math.cos(Math.PI/180 * angle) * radius; Now I only have the problem to nicely rotate the sprite in such manner is basically following the form of the circle. I have made a drawing of how the sprites and/or buildings (every rectangle is a sprite) should be placed on the circle [1] but I don't know how i get that nice rotation calculated. Anyone having any idea how to do this? Too bad, they didn't discuss this during math class :( [1] http://i35.tinypic.com/2a7daop.jpg Weyert ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders __ Information from ESET NOD32 Antivirus, version of virus signature database 4588 (20091109) __ The message was checked by ESET NOD32 Antivirus. http://www.eset.com __ Information from ESET NOD32 Antivirus, version of virus signature database 4588 (20091109) __ The message was checked by ESET NOD32 Antivirus. http://www.eset.com ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Re: [Flashcoders] Placing sprites on the circumference of a circle
Weyert, Here's my approach. Set the registration of the sprites (buildings) to the bottom center and then use the following to determine the rotation: var rotation = (180 - angle); Hope this helps. Tony On Mon, Nov 9, 2009 at 10:41 AM, W.R. de Boer w...@innerfuse.biz wrote: Hello, I am currently working on a little flash project where I would like to place the sprites or elements on the line or circumference of a circle. Now I know how I can get x,y-position of each sprite using the cosinus and sinus functions together with the radius and angle. Only the problem I am currently experiencing is the putting the sprites nicely on the line of the circle. It's some rotation related thing but I don't get it. The basic idea is to have an earth and then all kind of items such as buildings to be positioned on the line/circumference of the circle and then follow the form of the circle. I only don't get it. I know I can get the x,y position for these (building) sprites the following way: var radius: Number = 50; var angle: Number = 60; var x: Number = Math.sin(Math.PI/180 * angle) * radius; var y: Number = Math.cos(Math.PI/180 * angle) * radius; Now I only have the problem to nicely rotate the sprite in such manner is basically following the form of the circle. I have made a drawing of how the sprites and/or buildings (every rectangle is a sprite) should be placed on the circle [1] but I don't know how i get that nice rotation calculated. Anyone having any idea how to do this? Too bad, they didn't discuss this during math class :( [1] http://i35.tinypic.com/2a7daop.jpg Weyert ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Re: [Flashcoders] Placing sprites on the circumference of a circle
Thanks, people. I am currently generating the movieclips at runtime based on an embedded png file so the origin is always the top left corner. I suppose I could descend from the Sprite-class and override the x,y settings to correct the given x, y position. I suppose I will first try out the flash library items way... I also think I already tried to building.rotation = angle thing, though. I will do some more experimenting and will get back to you after dinner :) The current idea I am having is two have basically two sprites, one which contains all the building sprites, one which draws the circle for in the background. The container sprite is needed because later one it will need a rotation animation like moving to the building you selected. ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Re: [Flashcoders] Placing sprites on the circumference of a circle
After a bike ride down hill to the supermarket and cooking I just tried out all your suggestions and I have to say it appears to work! Really nice, only the problem I am currently happening is the issue when I am creating sprites dynamically during runtime the origin is not in the bottom center but in the top left which goofs up everything. And when I try to do: x = -( b.width / 2 ); y = -( b.height ); Before I am updating the positions as calculated the trigonometry formulas. I am quite sure I am overseeing something, though. Not sure what is wrong even when I do this after the setting x,y to the values of nx, ny it still fails for me. The current code I am using is as follows: http://www.innerfuse.biz/dropbox/code.txt Anyone know what I could be doing wrong? Thanks again, you guys are lifesavers :) (really need to get a book about mathematics again to fresh up) Yours, Weyert de Boer ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
RE: [Flashcoders] Placing sprites on the circumference of a circle
hi Wyert, If this is the kind of thing you might do more than once then I strongly recommend checking out the 'hype' AS3 framework from Joshua Davis and Branden Hall. http://hype.joshuadavis.com There's a very approachable set of intro videos here: http://www.vimeo.com/channels/hype C: -Original Message- From: flashcoders-boun...@chattyfig.figleaf.com [mailto:flashcoders-boun...@chattyfig.figleaf.com] On Behalf Of Weyert de Boer Sent: Tuesday, 10 November 2009 7:56 AM To: Flash Coders List Subject: Re: [Flashcoders] Placing sprites on the circumference of a circle After a bike ride down hill to the supermarket and cooking I just tried out all your suggestions and I have to say it appears to work! Really nice, only the problem I am currently happening is the issue when I am creating sprites dynamically during runtime the origin is not in the bottom center but in the top left which goofs up everything. And when I try to do: x = -( b.width / 2 ); y = -( b.height ); Before I am updating the positions as calculated the trigonometry formulas. I am quite sure I am overseeing something, though. Not sure what is wrong even when I do this after the setting x,y to the values of nx, ny it still fails for me. The current code I am using is as follows: http://www.innerfuse.biz/dropbox/code.txt Anyone know what I could be doing wrong? Thanks again, you guys are lifesavers :) (really need to get a book about mathematics again to fresh up) Yours, Weyert de Boer ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders This e-mail, including any attached files, may contain confidential and privileged information for the sole use of the intended recipient. Any review, use, distribution, or disclosure by others is strictly prohibited. If you are not the intended recipient (or authorized to receive information for the intended recipient), please contact the sender by reply e-mail and delete all copies of this message. ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Re: [Flashcoders] Placing sprites on the circumference of a circle
I highly recommend pastebin for sharing code online: http://pastebin.com/ You can set the syntax highlighting to Actionscript. Makes it much easier to read. :) ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
RE: [Flashcoders] Placing sprites on the circumference of a circle
hi this is the calculation i used for something very similar. dynamic text
layed out round a circle (picture attached), although it doesn't take into
account re-registering it so it is top left registration:
function makeNames() { for (var i:int=0; ifilmNames.length; i++) {
filmHolders[i] = new MovieClip(); filmHolders[i].val = i;
namesHolder.addChild(filmHolders[i]); // var degs:Number
= i * 20; var rads:Number = (degs * Math.PI) / 180;
var r:Number = 110; var rx:Number = (r * Math.cos(rads));
var ry:Number = (r * Math.sin(rads)); // ...
filmHolders[i].x = rx; filmHolders[i].y = ry;
filmHolders[i].rotation = i * 20; // var
nameText:TextField = new TextField(); nameText.text =
filmNames[i];
filmHolders[i].addChild(nameText); // }}
surely if you put each sprite you want around the circle inside a container
sprite for each sprite then you can sort the registration out:
//container for wheel of spritesvar containAll:Sprite = new
Sprite();addChild(containAll);
containAll.x = stage.stageWidth/2;containAll.y = stage.stageHeight/2;
function makeSprites(num:Number) { //create your sprite and draw contents
var mySprite:Sprite = new Sprite(); mySprite.graphics.beginFill(0xff0033);
mySprite.graphics.drawRect(0,0,30,20); mySprite.graphics.endFill();
//create a container for the sprite var myContainer:Sprite = new Sprite();
containAll.addChild(myContainer); myContainer.addChild(mySprite);
//re-register inside container mySprite.x = -mySprite.width/2; mySprite.y =
-mySprite.height/2;//do calculations var degs:Number = num * 20;
var rads:Number = (degs * Math.PI) / 180; var r:Number = 110; var
rx:Number = (r * Math.cos(rads)); var ry:Number = (r * Math.sin(rads));
//apply calculations to container myContainer.x = rx; myContainer.y =
ry; myContainer.rotation = num * 20;}//run function a few timesfor(var
i:int = 0; i16; i++) { makeSprites(i);}
(i've also not eaten so its probably wrong and i've completely misunderstood
what you're after!!!)
good luck,
david
Subject: Re: [Flashcoders] Placing sprites on the circumference of a circle
From: w...@innerfuse.biz
Date: Mon, 9 Nov 2009 21:55:36 +0100
To: flashcoders@chattyfig.figleaf.com
After a bike ride down hill to the supermarket and cooking I just
tried out all your suggestions and I have to say it appears to work!
Really nice, only the problem I am currently happening is the issue
when I am creating sprites dynamically during runtime the origin is
not in the bottom center but in the top left which goofs up
everything. And when I try to do:
x = -( b.width / 2 );
y = -( b.height );
Before I am updating the positions as calculated the trigonometry
formulas. I am quite sure I am overseeing something, though. Not sure
what is wrong even when I do this after the setting x,y to the values
of nx, ny it still fails for me.
The current code I am using is as follows:
http://www.innerfuse.biz/dropbox/code.txt
Anyone know what I could be doing wrong? Thanks again, you guys are
lifesavers :)
(really need to get a book about mathematics again to fresh up)
Yours,
Weyert de Boer
___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
_
New Windows 7: Find the right PC for you. Learn more.
http://www.microsoft.com/uk/windows/buy/___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
RE: [Flashcoders] Placing sprites on the circumference of a circle
Before I am updating the positions as calculated the trigonometry formulas. I haven't been following this thread, but has using the Point.polar() method been mentioned yet? Jason Merrill Bank of America Global Learning Learning Performance Soluions Join the Bank of America Flash Platform Community and visit our Instructional Technology Design Blog (note: these are for Bank of America employees only) ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Re: [Flashcoders] Placing sprites on the circumference of a circle
wow that came across as one big line with no breaks. i guess the good luck is in
reference to being able to read it.
David Hunter wrote:
hi this is the calculation i used for something very similar. dynamic text
layed out round a circle (picture attached), although it doesn't take into
account re-registering it so it is top left registration:
function makeNames() { for (var i:int=0; ifilmNames.length; i++) {
filmHolders[i] = new MovieClip(); filmHolders[i].val = i;
namesHolder.addChild(filmHolders[i]); // var degs:Number =
i * 20; var rads:Number = (degs * Math.PI) / 180; var
r:Number = 110; var rx:Number = (r * Math.cos(rads)); var
ry:Number = (r * Math.sin(rads)); // ... filmHolders[i].x = rx;
filmHolders[i].y = ry; filmHolders[i].rotation = i * 20;
// var nameText:TextField = new TextField();
nameText.text = filmNames[i];
filmHolders[i].addChild(nameText); // }}
surely if you put each sprite you want around the circle inside a container
sprite for each sprite then you can sort the registration out:
//container for wheel of spritesvar containAll:Sprite = new
Sprite();addChild(containAll);
containAll.x = stage.stageWidth/2;containAll.y = stage.stageHeight/2;
function makeSprites(num:Number) { //create your sprite and draw contents
var mySprite:Sprite = new Sprite(); mySprite.graphics.beginFill(0xff0033);
mySprite.graphics.drawRect(0,0,30,20); mySprite.graphics.endFill();//create a
container for the sprite var myContainer:Sprite = new Sprite();
containAll.addChild(myContainer); myContainer.addChild(mySprite);
//re-register inside container mySprite.x = -mySprite.width/2; mySprite.y =
-mySprite.height/2;//do calculations var degs:Number = num * 20;
var rads:Number = (degs * Math.PI) / 180; var r:Number = 110; var
rx:Number = (r * Math.cos(rads)); var ry:Number = (r * Math.sin(rads));
//apply calculations to container myContainer.x = rx; myContainer.y =
ry; myContainer.rotation = num * 20;}//run function a few timesfor(var i:int =
0; i16; i++) { makeSprites(i);}
(i've also not eaten so its probably wrong and i've completely misunderstood
what you're after!!!)
good luck,
david
___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
SV: [Flashcoders] Placing sprites on the circumference of a circle
Hi guys, Been following this thread all day at work. I dunno if i´m totally missing the point here, but to get the effect you look for you only have to add the height of your sprite as an ingredient. like: nx = Math.sin( Math.PI / 180 * angle ) * ( radius + (b.height ) ); ny = Math.cos( Math.PI / 180 * angle ) * ( radius + (b.height ) ); While playing with this i also found a thing that made me grit my teeth a while before realizing it was too simple. You use: circle.graphics.drawCircle( radius, radius, radius -4); should be: circle.graphics.drawCircle( radius, radius, radius -2); Changing those things got me some nice blue rectangles with a red x in the mid bottom sitting right on the crust of your earth =) Amen to whoever was thinking about getting some mathbooks. I´m really thinking on going back to college to take some math classes, now that i know what to use it for. HTH /Micke -Ursprungligt meddelande- Från: flashcoders-boun...@chattyfig.figleaf.com [mailto:flashcoders-boun...@chattyfig.figleaf.com]för Steven Sacks Skickat: den 9 november 2009 22:43 Till: Flash Coders List Ämne: Re: [Flashcoders] Placing sprites on the circumference of a circle ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Re: [Flashcoders] Placing sprites on the circumference of a circle
Yeah, that's a nice big line of code. And yes, I have seen the HYPE framework and looks really interesting but I don't think it's having functionality for the thing I wanted. Jason, yes, indeed you should be able to use Point.polar() it should of course give the same result as long you give the angle in radians ;) Thanks David, looks like you are using an extra sprite for each building to fix the origin issue. I can give that a try. I imagine that would work. Thanks. Yours, Weyert ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
RE: [Flashcoders] Placing sprites on the circumference of a circle
not sure what went wrong there, terribly embarrassing! i'll try steven sacks suggestion of pastebin:http://pastebin.com/m3e6210bf(i've probably got that wrong too - its been one of those days) hope it helps, david Subject: Re: [Flashcoders] Placing sprites on the circumference of a circle From: w...@innerfuse.biz Date: Mon, 9 Nov 2009 23:18:29 +0100 To: flashcoders@chattyfig.figleaf.com Yeah, that's a nice big line of code. And yes, I have seen the HYPE framework and looks really interesting but I don't think it's having functionality for the thing I wanted. Jason, yes, indeed you should be able to use Point.polar() it should of course give the same result as long you give the angle in radians ;) Thanks David, looks like you are using an extra sprite for each building to fix the origin issue. I can give that a try. I imagine that would work. Thanks. Yours, Weyert ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders _ Chat to your friends for free on selected mobiles http://clk.atdmt.com/UKM/go/174426567/direct/01/___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Re: [Flashcoders] Placing sprites on the circumference of a circle
Yeah, I think it's working now! The final code for now (it's bedtime!) is as follows: http://www.friendpaste.com/23ImSCDq41zmXXmYUqtT0x Tomorrow, I will experiment with the code from David. Code on pastebin looks all fine. Thanks. Weyert ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
