<html>
<head>
<title>Conic sections app</title>
    <style type="text/css">
    body {
      font-family:monospace, Geneva, Arial, sans-serif;
    }
    </style>
</head>

<body onload="Clear();">

<h2>Conic sections app / General quadratic</h2>
<h3>Ax<sup>2</sup>+Bxy+Cy<sup>2</sup>+Dx+Ey+F=0</h3>
<form name="conicsform">
<br>

A:<input type="text" size="1" name="A">
&nbsp;
B:<input type="text" size="1" name="B">
&nbsp;
C:<input type="text" size="1" name="C">
&nbsp;
D:<input type="text" size="1" name="D">
&nbsp;
E:<input type="text" size="1" name="E">
&nbsp;
F:<input type="text" size="1" name="F">


<p>
<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>


<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.conicsform.A.value = "0";
  document.conicsform.B.value = "0";
  document.conicsform.C.value = "0";
  document.conicsform.D.value = "0";
  document.conicsform.E.value = "0";
  document.conicsform.F.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 = xscale;      //h / (4*Math.PI * zoomScale);

  ctx.font = "15px Geneva";
  ctx.fillStyle = "black";
  ctx.fillText("1", 1 * xscale + w/2 -5, h/2+15);
  ctx.fillText("2", 2 * xscale + w/2 -5, h/2+15);
  ctx.fillText("3", 3 * xscale + w/2 -5, h/2+15);
  ctx.fillText("-1", -1 * xscale + w/2, h/2+15);
  ctx.fillText("-2", -2 * xscale + w/2, h/2+15);
  ctx.fillText("-3", -3 * 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(3 * xscale + w/2,h/2+2);
ctx.lineTo(3 * xscale + w/2,h/2-2); 
ctx.moveTo(2 * xscale + w/2,h/2+2);
ctx.lineTo(2 * xscale + w/2,h/2-2); 
ctx.moveTo(1 * xscale + w/2,h/2+2);
ctx.lineTo(1 * xscale + w/2,h/2-2); 
ctx.moveTo(-1 * xscale + w/2,h/2+2);
ctx.lineTo(-1 * xscale + w/2,h/2-2);
ctx.moveTo(-2 * xscale + w/2,h/2+2);
ctx.lineTo(-2 * xscale + w/2,h/2-2);
ctx.moveTo(-3 * xscale + w/2,h/2+2);
ctx.lineTo(-3 * 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);

  var A=[];    //save any current conic
   A[0] = parseFloat(document.conicsform.A.value);
   A[1] = parseFloat(document.conicsform.B.value);
   A[2] = parseFloat(document.conicsform.C.value);
   A[3] = parseFloat(document.conicsform.D.value);
   A[4] = parseFloat(document.conicsform.E.value);
   A[5] = parseFloat(document.conicsform.F.value);
	
  Clear();   //wipe the graphs
  //put the conic back :(
  document.conicsform.A.value = A[0];
  document.conicsform.B.value = A[1];
  document.conicsform.C.value = A[2];
  document.conicsform.D.value = A[3];
  document.conicsform.E.value = A[4];
  document.conicsform.F.value = A[5];
  plotData(A);
//  calculate();   
}


function calculate() {
  var A=[];
   A[0] = parseFloat(document.conicsform.A.value);
   A[1] = parseFloat(document.conicsform.B.value);
   A[2] = parseFloat(document.conicsform.C.value);
   A[3] = parseFloat(document.conicsform.D.value);
   A[4] = parseFloat(document.conicsform.E.value);
   A[5] = parseFloat(document.conicsform.F.value);

  plotData(A);

}

function plotData(A) {

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)";
*/

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 = xscale;       //h / (xMax-xMin);
//var xscale = w / (4*Math.PI);
//var yscale = h / (4*Math.PI);
var xd = (xMax-xMin) / w;
var t;
 if (Math.random() < .3333)
    ctx.strokeStyle = "rgb(255," + Math.round(Math.random()*255) + 
      "," + Math.round(Math.random()*255) + ")";
 else if (Math.random() < .5)
    ctx.strokeStyle = "rgb(" + Math.round(Math.random()*255) + 
      ",255," + Math.round(Math.random()*255) + ")";
 else
    ctx.strokeStyle = "rgb(" + Math.round(Math.random()*255) + 
      "," + Math.round(Math.random()*255) + ",255)";
for (x=xMin; x<=xMax; x+=xd) {
  y = 0;
  for (t=9; t>=0; t--) 
    if (A[t] != 0)
      y += A[t]*Math.pow(x,t);

  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>