Full version: jsB@nk » Calculation » Math » Trigonometry Demo
URL: https://www.javascriptbank.com/trigonometry-demo.html
Learn how to use the Math function to create circles with sin cos and tan.
Full version: jsB@nk » Calculation » Math » Trigonometry Demo
URL: https://www.javascriptbank.com/trigonometry-demo.html
<STYLE>.circle {LEFT: 5px}</STYLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><SCRIPT language=javascript>var tbvar loop="on"var dot=65rads=new Array(65)function rad () {for (i=1; i<dot; i++) {if (document.all) rads[i]=new Array (eval('rad'+i).style,-100,-100)else rads[i] = new Array (eval('document.rad'+i),-100,-100)}}function setCircle() {for (i=1; i<dot; i++) {rads[i][0].left=rads[i][1]+pX//if (document.layers) rads[i][0].left+=10rads[i][0].top=rads[i][2]+pY}}function counter() {for (i=1; i<dot; i++) {rad=Math.PI*(i/((dot-1)/2))rads[i][1] = Math.cos(rad)*60;rads[i][2] = Math.sin(rad)*60;}setCircle()}pX=200;pY=50obs = new Array(13)function ob () {for (i=0; i<8; i++) {if (document.all) obs[i]=new Array (eval('ob'+i).style,-100,-100)else obs[i] = new Array (eval('document.ob'+i),-100,-100)}}function lines(){for (i=0;i<10;i++){if (document.all){eval("line"+i+".style.pixelTop=50")eval("line"+i+".style.pixelLeft=110+20*"+i)}if (document.layers){ eval("document.line"+i+".top=50") eval("document.line"+i+".left=110+20*"+i)}}for (i=10;i<20;i++){if (document.all){eval("line"+i+".style.pixelTop="+i+"*20-240")eval("line"+i+".style.pixelLeft=200")}if (document.layers){ eval("document.line"+i+".top="+i+"*20-240") eval("document.line"+i+".left=200")}}}timeB=10x=0y=0xx=-5function setScale(d){if (scale<0)scale=-delse scale=d}function setSpeed(s){speed=sclearInterval(xyz)if (loop=="on")xyz=setInterval("timer()",speed)}function reverse(r){scale=scale*-1clearInterval(xyz)if (loop=="on")xyz=setInterval("timer()",speed)}speed=500scale=5var xyzfunction timeButton(tb){clearInterval(xyz),loop="off"if (tb==50)loop="on",xyz=setInterval("timer()",speed)}function setValues(){clearInterval(xyz),loop="off"if (document.layers)xx=document.layers[5].document.form1.degree.value-scaleelse {xx=form1.degree.value-scale}timer()}function timer() {xx+=scaleif (xx>=360)xx=0if (xx<0){xx=360;xx+=scale}x=xx*Math.PI/180for (i=1;i<8;i++) {obs[i][1] = Math.cos(x) * (66 - (i-1)*11)-2;obs[i][2] = -Math.sin(x) * (66 - (i-1)*11)-12;}for (i=0; i<8; i++) {obs[i][0].left=obs[i][1]+pXobs[i][0].top=obs[i][2]+pY}printValues()}function printValues(){if (document.all){t1.innerHTML="<B>cos</b> (x-value): <b>"+(Math.round(Math.cos(x)*1000))/1000+"</b>";t2.innerHTML="<B>sin</b> (y-value): <b>"+(Math.round(Math.sin(x)*1000))/1000+"</b>";t3.innerHTML="<B>tan:</b> (y/x ratio): <b>"+(Math.round(Math.tan(x)*1000))/1000+"</b>";}if (document.layers){document.t1.document.write("<B>cos</b> (x-value): <b>",(Math.round(Math.cos(x)*1000))/1000,"</b>");document.t1.document.close();document.t2.document.write("<B>sin</b> (y-value): <b>",(Math.round(Math.sin(x)*1000))/1000,"</b>");document.t2.document.close();document.t3.document.write("<B>tan</b> (y/x ratio): <b>",(Math.round(Math.tan(x)*1000))/1000,"</b>");document.t3.document.close();}//timer()}</SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><BODY onload="rad();counter();ob();lines();timer();timeButton('50');"><div style="position: relative; height: 100%;"><DIV id=xx2 style="LEFT: 5px; POSITION: absolute; TOP: 5px"><B>Trigonometry Demo</B></DIV><DIV id=xx3 style="LEFT: 450px; POSITION: absolute; TOP: 135px"></DIV><DIV class=circle id=t1 style="POSITION: absolute; TOP: 40px"><B>cos (x-value):</B></DIV><DIV class=circle id=t2 style="POSITION: absolute; TOP: 80px"><B>sin (y-value):</B></DIV><DIV class=circle id=t3 style="POSITION: absolute; TOP: 120px"><B>tan (y/x ratio):</B></DIV><DIV id=t4 style="LEFT: 5px; POSITION: absolute; TOP: 165px"><FORM name=form1><B>Enter Degrees</B> to be converted to <B>radians</B>: <BR><INPUT name=degree size=3> <INPUT onclick=setValues() type=button value=submit> one radian is 2pi/360 by definition<BR><BR></FORM>convert degrees to radians, you get <B>x,y coordinates</B> based on a circle<BR>with a <B>radius of one (pixel in this script)</B>. </DIV><DIV id=t6 style="LEFT: 5px; POSITION: absolute; TOP: 275px"><B>cos</B> = <B>x</B> (from -1 to +1 on the x axis) <B>sin</B> = <B>y</B> (from -1 to +1 on the y axis)<BR></DIV><DIV id=t5 style="LEFT: 325px; POSITION: absolute; TOP: 5px"><TABLE> <TBODY> <TR> <TD> <FORM name=form4> <CENTER><B>Cycle Control</B><BR><INPUT onclick="timeButton('50')" type=button value=start> <INPUT onclick="timeButton('10')" type=button value=stop><BR><B>Set Spacing</B><BR><INPUT onclick=setScale(1) type=button value=small> <INPUT onclick=setScale(5) type=button value=med.> <INPUT onclick=setScale(10) type=button value=big><BR><B>Set Speed</B><BR><INPUT onclick=setSpeed(1) type=button value=" fast"> <INPUT onclick=setSpeed(200) type=button value=med.> <INPUT onclick=setSpeed(1000) type=button value=slow><BR><B>Reverse</B><BR><INPUT onclick=reverse() type=button value=reverse> </CENTER></FORM></TD></TR></TBODY></TABLE></DIV><DIV id=ob0 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 1"></DIV><DIV id=ob1 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#0000ff size=+3><B>.</B></FONT></DIV><DIV id=ob2 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#0000ff size=+3><B>.</B></FONT></DIV><DIV id=ob3 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#0000ff size=+3><B>.</B></FONT></DIV><DIV id=ob4 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#0000ff size=+3><B>.</B></FONT></DIV><DIV id=ob5 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#0000ff size=+3><B>.</B></FONT></DIV><DIV id=ob6 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#0000ff size=+3><B>.</B></FONT></DIV><DIV id=ob7 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#0000ff size=+3><B>.</B></FONT></DIV><DIV id=line0 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=line1 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=line2 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=line3 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=line4 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=line5 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000 size=+1><B>.</B></FONT></DIV><DIV id=line6 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000 size=+1><B>.</B></FONT></DIV><DIV id=line7 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000 size=+1><B>.</B></FONT></DIV><DIV id=line8 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000 size=+1><B>.</B></FONT></DIV><DIV id=line9 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>x-axis</B></FONT></DIV><DIV id=line10 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=line11 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=line12 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=line13 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=line14 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=line15 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=line16 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=line17 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=line18 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=line19 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>y-axis</B></FONT></DIV><DIV id=rad0 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 1"></DIV><DIV id=rad1 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad2 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad3 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad4 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad5 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad6 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad7 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad8 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad9 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad10 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad11 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad12 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad13 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad14 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad15 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad16 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad17 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad18 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad19 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad20 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad21 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad22 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad23 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad24 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad25 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad26 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad27 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad28 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad29 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad30 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad31 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad32 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad33 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad34 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad35 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad36 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad37 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad38 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad39 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad40 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad41 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad42 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad43 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad44 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad45 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad46 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad47 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad48 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad49 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad50 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad51 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad52 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad53 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad54 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad55 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad56 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad57 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad58 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad59 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad60 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad61 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad62 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad63 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad64 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV></div></body><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->