#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Posts
    32
    Rep Power
    6

    Point rotation function in javascript


    Writing a function to rotate a point in javascript:

    Code:
    <!doctype html>
    
    <html>
    
    	<head>
    	
    		<script>
    		// ==============================================================
    		// Test rotate_point()
    		// ==============================================================
    		function rotate_test() {
    		
    			var x = 3;
    			var y = 3;
    			var degrees = 90;
    			var rotated_point = rotate_point(x, y, degrees);
    			console.log("Original point: (" + x + ", " + y + ")");
    			var msg = "Rotated point: (" + rotated_point[0] + ", ";
    			msg += rotated_point[1] + ")";
    			console.log(msg);
    		
    			return;
    		}
    		// ==============================================================
    		// Rotate a point (x, y) by degrees degrees.
    		// Returns the coordinates of the rotated point as a two item
    		// array in the format [x, y]
    		// ==============================================================
    		function rotate_point(x, y, degrees) {
    		
    			// convert cartesian point to polar representation
    			var r = Math.sqrt((x * x) + (y * y));
    			var theta = Math.atan(y / x);
    			// add rotation degrees to polar coordinates
    			// (degrees must be converted to radians before addition?)
    			// 2 pi radians = 360 degrees
    			// pi radians = 180 degrees
    			// (pi / 180) radians = 1 degree
    			var radians = degrees * (Math.PI / 180);
    			theta += radians;			
    			// account for rotation beyond 2 pi radians
    			// (i.e. one full revolution)
    			if (theta > Math.PI) {
    				var total_pi_multiples = Math.floor(theta / Math.PI);
    				var deduction = total_pi_multiples * Math.PI;
    				theta -= deduction;
    			}
    			// convert polar back to cartesian
    			// (adjust for positive/negative cos value, depending on
    			// quadrant? (cos is positive in the 1st and 4th quadrants?))
    			// i.e. cos is positive for the following ranges of theta;
    			//   0 degrees <= theta <=  90 degrees
    			// 270 degrees <= theta <= 360 degrees
    			// i.e.
    			//   0 pi <= theta <= pi / 2
    			// 3/2 pi <= theta <= 2 pi
    			// As theta is currently in radians, we'll use the radian units
    			var cos_theta = Math.cos(theta);
    			if ((cos_theta >= 0) && (cos_theta <= (Math.PI / 2))) {
    				cos_theta = Math.abs(cos_theta);
    			}
    			if ((cos_theta >= (Math.PI * 1.5)) && (cos_theta <= (Math.PI * 2))) {
    				cos_theta = Math.abs(cos_theta);
    			}
    			
    			// We'll need to adjust sin theta in a similar fashion to above with cos
    			// sin is positive in the first and second quadrants. Adjust accordingly.
    			var sin_theta = Math.sin(theta);
    			// two adjoining quadrants = one big semicircular segment to check
    			if ((sin_theta >= 0) && (sin_theta <= Math.PI))
    				sin_theta = Math.abs(sin_theta);
    			x = r * cos_theta;
    			y = r * sin_theta;
    
    			return [x, y];
    		}
    		// ==============================================================		
    		</script>
    	
    	
    	</head>
    	
    	<body>
    	
    		<button onclick="rotate_test()">Rotate Test</button>
    	
    	</body>
    
    
    </html>
    Any ideas where I'm going wrong?

  2. #2
  3. Lazy Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,436
    Rep Power
    9645
    Code:
    var theta = Math.atan(y / x);
    Think about how that works: if x and y are both positive or both negative then the result will be the same, right? 3/3 = 1 and -3/-3 = 1 too. That will give you the same angle for diagonal quadrants. And what will you do if x=0?
    Use Math.atan2 instead.

    Code:
    // account for rotation beyond 2 pi radians
    Code:
    if (theta > Math.PI) {
    The comment and the code don't match up. But you don't even need that bit anyways because trigonometry works just fine with angles <0 or >2π.

IMN logo majestic logo threadwatch logo seochat tools logo