Flash Website Builder- Trendy Site Builder is a Flash Site Building tool that helps users build stunning websites. Check Out Custom Custom Logo Design by LogoBee. Website Design and Free Logo Templates available.
 CodingForums.com How to move images in a semi-circle using Trigonometry, or other methods?
 User Name Remember Me? Password

Before you post, read our: Rules & Posting Guidelines

Enjoy an ad free experience by logging in. Not a member yet? Register.
03-17-2013, 04:16 AM   PM User | #1
MrTIMarshall
Regular Coder

Join Date: Nov 2010
Posts: 347
Thanks: 44
Thanked 1 Time in 1 Post
How to move images in a semi-circle using Trigonometry, or other methods?

Hello,

I would like an image of the Sun and the Moon going across my header which will be going in a semi-circle motion. I have a PHP page set up, of which, based upon the users longitude and latitude, it knows what percentage through the day or night it currently is for the user, their sunrise and sunset and soon the moonrise and moonset.

Quote:
 basically you want to go half a circle, pi degrees at 0% and zero degrees at 100%, so its like getting circle coordinates (ie. x=center+radius*cos(angle)) but the only complicated part is that you need to reverse the angle: PI*(1-percent)
The above is from a quote from a question I asked a while back. I have this Javascript code of which they also provided, however I do not know how to use it.

Code:
``` var centerX = document.body.offsetWidth / 2;   // center of screen
var centerY = document.body.offsetHeight / 2;
var radiusX = document.body.offsetWidth / 3;   // radius 1/3 screen
var radiusY = document.body.offsetHeight / 3;
var angle = Math.PI * (1-percent);
var x = centerX + radiusX * Math.cos(angle);
var y = centerY + radiusY * Math.sin(angle);```
I am at a bit of a loss what I am meant to do, I am not sure how, where and even if this is the correct way to go round this and if it can have my percentage through the day/night to calculate where they should be on the page.

Thank you for any help and/or advice.

Best Regards,
Tim

 03-17-2013, 11:53 AM PM User | #2 Airblader Regular Coder   Join Date: Jan 2013 Location: Germany Posts: 578 Thanks: 4 Thanked 77 Times in 77 Posts I don't know who wrote what you quoted, but "pi degrees" is non-sense. Either you work in degrees or you work in radians, "pi degrees" is a mix of both. That person meant pi radians (or 180 degrees). Does this snippet help you get started? Example on jsFiddle I also made a quick animated version to see the trajectory: Animated example on jsFiddle Code: ```var timePassed = 0.4; // your percentage var radius = { x : 200, y : 100 }; var position = { x : radius.x + radius.x * Math.cos( timePassed * Math.PI ), y : radius.y - radius.y * Math.sin( timePassed * Math.PI ) }; sun.style.left = position.x + 'px'; sun.style.top = position.y + 'px';``` As always with my snippets: Lots of improvement that can be done (for example making it rise from the left instead of from the right). But it should get you started, I'm sure you can go on by yourself from here on for now. Last edited by Airblader; 03-17-2013 at 12:14 PM..
 Users who have thanked Airblader for this post: MrTIMarshall (03-17-2013)
 03-17-2013, 12:48 PM PM User | #3 MrTIMarshall Regular Coder   Join Date: Nov 2010 Posts: 347 Thanks: 44 Thanked 1 Time in 1 Post Thank you so very much! My only question is; How can I make it so that at 0.01 it has only just come on to the screen and at 0.99 it is almost off the screen? Other than the above question, this is brilliant and I thank you
 03-17-2013, 01:10 PM PM User | #4 Airblader Regular Coder   Join Date: Jan 2013 Location: Germany Posts: 578 Thanks: 4 Thanked 77 Times in 77 Posts You just need to position the sun differently. Even if you want to use the entire screen I would recommend using a wrapping div (as in my example) and just take a look at the overflow property CSS offers. A negative value for margin-left on the sun might be helpful, too. If you don't know how to change size and positioning of my snippet, I suggest you try understanding how it works first and give it a try yourself. I'm not a fan of presenting ready-to-go solutions because it encourages people to not actually understand what they have been given and rather just copy it. I'm sure if you toy around a little you will get somewhere. Give yourself a little bit more time. Last edited by Airblader; 03-17-2013 at 01:14 PM..
 03-17-2013, 01:19 PM PM User | #5 Airblader Regular Coder   Join Date: Jan 2013 Location: Germany Posts: 578 Thanks: 4 Thanked 77 Times in 77 Posts Maybe I'll give you at least a few instructions: 1) Make the wrapping div takee the full page width 2) Change the x-movement of the sun to percent rather than pixels and set it up such that the movement also covers the entire screen (that's adjusting the values) 3) Use the negative of half the sun's width as a left margin for the sun div 4) Look up the overflow property and add it to the wrapping div with the value set to what you think should work. After you have done or tried that, post your snippet here and we will see how far you came.
 03-17-2013, 02:24 PM PM User | #6 MrTIMarshall Regular Coder   Join Date: Nov 2010 Posts: 347 Thanks: 44 Thanked 1 Time in 1 Post https://tornhq.com/Top_Menu/SunTest.php I do not know how I cannot get this to work, I only copied your version and added more styling, nevertheless, I cannot get it to work without my additional styling.
 03-17-2013, 02:32 PM PM User | #7 Airblader Regular Coder   Join Date: Jan 2013 Location: Germany Posts: 578 Thanks: 4 Thanked 77 Times in 77 Posts You need to execute the Javascript after the DOM elements have been initialized, otherwise it won't know them. Last edited by Airblader; 03-17-2013 at 02:37 PM..
03-17-2013, 02:36 PM   PM User | #8
MrTIMarshall
Regular Coder

Join Date: Nov 2010
Posts: 347
Thanks: 44
Thanked 1 Time in 1 Post
Quote:
 Originally Posted by Airblader What exactly is the problem currently? You haven't tried any of the steps I outlined above yet, you just made it look more like a sun.
That is exactly my point. I copied your version and even without my additional styling, I cannot get it to work via changing the percentage, therefore I cannot run through your steps as I need to find out what is currently wrong...

 03-17-2013, 02:38 PM PM User | #9 Airblader Regular Coder   Join Date: Jan 2013 Location: Germany Posts: 578 Thanks: 4 Thanked 77 Times in 77 Posts I just edited my answer. If your Javascript runs before it even knows the DOM elements, it cannot access them. Move the Javascript right before the , for example.
03-17-2013, 02:42 PM   PM User | #10
MrTIMarshall
Regular Coder

Join Date: Nov 2010
Posts: 347
Thanks: 44
Thanked 1 Time in 1 Post
Quote:
 Originally Posted by Airblader I just edited my answer. If your Javascript runs before it even knows the DOM elements, it cannot access them. Move the Javascript right before the , for example.
I tried moving the Javascript not only before the body tag, but before the div itself, however none of them did anything.

 03-17-2013, 02:55 PM PM User | #11 Airblader Regular Coder   Join Date: Jan 2013 Location: Germany Posts: 578 Thanks: 4 Thanked 77 Times in 77 Posts No, it has to go before the closing body tag, i.e. Code: ``` ``` The reason is that when the Javascript gets executed, it already has to know the DOM elements in order to access them. If you simply execute it in the head or before the div elements, it won't know them and fail. One little side note: In my code I just used the global variable 'sun' that modern browsers declare based on the DOM element with the id 'sun'. I'd actually prefer getting access to such an element more "manually", i.e. using getElementById.
03-17-2013, 03:01 PM   PM User | #12
MrTIMarshall
Regular Coder

Join Date: Nov 2010
Posts: 347
Thanks: 44
Thanked 1 Time in 1 Post
Quote:
 Originally Posted by MrTIMarshall I tried moving the Javascript not only before the body tag, but before the div itself, however none of them did anything.
Before the div itself is where you explained to place the Javascript. I have changed it back to there and re-uploaded so you can see that it still has no effect.

Thank you very much for your help by the way, I am grateful

Best Regards,
Tim

 03-17-2013, 03:05 PM PM User | #13 Airblader Regular Coder   Join Date: Jan 2013 Location: Germany Posts: 578 Thanks: 4 Thanked 77 Times in 77 Posts No, I said to put it before the closing body tag. I didn't say anything about putting it before the div. Look at the code skeleton I posted above.
 03-17-2013, 03:50 PM PM User | #14 MrTIMarshall Regular Coder   Join Date: Nov 2010 Posts: 347 Thanks: 44 Thanked 1 Time in 1 Post My Result: Code: ``` Untitled Document
``` I am just having problems implementing the oiverflow: hidden; attribute. Best Regards, Tim
 03-17-2013, 04:06 PM PM User | #15 Airblader Regular Coder   Join Date: Jan 2013 Location: Germany Posts: 578 Thanks: 4 Thanked 77 Times in 77 Posts The margin-left shouldn't go on the sky but on the sun (that will "center" the sun better) and it has to be negative half the width. The hidden attribute is the choice I was looking for. Simply add "overflow: hidden;" to the sky style.

 Bookmarks

 Thread Tools Rate This Thread Rate This Thread: 5 : Excellent 4 : Good 3 : Average 2 : Bad 1 : Terrible

 Posting Rules You may not post new threads You may not post replies You may not post attachments You may not edit your posts BB code is On Smilies are On [IMG] code is On HTML code is Off Forum Rules
 Forum Jump User Control Panel Private Messages Subscriptions Who's Online Search Forums Forums Home :: Client side development     JavaScript programming         DOM and JSON scripting         Ajax and Design         JavaScript frameworks         Post a JavaScript     HTML & CSS     XML     Flash & ActionScript         Adobe Flex     Graphics and Multimedia discussions     General web building         Site reviews         Building for mobile devices :: Server side development     Apache configuration     Perl/ CGI     PHP         Post a PHP snippet     MySQL         Other Databases     Ruby & Ruby On Rails     ASP     ASP.NET     Java and JSP     Other server side languages/ issues         ColdFusion         Python :: Computing & Sciences     Computer Programming     Computer/PC discussions     Geek News and Humour Web Projects and Services Marketplace     Web Projects         Small projects (quick fixes and changes)         Medium projects (new script, new features, etc)         Large Projects (new web application, complex features etc)         Unknown sized projects (request quote)         Vacant job positions         Looking for work/ for hire         Project collaboration/ partnership         Paid work offers and requests (Now CLOSED)     Career, job, and business ideas or advice     Domains, Sites, and Designs for sale         Domains for sale         Websites for sale         Design templates and graphics for sale :: Other forums     Member Offers     Forum feedback and announcements

All times are GMT +1. The time now is 03:31 AM.