Parabolas revisited.

While back I did an article about doing parabolas. Here is a web page that can help in printing parabola sections.



You know I had to make a foil plated version.


The code: (use at your own risk)

<!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>
 
 
Now to build a base. 
 


 
 
 
 
Other code to look at: (This will help you to calculate the focal point. .5 gives a focal point
within the parabola. I think I used 1.9 for focal point away from the parabola to work better
 as a solar oven. 
 
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>                  Plot A Parabola      </title>
<script>
function                 drawPicture(form)
{ var canvas =           document.getElementById('example'); // link to id='example'
  var context =          canvas.getContext('2d');               // create graphic context
  var scale =            300;
  var radius =           1;
  var focal = form.foc.value; 
  
  var step =             0.1;
  var a =                1/(4*focal);
  var x0 =               scale;
  var y0 =               scale*2;
  
  
  context.clearRect( 0,0,scale*2,scale*2); //ÊclearÊcanvasÊ

  context.strokeStyle =  "yellow";                              // set stroke to red
  context.beginPath();                                          // new geometry
  context.moveTo(        x0,   y0);                             // move to origin
  context.lineTo(        x0,   -scale*2 + y0 );                 // second point
  context.stroke();
  context.moveTo(        x0-scale,   -scale+ y0 );              // move to origin
  context.lineTo(        x0+scale,   -scale+ y0 );              // second point
  context.stroke();
  
  context.closePath();                                          // end geo

  context.fillStyle =   "rgb( 0, 255, 0)";                      // red, grn, blu

  context.strokeStyle =  "Black"; 
  context.beginPath();                                          // new geometry
  context.moveTo(        x0,   y0);                                // move to origin 
  for                    (i=0; i<=10; i++)
{ var x  =               i*step;
  var y  =               -a*x*x;
  context.lineTo(        scale*x + x0,  scale*y + y0 );           // second point
} context.stroke();                                                // stroke lines

  context.moveTo(        x0,   y0);                                 // move to origin 
  for                    (i=0; i<=10; i++)
{ var x  =              -i*step;
  var y  =              -a*x*x;
  context.lineTo(       scale*x + x0,  scale*y + y0 );             // second point
} context.stroke();                                                // stroke lines
  
  context.moveTo(       x0,   -scale*focal + y0 +5);               // move to focus 
  context.lineTo(       x0,   -scale*focal + y0 -5);               // plot focus 
  context.stroke();
  
  context.moveTo(       x0 +5, -scale*focal + y0 );                // move to focus 
  context.lineTo(       x0 -5, -scale*focal + y0 );                // plot focus 
  context.stroke();

  
  context.font =         "10px Times New Roman";                 // set font
  context.fillStyle =    "Black";                                // define fill using "black"
  context.fillText(      "-1", 10, 2*scale);                     // write "Sample String"  
  context.fillText(      "0",  scale, 2*scale);              // write "Sample String"  
  context.fillText(      "1",  1.97*scale, 2*scale);              // write "Sample String" 
  context.fillText(      "1",  1.97*scale, 1*scale);              // write "Sample String" 
  context.fillText(      "2",  1.97*scale, 10);              // write "Sample String" 
  context.fillText(      "focus",  x0-10, -scale*focal + y0 -10);              // write "Sample String" 


  
}
</script>

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

</head>
<body> 

<h1>Plot a Parabola With A +/-Unity Radius </h1>

<br>
<form>
<input size="10" value=".5" name="foc" onkeypress="drawPicture(this.form)" type="text">
=&gt;Define a parabola focal point =&gt;
<input value="Plot_it" onclick="drawPicture(this.form)" type="button">
<p>    
</p></form>

<canvas id="example" width="600" height="600"> 
</canvas> <br>
Radius is set to +/- 300 points.....A Parabola follows the equation  y = x^2/(4*focal)


</body></html>
 
Final result:
 
 

Comments

Post a Comment

Popular posts from this blog

Guiless?

Image
You actually can do a minimal windowing from the command line in Linux with dvtm. Dvtm is excellent for low end machines where graphics are not a priority. In the picture shown we have a working clock, SC a spreadsheet that you can easily export data to your favorite desktop spreadsheet such as Libreoffice, Links2 a web browser pointed to www.google.com, and finally nano a pretty decent basic text editor. I prefer vim, but nano has more of a user interface. Cheatsheet: `dvtm` is one simple, easy-to-use terminal multiplexer. Commonly used Options:     -v         prints version information to standard output, then exits.         -m <mod>   set default modifier at runtime.         [cmd...]   Execute cmd after dvtm is started. KeyBoard Shortcuts:     Mod    Each keybinding begins with Mod which defaults to ^...
Read more

MSOffice vs Libreoffice

Image
From https://wiki.documentfoundation.org/Feature_Comparison:_LibreOffice_-_Microsoft_Office Contents 1 Introduction 2 General office suite: LibreOffice vs. Microsoft Office 3 Word processors: LibreOffice Writer vs. Microsoft Word 4 Spreadsheet applications: LibreOffice Calc vs. Microsoft Excel 5 Presentation software: LibreOffice Impress vs. Microsoft Powerpoint 6 Database program: LibreOffice Base vs. Microsoft Access 7 Extensions: LibreOffice extensions adding outstanding features to LibreOffice 8 See also Introduction This page compares the features of LibreOffice 5.0.0 ( download ) and Microsoft Office 2013 . It separates major and minor feature differences and also includes notes on LibreOffice extensions. The comparison highlights differences and therefore does not display any features which are present in both office suites. The feature comparison table is continuously being updated and is work in progress It is a compilation by users and no...
Read more

Raspberry pi zero.

Image
Instead of getting the rpi zero w, I will just add a usb female to my existing pi for the time being.Have lots of leftover cables for the cause.. Can always plug in a wifi or bluetooth module.   Various notes: Simplest configuration to connect to an unsecured wireless router knowing it;s essid: #linux auto lo iface lo inet loopback auto eth0 iface eth0 inet dhcp allow-hotplug wlan0 auto wlan0 iface wlan0 inet dhcp wireless-essid router-essid  Improvisational solder less header pin for the rpi zero Original pi zero fully decked out. with bluetooth, wired m and wireless. Basic setup ----------------- install jessie os do updates install vim mc Wifi ------ Check Ethernet & Wifi Before continuing make sure the Ethernet cable is connected in and you can ping out from the Pi: ping 8.8.8.8 You will also want to set up your WiFi dongle. runsudo shutdown -h now and then plug in the WiFi module when the Pi is off so you don't ca...
Read more