i8igmac Posted January 17, 2015 Share Posted January 17, 2015 (edited) 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> <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 January 17, 2015 by Mr-Protocol added spoiler tags Quote Link to comment Share on other sites More sharing options...
i8igmac Posted September 21, 2015 Author Share Posted September 21, 2015 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... Quote Link to comment Share on other sites More sharing options...
i8igmac Posted September 21, 2015 Author Share Posted September 21, 2015 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? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.