//Draw Math Graphs //Created by Shashi Ranjan window.onload=()=>{ alert("Please wait for few sec after submitting in order to load the graph."); var canvas=document.querySelector("#canvas") var ctx= canvas.getContext("2d"); var h= window.innerHeight; var w= window.innerWidth; var pxr= window.devicePixelRatio; var hp= h*pxr; var wp= w*pxr; //console.log(hp+", "+wp) canvas.style.height=w-50; canvas.style.width=w; canvas.height=wp-20; canvas.width=wp-20; var drawAxes=()=>{ ctx.beginPath(); ctx.strokeStyle="lightgreen"; ctx.lineWidth=3; ctx.moveTo(wp/2-10,0); ctx.lineTo(wp/2-10,wp); ctx.moveTo(0,wp/2-10); ctx.lineTo(wp,wp/2-10); ctx.stroke(); ctx.closePath(); } var horLines=()=>{ for(var i=0;i<=wp;i+=10){ ctx.lineWidth =1; ctx.beginPath(); ctx.strokeStyle="lightgreen"; if(i%50==0){ ctx.lineWidth =2; } ctx.moveTo(0,i); ctx.lineTo(wp,i); ctx.stroke(); ctx.closePath(); } } var verLines=()=>{ for(var i=0;i<=wp;i+=10){ ctx.beginPath(); ctx.lineWidth =1; ctx.strokeStyle="lightgreen"; if(i%50==0){ ctx.lineWidth=2; } ctx.moveTo(i,0); ctx.lineTo(i,wp); ctx.stroke(); ctx.closePath(); } } var verDots=()=>{ for(var i=0;i<=wp;i+=10){ if(i%50==0){ ctx.beginPath(); ctx.lineWidth =2; ctx.strokeStyle="black"; ctx.moveTo(wp/2-10-5,i); ctx.lineTo(wp/2-10+5,i); ctx.stroke(); ctx.closePath(); } } } var horDots=()=>{ for(var i=0;i<=wp;i+=10){ if(i%50==0){ ctx.beginPath(); ctx.lineWidth =2; ctx.strokeStyle="black"; ctx.moveTo(i,wp/2-10-5); ctx.lineTo(i,wp/2-10+5); ctx.stroke(); ctx.closePath(); } } } drawAxes(); horLines(); verLines(); horDots(); verDots(); var origin={ x:wp/2-10, y:wp/2-10 }; var checkCord=(X,Y)=>{ var coords={ x:origin.x+X*10, y:origin.y-Y*10 }; drawPoint(coords.x,coords.y); } var drawPoint=(x,y)=>{ ctx.beginPath(); ctx.fillStyle='red'; ctx.arc(x,y,1,0,2*Math.PI); ctx.fill(); ctx.closePath(); } "+++++++++++++++++++++++++++++++++++++" var equs=[ "f(y)= Sin(x)", "f(y)= Cos(x)", "f(y)= Tan(x)", "f(y)= e^x", "f(y)= 8x²", "f(y)= 3x⁴+4x³-2x²+5x", "f(y)= sin(x)cos(150x)", "f(y)= (sin²(x/2))/cos²(500x)", "f(y)= sin(cos(tan(x²)))", "f(y)= sin(2sin(2sin(2sin(x))))", "f(y)= cos(x)+cos(2x)", "x= sin(2x),y= sin(3x)", "r= 3+8sin(3ϑ)", "r= 7+sin(2πϑ)", "r= ϑsin(ϑ)", "r= ϑ+2sin(2πϑ)", "r= a(1+cosϑ)", "r= cos(0.95ϑ)" , ]; var n; var clicked=false; var submit=document.querySelector("#button"); submit.addEventListener("click",()=>{ clear(); drawGraph(); }); var select=document.querySelector("#select"); var sortList=document.createElement("div"); sortList.setAttribute("id","sortList"); select.addEventListener("click",()=>{ if(!clicked){ sortList.style.height="80%"; clicked =!clicked; } else{ sortList.style.height="0"; clicked =!clicked; } }); select.appendChild(sortList ); var ul=document.createElement("ul"); ul.setAttribute("id","listUL"); sortList.appendChild(ul); var equ=document.querySelector("#equ"); for(var i=0;i{ for(var i=35;i>=-35;i-=0.002){ switch(n){ case 0: var y=Math.sin(i)*5; var x=i*5; break ; case 1: var y=Math.cos(i)*5; var x=i*5; break ; case 2: var y=Math.tan(i)*5; var x=i*5; break ; case 3: var y=Math.pow(Math.E,i); var x=i*5; break ; case 4: var y=8*i*i; var x=i*5; break ; case 5: var y=3*i*i*i*i+4*i*i*i-2*i*i+5*i; var x=i*5; break ; case 6: var y=Math.sin(i)*Math.cos(150*i)*5; var x=i*5; break ; case 7: var y= Math.pow(Math.sin(i/2),2)/Math.pow(Math.cos(500*i),2)*3; var x=i*3; break ; case 8: var y=Math.sin(Math.cos(Math.tan(Math.pow(i,2))))*5; x=i*5; break ; case 9: var y= Math.sin(2*Math.sin(2*Math.sin(2*Math.sin(i))))*5; var x=i*5; break ; case 10: var y=Math.cos(i)+Math.cos(2*i); var x=i; break ; case 11: var x=Math.sin(2*i)*10; var y=Math.sin(3*i)*10; break ; case 12: var r= 3+8*Math.sin(i*31); var x=r*Math.sin(i*10)*3; var y=r*Math.cos(i*10)*3; break ; case 13: var r=7+Math.sin(2*Math.PI*i); var x=r*Math.sin(i)*3; var y=r*Math.cos(i)*3; break ; case 14: var r= i*Math.sin(i); var x=r*Math.sin(i*5); var y=r*Math.cos(i*3); break ; case 15: var r=i+2*Math.sin(2*Math.PI*i); var x=r*Math.sin(i); var y=r*Math.cos(i); break ; case 16: var r= 5*(1-Math.cos(i*3)); var x=r*Math.sin(i*3)*3; var y=r*Math.cos(i*3)*3; break; case 17: var r=Math.cos(0.95*i*2); var x=r*Math.sin(i*5)*30; var y=r*Math.cos(i*5)*30; break ; } checkCord(x,y); } } var clear=()=>{ ctx.beginPath(); ctx.fillStyle ="white"; ctx.fillRect(0,0,canvas.height,canvas.width); ctx.closePath(); drawAxes(); horLines(); verLines(); horDots(); verDots(); } //The End //By Shashi Ranjan }