Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.

# Thread: How to move images in a semi-circle using Trigonometry, or other methods?

1. ## 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.

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

• 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.

• ## Users who have thanked Airblader for this post:

MrTIMarshall (03-17-2013)

• 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

• 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.

• 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.

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.

• You need to execute the Javascript after the DOM elements have been initialized, otherwise it won't know them.

• 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...

• 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 </body>, for example.

• 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 </body>, for example.
I tried moving the Javascript not only before the body tag, but before the div itself, however none of them did anything.

• No, it has to go before the closing body tag, i.e.

Code:
```<html>
<!-- Here goes your CSS -->
<body>
<!-- Here go the div elements -->

<script type="text/javascript">
// Here goes the Javascript code
</script>
</body>
</html>```
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.

• 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

• 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.

• My Result:
Code:
```<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body, html {
margin:0;
border:0;
}
#sky {
width: 100%;
height: 200px;
background: #555599;
}
#sky .sunwrap {
position:absolute;
right:50%;
margin-left:250px;
width:500px;
height:200px;
}
#sun {
position: relative;
width: 50px;
height: 50px;
background: #fefcea; /* Old browsers */
background: -moz-linear-gradient(top, #fefcea 0%, #f1da36 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefcea), color-stop(100%,#f1da36)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* IE10+ */
background: linear-gradient(to bottom, #fefcea 0%,#f1da36 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 ); /* IE6-9 */
-webkit-box-shadow: 0px 0px 28px 0px #ffffff; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
box-shadow: 0px 0px 28px 0px #ffffff; /* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ */
}
</style>
<body>
<div id="sky">
<div class="sunwrap">
<div id="sun" />
</div>
</div>
<script type="text/javascript">
var timePassed = 0.02; // your percentage

var radius = {
x : 500,
y : 200
};

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';
</script>
</body>
</html>```
I am just having problems implementing the oiverflow: hidden; attribute.

Best Regards,
Tim

• 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.

•
Page 1 of 3 123 Last

#### Posting Permissions

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