We Keep Coding

So I have a triangle with the point (100, 90) the distance (11) and the angle of the line (45º) Can I find the other point of the line? How?

okay so I am trying to draw a triangle, the triangle can be completely random, on a canvas in JavaScript
so I got the angles and the side for triangle ABC(this is not what I'm calling it in the code)
the sides
AB(11)
AC(12)
BC(13)
the angles which are solved in a function
BAC(69)
ABC(52)
BCA(59)
And the starting Point of the triangle at (100, 90)
The question I am having is how do I find the other points to the Triangle
I thought the easiest way to draw it would be to draw a line that goes to each point
So I tired the mathematics with this code (I found on another page but )
function FindTriPoints(){
//Y2 = H(Sin(A)) + Y1
//X2 = Sqrt((H^2)-(Y2^2)) + X1
pointX1 = 100;
pointY1 = 90;
pointY2 = s3 * (Math.sin(angle1*Math.PI/180)) + pointY1;
pointX2 = Math.sqrt((s3 * s3) - (pointY2 * pointY2)) + pointX1;
alert("X2 = " + pointX2 + "\n Y2 = " + pointY2)
}
but X2 ends up becoming NaN because it is a negative value that it is trying to square root.
Edit Thanks to Cbroe and Jing3142 for helping me with Y2

well if you know valid triangle sides lengths (l1,l2,l3) and their angles (a,b,c) ...
then it is quite simple with vector math ...
// compute directions
a1=0;
a2=180-b;
a3=a2+180-c;
a3=-b-c;
a3=-a;
// convert them from [deg] to [rad]
a1*=Math.pi/180.0;
a2*=Math.pi/180.0;
a3*=Math.pi/180.0;
// compute points
A=(x0,y0); // your start point is known
B=A+l1*dir(a0)=(x0+l1*Math.cos(a0),y0+l1*Math.sin(a0));
B=A+l1*dir( 0)=(x0+l1 ,y0 ); // a0 is always zero
C=A-l3*dir(a3)=(x0-l3*Math.cos(a3),y0-l3*Math.sin(a3)); // C from A point
C=B+l2*dir(a2)=(x0+l1+l2*Math.cos(a2),y0+l2*Math.sin(a2)); // C from B point
[notes]
as you can see there are more alternatives for some variables choose one you like
do not forget to check if l1+l2>l3 and l1+l3>l2 and l2+l3>l1
if not then your lengths are not valid triangle sides
also a+b+c = 180
if not then your angle computation is wrong
if you want to over-check the triangle then compute C from A and from B point
if they are not the same (their distance > some accuracy constant like 0.001)
then it is not a valid triangle

Polar equation of perimeter of half ellipse (concave mirror shape)

var x = Cx + a * Math.cos(ang);
var y = Cy + b * Math.sin(ang);
Cx, Cy are cords of center. ang is angle in radians. a is half of width, b is half of height.
If I change values of ang, I get different points on circumference of ellipse. Below is the path, which I get with above equation.
But instead of this elliptical shape, I want something like half ellipse, something like concave mirror. Even if we stretch both of its end to infinity, they should not form elliptical shape.
Can somebody provide me polar equations for second curve. I am very bad at digital drawing, but you can imagine that as concave mirror.

The parametric equations for a parabola with focus at (Fx, Fy) and focal parameter 2a, in terms of angle, would be:
x = Fx + (2*a*cos(ang))/(1 + cos(ang))
y = Fy + (2*a*sin(ang))/(1 + cos(ang))
Not too bad. :) You can adjust a as needed. You can actually modify it a bit by adjusting the ratio of the distances from the focus to the plot, versus the plot to the directrix:
x = Fx + (2*a*cos(ang))/(1 + cos(ang))
y = Fy + (2*b*sin(ang))/(1 + cos(ang))
Here the ratio will be b/a. So you can have the same distance from the origin to the vertex (2a) and make b larger to "flatten" the parabola.

Get new x,y coordinates of a point in a rotated image

I have Google Maps icons which I need to rotate by certain angles before drawing on the map using MarkerImage. I do the rotation on-the-fly in Python using PIL, and the resulting image is of the same size as the original - 32x32. For example, with the following default Google Maps marker:
, a 30 degrees conter-clockwise rotation is achieved using the following python code:
# full_src is a variable holding the full path to image
# rotated is a variable holding the full path to where the rotated image is saved
image = Image.open(full_src)
png_info = image.info
image = image.copy()
image = image.rotate(30, resample=Image.BICUBIC)
image.save(rotated, **png_info)
The resulting image is
The tricky bit is getting the new anchor point to use when creating the MarkerImage using the new rotated image. This needs to be the pointy end of the icon. By default, the anchor point is the bottom middle [defined as (16,32) in x,y coordinates where (0,0) is the top left corner]. Can someone please explain to me how I can easily go about this in JavaScript?
Thanks.
Update 22 Jun 2011:
Had posted the wrong rotated image (original one was for 330 degrees counter-clockwise). I've corrected that. Also added resampling (Image.BICUBIC) which makes the rotated icon clearer.

To calculate the position of a rotated point you can use a rotation matrix.
Converted into JavaScript, this calculates the rotated point:
function rotate(x, y, xm, ym, a) {
var cos = Math.cos,
sin = Math.sin,
a = a * Math.PI / 180, // Convert to radians because that is what
// JavaScript likes
// Subtract midpoints, so that midpoint is translated to origin
// and add it in the end again
xr = (x - xm) * cos(a) - (y - ym) * sin(a) + xm,
yr = (x - xm) * sin(a) + (y - ym) * cos(a) + ym;
return [xr, yr];
}
rotate(16, 32, 16, 16, 30); // [8, 29.856...]

The formula for rotations about 0,0 is:
x1 = cos(theta) x0 - sin(theta) y0
y1 = sin(theta) x0 + cos(theta) y0
But that's for regular axes, and rotation about 0,0. The PIL rotation is clockwise with "graphics" axes. Plus, it's around the center of the image. The final confusing thing is that the size of the image can change, which needs to be accounted for in the final result.
Procedure: take original point, subtract off center of image, apply "graphics axes" corrected rotation, find new size of image, add back center position of new image.
Rotation using graphics axes is:
x1 = cos(theta) x0 + sin(theta) y0
y1 = -sin(theta) x0 + cos(theta) y0
16,32 - 16,16 is 0, 16. Rotate 30 degrees clockwise rotation (based on your images) gives a point cos(-30)*0+sin(-30)*16, -sin(-30)*0+cos(-30)*16 = -8, 13.86. The final step is adding back the center position of the rotated position.

In an image, downwards is positive Y and rightwards is positive X. However, to apply the rotation formula, we need upwards as positive Y. Therefore, step 1 would be to apply f(x,y) = f(x,h-y), where 'h' is the height of the image.
Let's say the image is rotated with respect to x0,y0. You'd then need to transform your origin to this point. Therefore, step 2 would be f(x,y) = f(x-x0,y-y0). At this stage (i.e. after the two steps), your new co-ordinates would be x-x0, h-y-y0. You're now ready to apply the rotation formula
x1 = x*cos(theta) - y*sin(theta)
y1 = xsin(theta) + ycos(theta)
Use the values of x and y obtained after step two.
You'd get
x1 = (x-x0)*cos(theta) - (h-y-y0)*sin(theta)
y1 = (x-x0)*sin(theta) + (h-y-y0)*cos(theta)
Now, undo transformations done in step 2 and step 1 (in that order).
After undoing step2: xNew = x1 + x0 and yNew = y1 + y0
After undoing step1: xNew = x1 + x0 and yNew = h - (y1 + y0)
This gives you:
xNew = (x-x0)*cos(theta) - (h-y-y0)*sin(theta) + x0
yNew = -(x-x0)*sin(theta) - (h-y-y0)*cos(theta) + (h-y0)

How to define the intersection of three circles?

Given three circles with their center point and radius, how can you define the area of intersection?
So far what I have is:
var point1 = {x: -3, y: 0};
var point2 = {x: 3, y: 0};
var point3 = {x: 0, y: -3};
var r1 = 5;
var r2 = 5;
var r3 = 5;
var area = returnIntersectionArea(point1, point2, point3, r1, r2, r3);
Also, if two collide but not the third, the function should return null.
If none collide, null should be returned.

This article describes how to find the area of the intersection between two circles. The result it easily extended to three circles.
-------------EDIT-------------
OK, the problem is not easily extended to three circles, I found PhD theses on the subject. Assuming the three circles intersect as shown below, an approximate solution can be found (I think). Before we attempt it, we must check if the three circles indeed intersect as shown below. The problem changes quite a bit if say one circle is inside the other and the third intersects them both.
.
Let S1,S2 and S3 denote the areas of the three circles, and X1,X2 and X3 denote the area of the intersections between each pair of circles (index increases in clockwise direction). As we already established, there are exact formulae for these. Consider the following system of linear equations:
A+D+F+G = A+D+X1 = S1
B+D+E+G = B+D+ X3 = S2
B+E+D+G = B+E+X2 = S3
It is underdetermined, but an approximate solution can be found using least squares. I haven't tried it numerically but will get back to you as soon as I do :D
If the least-squares solution seems wrong, we should also impose several constraints, e.g. the area if the intersection between any pair of circles is smaller than the area of the circles.
Comments are appreciated.
PS +1 to Simon for pointing out I shouldn't qualify things as easy

One way of approaching this problem is via a Monte Carlo simulation:
function returnIntersectionArea(point1, point2, point3, r1, r2, r3) {
// determine bounding rectangle
var left = Math.min(point1.x - r1, point2.x - r2, point3.x - r3);
var right = Math.max(point1.x + r1, point2.x + r2, point3.x + r3);
var top = Math.min(point1.y - r1, point2.y - r2, point3.y - r3);
var bottom = Math.max(point1.y + r1, point2.y + r2, point3.y + r3);
// area of bounding rectangle
var rectArea = (right - left) * (bottom - top);
var iterations = 10000;
var pts = 0;
for (int i=0; i<iterations; i++) {
// random point coordinates
var x = left + Math.rand() * (right - left);
var y = top + Math.rand() * (bottom - top);
// check if it is inside all the three circles (the intersecting area)
if (Math.sqrt(Math.pow(x - point1.x, 2) + Math.pow(y - point1.y, 2)) <= r1 &&
Math.sqrt(Math.pow(x - point2.x, 2) + Math.pow(y - point2.y, 2)) <= r2 &&
Math.sqrt(Math.pow(x - point3.x, 2) + Math.pow(y - point3.y, 2)) <= r3)
pts++;
}
// the ratio of points inside the intersecting area will converge to the ratio
// of the area of the bounding rectangle and the intersection
return pts / iterations * rectArea;
}
The solution can be improved to arbitrary precision (within floating-point limits) by increasing the number of iterations, although the rate at which the solution is approached may become slow. Obviously, choosing a tight bounding box is important for achieving good convergence.

Raphael SVG VML Implement Multi Pivot Points for Rotation

Over the last two days I've effectively figured out how NOT to rotate Raphael Elements.
Basically I am trying to implement a multiple pivot points on element to rotate it by mouse.
When a user enters rotation mode 5 pivots are created. One for each corner of the bounding box and one in the center of the box.
When the mouse is down and moving it is simple enough to rotate around the pivot using Raphael elements.rotate(degrees, x, y) and calculating the degrees based on the mouse positions and atan2 to the pivot point.
The problem arises after I've rotated the element, bbox, and the other pivots. There x,y position in the same only there viewport is different.
In an SVG enabled browser I can create new pivot points based on matrixTransformation and getCTM. However after creating the first set of new pivots, every rotation after the pivots get further away from the transformed bbox due to rounding errors.
The above is not even an option in IE since in is VML based and cannot account for transformation.
Is the only effective way to implement
element rotation is by using rotate
absolute or rotating around the center
of the bounding box?
Is it possible at all the create multi
pivot points for an object and update
them after mouseup to remain in the
corners and center of the transformed
bbox?
UPDATE:
I've attempted to use jQuery offset to find the pivot after it's been rotated, and to use that offset location as the pivot point.
Demo site ...
http://weather.speedfetishperformance.com/dev/raphael/rotation.html

The best cross-browser way I can think of to do what you want is to implement the rotation yourself rather than let SVG do it. Rotating x,y coordinates is fairly simple and I've been using this (tcl) code whenever I need to do 2D rotation: Canvas Rotation.
The upside to this is you have maximum control of the rotation since you're doing it manually. This solves the problems you're having trying to guess the final coordinates after rotation. Also, this should be cross browser compatible.
The downside is you have to use paths. So no rects (though it should be easy to convert them to paths) or ellipses (a little bit harder to convert to path but doable). Also, since you're doing it manually, it should be slower than letting SVG do it for you.
Here's a partial implementation of that Tcl code in javascript:
first we need a regexp to tokenize SVG paths:
var svg_path_regexp = (function(){
var number = '-?[0-9.]+';
var comma = '\s*[, \t]\s*';
var space = '\s+';
var xy = number + comma + number;
var standard_paths = '[mlcsqt]';
var horiz_vert = '[hv]\s*' + number;
var arc = 'a\s*' + xy + space + number + space + xy + space + xy;
var OR = '\s*|';
return new RegExp(
standard_paths +OR+
xy +OR+
horiz_vert +OR+
arc,
'ig'
);
})();
now we can implement the rotate function:
function rotate_SVG_path (path, Ox, Oy, angle) {
angle = angle * Math.atan(1) * 4 / 180.0; // degrees to radians
var tokens = path.match(svg_path_regexp);
for (var i=0; i<tokens.length; i++) {
var token = tokens[i].replace(/^\s+|\s+$/g,''); // trim string
if (token.match(/\d/)) { // assume it's a coordinate
var xy = token.split(/[, \t]+/);
var x = parseFloat(xy[0]);
var y = parseFloat(xy[1]);
x = x - Ox; // Shift to origin
y = y - Oy;
var xx = x * Math.cos(angle) - y * Math.sin(angle); // Rotate
var yy = x * Math.sin(angle) + y * Math.cos(angle);
x = xx + Ox; // Shift back
y = yy + Oy;
token = x + ',' + y;
}
else if (token.match(/^[hv]/)) {
// handle horizontal/vertical line here
}
else if (token.match(/^a/)) {
// handle arcs here
}
tokens[i] = token;
}
return tokens.join('');
}
The above rotate function implements everything except horizontal/vertical lines (you need to keep track of previous xy value) and arcs. Neither should be too hard to implement.