#math for programmers

Learn how to calculate the length of a curved path using an integral formula, vs using a brute force summation through a JavaScript FOR LOOP.

It’s easy to calculate the length of a straight line, simply use Patagonian's Theorem.

c^2 = length^2 + height^2

c = [ length^2 + height^2 ]^.5

Or when applied to Graph 3

length = ( b – a )

height = ( f(b) – f(a) )

[ (b – a)^2 + ( f(b) – f(a) )^2 ]^.5.

However, it’s not so easy to calculate the length of a curved line, since in most cases we can only approximate the length using segments.

In this article, we will demonstrate how to use segments to calculate the length of an arc, and then use Integral Calculus to calculate the same arc.

Segmentation of a Curve

To get started, let’s extend the Patagonian's Theorem to calculate the length of a curve, by looking at the curve in segments. Our goal is to make the segments smaller and smaller. Each segment is called “Delta X” or (Δx).

If the length along the x-axis is (b – a) and there are (n) segments, then (Δx) will be the length between [a, b] divided into (n) segments. This concept is presented in Graph 4.

Δx = (b – a) / n

In Graph 3, (n) is set to 4 segments.

Δx = (b – a) / 4

Since we haven’t established what values (a) or (b) have, we don’t know the exact value yet. We will get there.

As we did in Graph 3, we calculate the length of each segment along the curve using Patagonian's Theorem. To continue, we need to know where each segment ends and begins. For the purposes of this example, we will assign and index number (i) to each segment line .. 0 – 4.

In Graph 5, we have assigned an index number (i) to each segment line. Thus x[0] = a, while x[4] = b.

Since each segment along the x-axis is of length (Δx), another way to describe (Δx) mathematically is:

Δx = x[i] – x[i – 1], where i > 0

And just like we did in Graph 3, when we calculated the rise using:

height = f(b) – f(a)

Now, let’s generalize this so that it uses the value of x[i] :

height = f( x[i] ) – f( x[i - 1] ) , where i > 0

Now, let’s generalize Patagonian's Theorem so that it uses the values from x[i] :

[ length^2 + height^2 ]^.5

[ (Δx)^2 + ( f( x[i] ) – f( x[i - 1] ) ) ^2 ]^.5

Note: I’m using (Δx), instead of [ x[i] – x[i – 1] ], since (Δx) is a constant value.

The next step in our process is to Sum all the little segments:

Arc Length = Sum (i = 1 to 4) [ (Δx)^2 + ( f( x[i] ) – f( x[i - 1] ) ) ^2 ]^.5

Or written as a program:

function arcLength (a, b, n, f) // a is the starting x value // b is the ending x value // n is the number of segments // f is the function which returns the y value for a given x

{

var Δx = (b – a) / n

var rtn = 0;

for (var i = a; i < b; i += Δx )

{ rtn += [ (Δx)^2 + ( f(i) – f(i - Δx) ) ^2 ]^.5; }

return (rtn);

}

Code Segment 1: Summing (n) segments in an Arc (JavaScript)

Making Smaller Segments

Remember that the number of segments between (a) and (b) is defined by (n). Therefore to increase the accuracy, we need smaller and smaller segments. To get smaller and smaller segments, we need larger and larger values of (n).

You can test this theory using the code above above. Increase the value of (n) each time you run the function. In addition, you will notice that the function takes longer and longer to return a value. There is a way to speed this process up.

Graph 6 shows visually what is happening when we increase the value of (n) in the Code Segment 1. That is, that we have smaller segments with a larger number of segments.

Δx = (b – a) / n

The next step is to make the segments infinitesimally small. In laymens terms, we want (n) to be smaller than the width of a human hair. In mathematical terms, it is said that (n) is approaching infinity, and written as (n →∞).

Limit (n →∞) Sum (i = 1 to n) [ (Δx)^2 + ( f( x[i] ) – f( x[i - 1] ) ) ^2 ]^.5

The next step is a mathematical transformation.

The equation for a line is :

( y[1] – y[0] ) = m ( x[1] – x[0] ), where m = rate of change for the line

Written another way, the equation for a line is:

( f(x[1]) – f(x[i-1]) ) = m ( x[i] – x[i – 1] )

Another way to express (m) the rate of change for a line is f’(x).

Where f(x) is the line being examined, f’(x) is the rate of change at a particular point along the line f(x). So, we have:

( f(x[1]) – f(x[i-1]) ) = f’(x) ( x[i] – x[i – 1] )

Now, x[i] – x[i – 1] equals Δx, so …

( f(x[1]) – f(x[i-1]) ) = f’(x) Δx

Now, let’s adjust our limit equation from above :

from :

Limit (n →∞) Sum (i = 1 to n) [ (Δx)^2 + ( f( x[i] ) – f( x[i - 1] ) ) ^2 ]^.5

to :

Limit (n →∞) Sum (i = 1 to n) [ (Δx)^2 + ( f’(x) Δx ) ^2 ]^.5

And with a few more transformations …

Limit (n →∞) Sum (i = 1 to n) [ (Δx)^2 + f’(x)^2 Δx^2 ]^.5

Limit (n →∞) Sum (i = 1 to n) [ (Δx)^2 ( 1 + f’(x)^2 ) ]^.5

Limit (n →∞) Sum (i = 1 to n) (Δx) [ ( 1 + f’(x)^2 ) ]^.5

Limit (n →∞) Sum (i = 1 to n) [ ( 1 + f’(x)^2 ) ]^.5 (Δx)

Now this is where we can transform a limit equation into an integral

Integral [a, b] [ ( 1 + f’(x)^2 ) ]^.5 (dx), where dx = Δx

Now all that is left is to evaluate the integral.

Using Integral Calculus

Unfortunately, not every line that can be drawn can be integrated. Thus we have to switch from the sine wave function, used as an example above, to (x^2) for the example below.

Using Graph 7 as our example, let’s assume that the curved line can be drawn using the equation :

x^2

Therefore, let’s let our function f(x) return values of x^2.

f(x) = x^2

Or as written as JavaScript Code:

function f (x) { return (Math.pow (x, 2)); }

Code Segment 2: defining f(x) as (x^2)

Now we need to define what f’(x) is, this is where differentiation comes in handy, and is discussed in another lesson.

f’(x) = 2x

Or as written as JavaScript Code:

function fp (x) { return (2 * x); }

Code Segment 3: defining f’(x) as (2x)

Note: as you will see in Code Segment 4, we will not need Code Segments 2 and 3 when evaluating the length of a curve. These are only needed if you choose to generalize your integral function into an integral calculator. For now, we will do all the work manually.

Now that f’(x) is defined, we can plug it into our limit equation, and transform the integral into a formula that we can evaluate:

Integral [a, b] [ ( 1 + f’(x)^2 ) ]^.5 (dx)

Integral [a, b] [ ( 1 + (2x)^2 ) ]^.5 (dx)

x = tan (u) / 2 u = arctan (2x)

a1 = arctan (2a) a2 = arctan (2b)

dx = sec^2 (u)/ 2 du

Integral [a1, b1] [ ( 1 + (2tan (u) )^2 ) ]^.5 (sec^2 (u) / 2 du )

Integral [a1, b1] (sec^2 (u) / 2) [ ( 1 + (2tan (u) )^2 ) ]^.5 du

Integral [a1, b1] 1/2 [ sec^2 (u) [ sec^2 (u) ]^.5 du ]

Integral [a1, b1] 1/2 [ sec^2 (u) sec (u) du ]

Integral [a1, b1] 1/2 [ sec^3 (u) du ]

1/2 [ sec2 (u) sin (u) / 2+ integral [a1, b1] sec (u) / 2 du ]

1/4 [ sec2 (u) sin (u) + ln | sec (u) + tan (u) | ] [a1, b1]

u = arctan (2x)

1/4 [ sec2 (arctan (2x)) tan (arctan (2x)) + ln | sec (arctan (2x)) + tan (arctan (2x)) | ] [a, b]

tan (arctan (2x)) = 2x

sec (arctan (2x)) = (4x^2+1)^.5

1/4 [ (4x^2+1)^.5 * (2x) + ln | (4x^2+1)^.5 + 2x | ] [a, b]

1/4 [ (2x) * (4x^2+1)^.5 + ln | (4x^2+1)^.5 + 2x | ] [a, b]

Now, we can write this equation into a JavaScript function as follows:

function arcLength (a, b)

{

rtn = 1/4 * ( (2*b) * (4*(b)^2+1)^.5 + Math.log (Math.abs ( (4*(b)^2+1)^.5 + (2*b) ) ) ) ;

rtn -= 1/4 * ( (2*a) * (4*(a)^2+1)^.5 + Math.log (Math.abs ( (4*(a)^2+1)^.5 + (2*a) ) ) ) ;

return (rtn);

}