Develop Reference

How to generate a mathematical transform in JS given 4 initial points and 4 final points

I am trying to figure out how to generate the transform necessary to take a set of coordinates for a rectangle-like polygon, given source and destination.
I am doing it in node using and I'm comfortable using the image manipulation libraries, I just can't find out the maths behind generating a transform with the information that I have.

You have source coordinates and destination coordinates after applying of perspective transformation matrix. That matrix contains 8 independent coefficients. Source and destination points form 8 pairs of corresponding coordinates (x1(src)=>x1'(dst) and so on).
This article of Paul Heckbert shows theory - how to build system of eight linear equations to calculate coefficients of perspective transformation matrix.
Antigrain library contains C++ implementation of this problem solution (in the file agg_trans_perspective.h). I'm sure that appropriate JS implementation does exist in the world.
After solving of eq. system you have coefficients A..H and can find transformation of any needed point (x,y)=>(x',y'):
x' = (A * x + B * y + C) / (G * x + H * y + 1.0)
y' = (D * x + E * y + F) / (G * x + H * y + 1.0)

Placing points equidistantly along an Archimedean spiral

I have an Archimedean spiral determined by the parametric equations x = r t * cos(t) and y = r t * sin(t).
I need to place n points equidistantly along the spiral. The exact definition of equidistant doesn't matter too much - it only has to be approximate.
Using just r, t and n as parameters, how can I calculate the coordinates of each equidistant point?

You want to place points equidistantly corresponding to arc length. Arc length for Archimedean spiral (formula 4) is rather complex
s(t) = a/2 * (t * Sqrt(1 + t*t) + ln(t + Sqrt(1+t*t)))
and for exact positions one could use numerical methods, calculating t values for equidistant s1, s2, s3... arithmetical progression. It is possible though.
First approximation possible - calculate s(t) values for some sequence of t, then get intervals for needed s values and apply linear interpolation.
Second way - use Clackson scroll formula approximation, this approach looks very simple (perhaps inexact for small t values)
t = 2 * Pi * Sqrt(2 * s / a)
Checked: quite reliable result

How to divide an ellipse to equal segments?

This calculates vertex coordinates on ellipse:
function calculateEllipse(a, b, angle)
{
var alpha = angle * (Math.PI / 180) ;
var sinalpha = Math.sin(alpha);
var cosalpha = Math.cos(alpha);
var X = a * cosalpha - b * sinalpha;
var Y = a * cosalpha + b * sinalpha;
}
But how can I calculate the "angle" to get equal or roughly equal circumference segments?

So from what Jozi's said in the OP's comments, what's needed isn't how to subdivide an ellipse into equal segments (which would require a whole bunch of horrible integrals), it's to construct an ellipse from line segments of roughly equal length.
There are a whole pile of ways to do that, but I think the best suited for the OP's purposes would be the concentric circle method, listed on the page as 'the draftman's method'. If you don't mind installing the Mathematica player, there's a neat lil' app here which illustrates it interactively.
The problem with those methods is that the segment lengths are only roughly equal at low eccentricities. If you're dealing in extreme eccentricities, things get a lot more complicated. The simplest solution I can think of is to linearly approximate the length of a line segment within each quadrant, and then solve for the positions of the endpoints in that quadrant exactly.
In detail: this is an ellipse quadrant with parameters a = 5, b = 1:
And this is a plot of the length of the arc subtended by an infinitesimal change in the angle, at each angle:
The x axis is the angle, in radians, and the y axis is the length of the arc that would be subtended by a change in angle of 1 radian. The formula, which can be derived using the equations in the Wikipedia article I just linked, is y = Sqrt(a^2 Sin^2(x) + b^2 Cos^2(x)). The important thing to note though is that the integral of this function - the area under this curve - is the length of the arc in the whole quadrant.
Now, we can approximate it by a straight line:
which has gradient m = (a-b) / (Pi/2) and y intercept c = b. Using simple geometry, we can deduce that the area under the red curve is A = (a+b)*Pi/4.
Using this knowledge, and the knowledge that the area under the curve is the total length of the curve, the problem of constructing an approximation to the ellipse reduces to finding say a midpoint-rule quadrature (other quadratures would work too, but this is the simplest) of the red line such that each rectangle has equal area.
Converting that sentence to an equation, and representing the position of a rectangle in a quadrature by it's left hand boundary x and its width w, we get that:
(v*m)*w^2 + (m*x+c)*w - A/k == 0
where k is the number of pieces we want to use to approximate the quadrant, and v is a weighting function I'll come to shortly. This can be used to construct the quadrature by first setting x0 = 0 and solving for w0, which is then used to set x1 = w0 and solve for w1. Then set x2 = w1, etc etc until you've got all k left-hand boundary points. The k+1th boundary point is obviously Pi/2.
The weighting function v effectively represents where the rectangle crosses the red line. A constant v = 0.5 is equivalent to it crossing in the middle, and gets you this with 10 points:
but you can play around with it to see what better balances the points. Ideally it should stay in the range [0, 1] and the sum of the values you use should be k/2.
If you want an even better approximation without messing around with weighting functions, you could try least-squares fitting a line rather than just fitting it to the endpoints, or you could try fitting a cubic polynomial to the blue curve instead of a linear polynomial. It'll entail solving quartics but if you've a maths package on hand that shouldn't be a problem.

Too long for a comment, so I suppose this has to be an answer ...
Here's a mathematically simple approach to forming a first order approximation. Pick one quadrant. You can generate the data for the other quadrants by reflection in the X and Y axis. Calculate (x,y) for the angle = 0 degrees, 1 degree, ... 90 degrees. Now you want the little lengths joining consecutive points. If (x_n, y_n) are the coordinates at angle = n, then Pythagoras tells us the distance D between points (x_n, y_n) and (x_n+1, y_n+1) is D = sqrt((x_n+1 - x_n)^2 + (y_n+1 - y_n)^2). Use this formula to produce a table of cumulative distances around the ellipse for angles from 0 degrees to 90 degrees. This is the inverse of the function you seek. Of course, you don't have to pick a stepsize of 1 degree; you could use any angle which exactly divides 90 degrees.
If you want to find the angle which corresponds to a perimeter step size of x, find the largest angle n in your table producing a partial perimeter less than or equal to x. The partial perimeter of angle n+1 will be larger than x. Use linear interpolation to find the fractional angle which corresponds to x.
All we are doing is approximating the ellipse with straight line segments and using them instead of the original curve; its a first order approximation. You could do somewhat better by using Simpson's rule or similar instead of linear interpolation.
Yes, you have to calculate the table in advance. But once you have the table, the calculations are easy. If you don't need too much accuracy, this is pretty simple both mathematically and coding-wise.

Using points to generate quadratic equation to interpolate data

I'm trying to come up with a flexible decaying score system for a game using quadratic curves. I could probably brute force my way through it but was wondering if anyone can help me come up with something flexible or maybe there are some ready made solutions out there already!
But basically I need the ability to generate the values of a,b & c in:
y = ax^2 + bx + c
from 3 points (which i know fall on a valid quadratic curve, but are dynamic based on configurable settings and maximum times to react to an event) for example: (-1100, 0), (200, 1), (1500, 0).
So I can then plugin in values for x to generate values of Y which will determine the score I give the user.
If I could get away with a fixed quadratic equation I would but the scoring is based on how much time a user has to react to a particular event (X Axis) the y axis points will always be between 0 and 1 with 0 being minimum score and 1 being maximum score!
Let me know if you need more info!

You can use Lagrange polynomial interpolation, the curve is given by
y(x) = y_1 * (x-x_2)*(x-x_3)/((x_1-x_2)*(x_1-x_3))
+ y_2 * (x-x_1)*(x-x_3)/((x_2-x_1)*(x_2-x_3))
+ y_3 * (x-x_1)*(x-x_2)/((x_3-x_1)*(x_3-x_2))
If you collect the coefficients, you obtain
a = y_1/((x_1-x_2)*(x_1-x_3)) + y_2/((x_2-x_1)*(x_2-x_3)) + y_3/((x_3-x_1)*(x_3-x_2))
b = -y_1*(x_2+x_3)/((x_1-x_2)*(x_1-x_3))
-y_2*(x_1+x_3)/((x_2-x_1)*(x_2-x_3))
-y_3*(x_1+x_2)/((x_3-x_1)*(x_3-x_2))
c = y_1*x_2*x_3/((x_1-x_2)*(x_1-x_3))
+ y_2*x_1*x_3/((x_2-x_1)*(x_2-x_3))
+ y_3*x_1*x_2/((x_3-x_1)*(x_3-x_2))

you can formulate it in a matrix form: aX=b
1 x1 x1^2
a= 1 x2 x2^2
1 x3 x3^2
y1
b= y2
y3
then solve by inverting the matrix a (can be done via gauss method pretty straight forward)
http://en.wikipedia.org/wiki/Gaussian_elimination
X = a^-1*b
and X in this case are the [c b a] coefficients your are looking for.

Get the slope from one point and an angle in degrees

In javascript, I am trying to draw a line that is at an angle that is user defined.
Basically, I have a point (x,y) and an angle to create the next point at. The length of the line need to be 10px.
Let's say that the point to start with is (180, 200)... if I give it angle "A" and the (I guess)hypotenuse is 10, what would my equation(s) be to get the X and Y for a slope?
Thanks for your help!

well, from basic trigonometry...
sin A° = Y/10
cos A° = X/10
10^2 = Y^2 + X^2

As Mr Doyle snarkily implied, the math isn't that hard, but :
1) Make sure you are clear about what the angle is referenced to, and what directions your coordinates go; most simple trig stuff assumes you are dealing with traditional cartesian coordinates with x increasing to the right, and y increasing up the page, whereas most drawing api have y increasing down the page and x increasing to the right.
2) make sure you understand whether the math functions need degrees or radians and supply them with the appropriate arguments.

Assuming H = Hypotenuse (10 in your example), this is the formula for your slope:
Y2 = H(Sin(A)) + Y1
= 10(Sin(A)) + 200
X2 = Sqrt((H^2)-(Y2^2)) + X1
= Sqrt(100 - (Y2^2)) + 180
So now you've got
(180, 200) -> (X2, Y2)
Where X2, Y2 will vary depending on the values of A and H
To check our calculation - A (as entered by the user) can be calculated using the slope equation replacing the X1, X2, Y1 and Y2 values with the original input and resulting output.
A = InvTan((Y2 - Y1) / (X2 - X1))
= InvTan((Y2 - 200) / (X2 - 180))

Maybe a better way to look at the problem is using vectors:
(source: equationsheet.com)
You can also write the vector this way:
(source: equationsheet.com)
where
(source: equationsheet.com)
Setting the first equal to the second lets us solve for the end point given the starting point, the angle, and the distance:
(source: equationsheet.com)
(source: equationsheet.com)