Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 3 123 LastLast
Results 1 to 15 of 43
  1. #1
    Regular Coder
    Join Date
    Nov 2010
    Posts
    365
    Thanks
    46
    Thanked 1 Time in 1 Post

    Question 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

  • #2
    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 11:14 AM.

  • Users who have thanked Airblader for this post:

    MrTIMarshall (03-17-2013)

  • #3
    Regular Coder
    Join Date
    Nov 2010
    Posts
    365
    Thanks
    46
    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

  • #4
    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 12:14 PM.

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

  • #6
    Regular Coder
    Join Date
    Nov 2010
    Posts
    365
    Thanks
    46
    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.

  • #7
    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 01:37 PM.

  • #8
    Regular Coder
    Join Date
    Nov 2010
    Posts
    365
    Thanks
    46
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Airblader View Post
    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...

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

  • #10
    Regular Coder
    Join Date
    Nov 2010
    Posts
    365
    Thanks
    46
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Airblader View Post
    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.

  • #11
    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:
    <html>
    <head>
    <!-- Here goes your CSS -->
    </head>
    <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.

  • #12
    Regular Coder
    Join Date
    Nov 2010
    Posts
    365
    Thanks
    46
    Thanked 1 Time in 1 Post
    Quote Originally Posted by MrTIMarshall View Post
    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

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

  • #14
    Regular Coder
    Join Date
    Nov 2010
    Posts
    365
    Thanks
    46
    Thanked 1 Time in 1 Post
    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">
    <head>
    <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;
    		border-radius:50%;
    		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>
    </head>
    <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

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


  •  
    Page 1 of 3 123 LastLast

    Posting Permissions

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