# parabola generator... java script help! focal point location?

## Recommended Posts

i have found a nice little tutorial on building parabola's.

http://www.instructables.com/id/Parabola-Plotting-Web-Pages/?ALLSTEPS

if everything is printed out properly, you could construct a clean and precise parabola...

So, with the use of this little bit of java script

http://www.idea2ic.com/OtherStuff/Web_parabola/Plot%20A%20Parabola%20segment.html

you can print out 12 segments tape together a clean prototype... But when i look at the Left side or Right side im Not sure where the focal point is located...

Maybe some one could look at this little script and find a way to place a X at the focal point location?

```<!DOCTYPE html>
<html>
<title>                  Parabola Segments    </title>
<script>
function                 drawPicture(form)
{ var canvas =           document.getElementById('example'); // link to id='example'
var context =          canvas.getContext('2d');               // create graphic context
var scale =            350;
var gain =             1;
var focal =            form.foc.value;
var step =             0.1;
var Num_seg =          24;
var a =                1/(4*focal);
var x0 =               scale*.6;
var y0 =               scale*2;

var x ,y, dx ,dy,ds,angle,x_g,y_g;
var s     =              0;
var x_last=              0;
var y_last=              0;

var X_calc =           new Array(11);
var Y_calc =           new Array(11);
var S_calc =           new Array(11);

for                    (i=0; i<=10; i++)                               //Calc Parabola data
{ x =                    step*i;
y =                    a*x*x;
dx =                   x-x_last;
dy =                   y-y_last;
ds =                   Math.pow(dx*dx+dy*dy,.5);
s =                    s + ds;
X_calc[i] =            x;                                              //X_data
Y_calc[i] =            y;                                              //Y_data
S_calc[i] =            s;                                              //Surface_data
angle =                (x/s)*2*Math.PI/Num_seg;
x_last=                x;
y_last=                y;
}

gain =                 1.99/S_calc[10];

context.clearRect(     0,0,scale*2,scale*2);                            //ÊclearÊcanvasÊ
context.strokeStyle =  "Black";

context.beginPath();
context.fillStyle =   "rgb( 255, 255, 255)";                         // red, grn, blu
context.fillRect (     0, 0, scale*2, scale*2);                      // or draw white box
context.fill();

if                    (form.s1[0].checked)                          //Draw segements?
{ context.moveTo(        x0,   y0);                                   // move to origin
for                    (i=0; i<=10; i++)
{ angle =                (X_calc[i]/S_calc[i])*2*Math.PI/Num_seg;
x_g =                  gain*scale*S_calc[i]*Math.sin(angle);
y_g =                  -gain*scale*S_calc[i]*Math.cos(angle);
context.lineTo(        x_g + x0,  y_g + y0 );
} context.stroke();
context.strokeStyle =  "Black";
context.moveTo(        x0,   y0);                                     // move to origin
for                    (i=0; i<=10; i++)
{ angle =                (X_calc[i]/S_calc[i])*2*Math.PI/Num_seg;
x_g =                  -gain*scale*S_calc[i]*Math.sin(angle);
y_g =                  -gain*scale*S_calc[i]*Math.cos(angle);
context.lineTo(        x_g + x0,  y_g + y0 );
} context.stroke();
//context.strokeStyle =  "Black";
for                    (j=1; j<=10; j++)
{ angle =                (X_calc[j]/S_calc[j])*2*Math.PI/Num_seg;
y_g =                  -gain*scale*S_calc[j];
context.moveTo(        x0,  y_g + y0);                                // move to origin
for                    (i=0; i<=10; i++)
{ x_g =                   gain*scale*S_calc[j]*Math.sin(angle*i/10);
y_g =                  -gain*scale*S_calc[j]*Math.cos(angle*i/10);
context.lineTo(        x_g + x0,  y_g + y0);                                // move to origin
} context.stroke();
y_g =                  -gain*scale*S_calc[j];
context.moveTo(        x0,  y_g + y0);                                  // move to origin
for                    (i=0; i<=10; i++)
{ x_g =                  -gain*scale*S_calc[j]*Math.sin(angle*i/10);
y_g =                  -gain*scale*S_calc[j]*Math.cos(angle*i/10);
context.lineTo(        x_g + x0,  y_g + y0);                           // move to origin
} context.stroke();
}

x0 =                   scale*1.4;                                      // draw second segment
y0 =                   0;
context.moveTo(        x0,   y0);                                     // move to origin
for                    (i=0; i<=10; i++)
{ angle =                (X_calc[i]/S_calc[i])*2*Math.PI/Num_seg;
x_g =                  gain*scale*S_calc[i]*Math.sin(angle);
y_g =                  gain*scale*S_calc[i]*Math.cos(angle);
context.lineTo(        x_g + x0,  y_g + y0 );
} context.stroke();
context.moveTo(        x0,   y0);                                    // move to origin
for                    (i=0; i<=10; i++)
{ angle =                (X_calc[i]/S_calc[i])*2*Math.PI/Num_seg;
x_g =                  -gain*scale*S_calc[i]*Math.sin(angle);
y_g =                  gain*scale*S_calc[i]*Math.cos(angle);
context.lineTo(        x_g + x0,  y_g + y0 );
} context.stroke();
for                    (j=1; j<=10; j++)
{ angle =                (X_calc[j]/S_calc[j])*2*Math.PI/Num_seg;
y_g =                  gain*scale*S_calc[j];
context.moveTo(        x0,  y_g + y0);                                // move to origin
for                    (i=0; i<=10; i++)
{ x_g =                   gain*scale*S_calc[j]*Math.sin(angle*i/10);
y_g =                  gain*scale*S_calc[j]*Math.cos(angle*i/10);
context.lineTo(        x_g + x0,  y_g + y0);                         // move to origin
} context.stroke();
y_g =                  gain*scale*S_calc[j];
context.moveTo(        x0,  y_g + y0);                                // move to origin
for                    (i=0; i<=10; i++)
{ x_g =                  -gain*scale*S_calc[j]*Math.sin(angle*i/10);
y_g =                  gain*scale*S_calc[j]*Math.cos(angle*i/10);
context.lineTo(        x_g + x0,  y_g + y0);                         // move to origin
} context.stroke();
}
}

if                       (form.s1[1].checked)                             // draw left side
{ x0 =                   50;
y0 =                   scale*2-100;
context.moveTo(        x0,   y0);
for                    (i=0; i<=10; i++)
{ x_g =                  gain*scale*X_calc[i];
y_g =                  -gain*scale*Y_calc[i];
context.lineTo(        x_g + x0,  y_g + y0);                            // move to origin
} context.stroke();
for                    (i=0; i<=10; i++)
{ x_g =                   gain*scale*X_calc[i];
y_g =                  -gain*scale*Y_calc[0];
context.moveTo(        x_g + x0,  y_g + y0);                            // move to origin
y_g =                  -gain*scale*Y_calc[10];
context.lineTo(        x_g + x0,  y_g + y0);                            // move to origin
} context.stroke();
for                    (i=0; i<=10; i++)
{ x_g =                   gain*scale*X_calc[0];
y_g =                  -gain*scale*Y_calc[i];
context.moveTo(        x_g + x0,  y_g + y0);                            // move to origin
x_g =                  gain*scale*X_calc[10];
context.lineTo(        x_g + x0,  y_g + y0);                            // move to origin
} context.stroke();
}

if                       (form.s1[2].checked)                             // draw left side
{ x0 =                   2*scale-50;
y0 =                   scale*2-100;
context.moveTo(        x0,   y0);
for                    (i=0; i<=10; i++)
{ x_g =                  -gain*scale*X_calc[i];
y_g =                  -gain*scale*Y_calc[i];
context.lineTo(        x_g + x0,  y_g + y0);                            // move to origin
} context.stroke();
for                    (i=0; i<=10; i++)
{ x_g =                   -gain*scale*X_calc[i];
y_g =                  -gain*scale*Y_calc[0];
context.moveTo(        x_g + x0,  y_g + y0);                            // move to origin
y_g =                  -gain*scale*Y_calc[10];
context.lineTo(        x_g + x0,  y_g + y0);                            // move to origin
} context.stroke();
for                    (i=0; i<=10; i++)
{ x_g =                   -gain*scale*X_calc[0];
y_g =                  -gain*scale*Y_calc[i];
context.moveTo(        x_g + x0,  y_g + y0);                            // move to origin
x_g =                  -gain*scale*X_calc[10];
context.lineTo(        x_g + x0,  y_g + y0);                            // move to origin
} context.stroke();
}

context.closePath();

// form.REC.value  =      form.REC.value +"S_calc[i]"+S_calc[10]+" \n" ;

}
</script>

<style                   type = "text/css">
canvas {                 border: 2px solid gray; }
</style>

<body>

<h1>Parabola 1/12 Segments or Sides </h1>
<form >
<input type=text size = "10" value=".5" name="foc" onkeypress="drawPicture(this.form)">
=>Define a parabola focal point =>
<input type=button value="Plot_it" onClick="drawPicture(this.form)">
<input type="radio" Name=s1 checked="checked"  Value = "Seg" />     segments</label>
<input type="radio" Name=s1                    Value = "LSide"  /> <label for="sidecheck"> Left Side</label>
<input type="radio" Name=s1                    Value = "RSide"  /> <label for="sidecheck"> Right Ride</label>
<p>
<canvas  id   =         "example" width="700" height="700">   </canvas> <br>
</form>

</body>
</html>
```
Edited by Mr-Protocol
##### Share on other sites

• 8 months later...

So, im back on this project, i have a working printer now...a simple proto type, i can glue some tin foil to construction paper and cut out the templates printed from this online parabolic plotting tool...

the second more sturdy prototype, i also built a spot welder out of a old micro wave transformer... i can spot weld sheet metal together...

Looking at this online tutorial i still struggle to locate this focal point(left side, right side) on the horizontal grid...

i hope to modify the source to place a X at the correct location... this will make a excellent wifi antenna...

##### Share on other sites

I hope to get help with the java script... I can put this script on jsfiddle for online testing...

I need to mark the focus point on the grid...

Java script experts?

## Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

×   Pasted as rich text.   Paste as plain text instead

Only 75 emoji are allowed.

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×