<html>
<head>
<title>trig functions app</title>
    <style type="text/css">
    body {
      font-family:monospace, Geneva, Arial, sans-serif;
    }
    </style>
</head>

<body onload="Clear();">

<h2>d+a<i style="color:red;">sin</i>(bx-c)   d+a<i style="color:green;">cos</i>(bx-c)   d+a<i style="color:blue;">tan</i>(bx-c)</h2>
<!--
<img src="sinaBlabel.png">
&nbsp;&nbsp;&nbsp;
<img src="cosaBlabel.png">
&nbsp;&nbsp;&nbsp;
<img src="tanaBlabel.png">
-->

<form name="trigform">
<!--
<ul style="list-style:none;">
<li  style="background-color:red;"><input type="radio" name="func" value="sin" checked="checked" > sin
<li  style="background-color:green;"><input type="radio" name="func" value="cos" checked="checked" > cos
<li  style="background-color:blue;"><input type="radio" name="func" value="tan" checked="checked"> tan
</ul>
-->

<table>
<tr>
<td><span style="background-color:lightcoral;"><input type="radio" name="func" value="sin" checked="checked">sin</span>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td><span style="background-color:gold;"><input type="radio" name="func" value="csc">csc</span>
<tr>
<td><span style="background-color:lightgreen;"><input type="radio" name="func" value="cos">cos</span>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td><span style="background-color:cyan;"><input type="radio" name="func" value="sec">sec</span>
<tr>
<td><span style="background-color:lightblue;"><input type="radio" name="func" value="tan">tan</span>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td><span style="background-color:mediumorchid;"><input type="radio" name="func" value="cot">cot</span>
</table>

<br>
<b>a</b>:
  <input type="text" size="1" name="a"> amplitude |a|
<br>
<b>b</b>:
  <input type="text" size="1" name="b"> period 2&pi;/b
<br>
<b>c</b>:
  <input type="text" size="1" name="c"> phase shift c/b (horizontal translation)
<br>
<b>d</b>:
  <input type="text" size="1" name="d"> vertical translation
<br>

<input type="button"  value="Graph it" onclick="calculate()">
&nbsp;&nbsp;&nbsp;
<input type="button"  value="Clear the graphs" onclick="Clear()">

</form>

<p>
<canvas id="plotCanvas" width="1000" height="600" style="border:1px solid">
</canvas>

<p>
<a href="/Functions/trig.html">More trig graphs</a>

<!--
<img src="plusMinusIcon.png" id="plusMinusIcon">
<img src="plusMinusIconPlussed.png" id="plusMinusIconPlussed">
<img src="plusMinusIconMinussed.png" id="plusMinusIconMinussed">
-->

<script language="JavaScript">

var zoomScale = 1;  //global variable

  var can=document.getElementById("plotCanvas");
  var ctx=can.getContext("2d");
  ctx.clearRect(0,0,can.width,can.height);
 
//   var img1=document.getElementById("plusMinusIcon");
  // var img2=document.getElementById("plusMinusIconPlussed");
  // var img3=document.getElementById("plusMinusIconMinussed");
  var img1 = new Image();
  img1.src = 'plusMinusIcon.png';
  var img2 = new Image();
  img2.src = 'plusMinusIconPlussed.png';
  var img3 = new Image();
  img3.src = 'plusMinusIconMinussed.png';

//window coords, not canvas'!
can.addEventListener("mousemove", function(e){
  //this paragraph gets the coords inside the canvas
    var rect = can.getBoundingClientRect();
    var x = e.clientX - rect.left;
    var y = e.clientY - rect.top;
 //   console.log("MOVE x: " + x + " y: " + y);

  if ((x>=1)&(x<=36)&(y>=1)&(y<=35))
    ctx.drawImage(img2,1,1);
  else if ((x>=1)&(x<=36)&(y>=36)&(y<=70))
    ctx.drawImage(img3,1,1);
  else
    ctx.drawImage(img1,1,1);

}, false);

can.addEventListener("mousedown", function(e){    //mouseclick doesn't work
    var rect = can.getBoundingClientRect();
    var x = e.clientX - rect.left;
    var y = e.clientY - rect.top;
 //   console.log("CLICK x: " + x + " y: " + y);

  if ((x>=1)&(x<=36)&(y>=1)&(y<=35))
    changeScale("zoomIn");
  else if ((x>=1)&(x<=36)&(y>=36)&(y<=70))
    changeScale("zoomOut");
}, false);



function Clear()
{
  document.trigform.a.value = "1";
  document.trigform.b.value = "1";
  document.trigform.c.value = "0";
  document.trigform.d.value = "0";

  ctx.clearRect(0,0,can.width,can.height);
  ctx.drawImage(img1,1,1);

var w=can.width;
var h=can.height;

ctx.lineWidth=1;

ctx.beginPath();
ctx.moveTo(1,h/2);
ctx.lineTo(w,h/2);
ctx.moveTo(w/2,1);
ctx.lineTo(w/2,h);
ctx.strokeStyle = "Black";
ctx.stroke();

var xscale = w / (4*Math.PI * zoomScale);
var yscale = h / (4*Math.PI * zoomScale);

  ctx.font = "15px Geneva";
  ctx.fillStyle = "black";
  ctx.fillText("π", Math.PI * xscale + w/2 -5, h/2+15);
  ctx.fillText("2π", 2*Math.PI * xscale + w/2 -15, h/2+15);
  ctx.fillText("-π", -Math.PI * xscale + w/2, h/2+15);
  ctx.fillText("-2π", -2*Math.PI * xscale + w/2, h/2+15);
  ctx.fillText("1", 0 * xscale + w/2 -15, -1 * yscale + h/2);
  ctx.fillText("2", 0 * xscale + w/2 -15, -2 * yscale + h/2);
  ctx.fillText("3", 0 * xscale + w/2 -15, -3 * yscale + h/2);
  ctx.fillText("-1", 0 * xscale + w/2 -15, 1 * yscale + h/2);
  ctx.fillText("-2", 0 * xscale + w/2 -15, 2 * yscale + h/2);
  ctx.fillText("-3", 0 * xscale + w/2 -15, 3 * yscale + h/2);
//  ctx.fillText(""+roundDecimal(x,4),w/2+xS,h/2+25);
ctx.lineWidth=2;
ctx.beginPath();
ctx.moveTo(2*Math.PI * xscale + w/2,h/2+2);
ctx.lineTo(2*Math.PI * xscale + w/2,h/2-2); 
ctx.moveTo(Math.PI * xscale + w/2,h/2+2);
ctx.lineTo(Math.PI * xscale + w/2,h/2-2); 
ctx.moveTo(-Math.PI * xscale + w/2,h/2+2);
ctx.lineTo(-Math.PI * xscale + w/2,h/2-2);
ctx.moveTo(-2*Math.PI * xscale + w/2,h/2+2);
ctx.lineTo(-2*Math.PI * xscale + w/2,h/2-2);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(0 * xscale + w/2 -2, -1 * yscale + h/2);
ctx.lineTo(0 * xscale + w/2 +2, -1 * yscale + h/2);
ctx.moveTo(0 * xscale + w/2 -2, -2 * yscale + h/2);
ctx.lineTo(0 * xscale + w/2 +2, -2 * yscale + h/2);
ctx.moveTo(0 * xscale + w/2 -2, -3 * yscale + h/2);
ctx.lineTo(0 * xscale + w/2 +2, -3 * yscale + h/2);
ctx.moveTo(0 * xscale + w/2 -2, 1 * yscale + h/2);
ctx.lineTo(0 * xscale + w/2 +2, 1 * yscale + h/2);
ctx.moveTo(0 * xscale + w/2 -2, 2 * yscale + h/2);
ctx.lineTo(0 * xscale + w/2 +2, 2 * yscale + h/2);
ctx.moveTo(0 * xscale + w/2 -2, 3 * yscale + h/2);
ctx.lineTo(0 * xscale + w/2 +2, 3 * yscale + h/2);
ctx.stroke();

}


function changeScale(dir) {
  if (dir=="zoomIn") {
    zoomScale = zoomScale/2;
  }
  else {
    zoomScale = zoomScale*2;
  }
//alert("dir="+dir);	
  Clear();
  calculate();
}


function calculate() {

  var a = parseFloat(document.trigform.a.value);
  var b = parseFloat(document.trigform.b.value);
  var c = parseFloat(document.trigform.c.value);
  var d = parseFloat(document.trigform.d.value);
  var func = document.trigform.func.value;

  plotData(a,b,c,d,func);

/*
    //document.circleform.chord.value = "";   //blank out previous   Doesn't clear it??
    //document.circleform.segment.value = "";
    document.circleform.chord.value = "                     ";  
    document.circleform.segment.value = "                     ";
  }
*/

}

function plotData(a, b, c, d, func) {

var can = document.getElementById("plotCanvas");
var ctx = can.getContext("2d");

var w=can.width;
var h=can.height;

ctx.beginPath();
ctx.lineWidth=2;
  if (func == "sin")  
    ctx.strokeStyle = "rgb(255," + Math.round(Math.random()*128) + 
      "," + Math.round(Math.random()*128) + ")";
  else if (func == "cos")  
    ctx.strokeStyle = "rgb(" + Math.round(Math.random()*128) + 
      ",255," + Math.round(Math.random()*128) + ")";
  else  if (func == "tan")  
    ctx.strokeStyle = "rgb(" + Math.round(Math.random()*128) + 
      "," + Math.round(Math.random()*128) + ",255)";
  else  if (func == "csc")
    ctx.strokeStyle = "gold";
  else  if (func == "sec")
    ctx.strokeStyle = "cyan";
  else  if (func == "cot")
    ctx.strokeStyle = "mediumorchid";

ctx.moveTo(1,h/2);
var x;
var y=0;
var xMin=-2*Math.PI * zoomScale;
var xMax=2*Math.PI * zoomScale;
var xscale = w / (xMax-xMin);
var yscale = h / (xMax-xMin);
//var xscale = w / (4*Math.PI);
//var yscale = h / (4*Math.PI);
var xd = (xMax-xMin) / w;
for (x=xMin; x<=xMax; x+=xd) {
  if (func == "sin")  
    y = a * Math.sin(b*x-c) +d;
  else if (func == "cos")  {
    y = a * Math.cos(b*x-c) +d;
    //if (Math.abs(x) <.05)      //??  somehow taking as string... use parsefloat!
     //console.log("x="+x+"  cos(x)="+Math.cos(x)+"  y="+y);
  }
  else if (func == "tan") {
    yPrev = y;
    y = a * Math.tan(b*x-c) +d;
    if (y>0 && yPrev<0   || y<0 && yPrev>0)    //near/at vertical asymptote
      //skip this lineTo ??? by moving to this across the Y axis point
      ctx.moveTo( x * xscale + w/2, -y * yscale + h/2);
  }
  else if (func == "csc") {  
    yPrev = y;
    y = a * 1/Math.sin(b*x-c) +d;
    if (y>0 && yPrev<0   || y<0 && yPrev>0)    //near/at vertical asymptote
      //skip this lineTo ??? by moving to this across the Y axis point
      ctx.moveTo( x * xscale + w/2, -y * yscale + h/2);
  }
  else if (func == "sec") {
    yPrev = y;
    y = a * 1/Math.cos(b*x-c) +d;
    if (y>0 && yPrev<0   || y<0 && yPrev>0)    //near/at vertical asymptote
      //skip this lineTo ??? by moving to this across the Y axis point
      ctx.moveTo( x * xscale + w/2, -y * yscale + h/2);
  }
  else if (func == "cot") {
    yPrev = y;
    y = a * 1/Math.tan(b*x-c) +d;
    if (y>0 && yPrev<0   || y<0 && yPrev>0)    //near/at vertical asymptote
      //skip this lineTo ??? by moving to this across the Y axis point
      ctx.moveTo( x * xscale + w/2, -y * yscale + h/2);
  }

  xS = x * xscale + w/2;
  yS = -y * yscale + h/2;
  ctx.lineTo(xS,yS);
}
ctx.stroke();
  
}

function roundDecimal(number, precision) {
    var factor = Math.pow(10, precision);
    var tempNumber = number * factor;
    var roundedTempNumber = Math.round(tempNumber);
    return roundedTempNumber / factor;
}
	
</script>


</body>
</html>