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

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