Jump to content

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


i8igmac
 Share

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?

F1PZ0KEG825NHCZ.MEDIUM.jpg

F4OKW6IG825NG88.MEDIUM.jpg

<!DOCTYPE html>
<html>
<head>
<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 radius =           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>

</head>
<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
added spoiler tags
Link to comment
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...

FAI96GIG825NHH0.MEDIUM.jpg

F4OKW6IG825NG88.MEDIUM.jpg

F1PZ0KEG825NHCZ.MEDIUM.jpg

FVDLLSXG825NGC6.MEDIUM.jpg

Link to comment
Share on other sites

Join the conversation

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

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

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

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...