<html>
<head>
<title>Transformations of functions</title>
    <style type="text/css">
    body {
      font-family:monospace, Geneva, Arial, sans-serif;
    }
    </style>
</head>

<body onload="Clear();">

<h2>Function transformations: <i>A&fnof;(B(x + H)) + K</i></h2>
<p>
1. Add H to x: Horizontal shift/translation left if H>0, right if H<0
<br>
2. Multiply that by B: Horizontal scaling (<1:stretch/expand/dilate, >1:shrink/compress/contract). 
<br>
Also reflection about Y-axis if B<0.
<br>
Do &fnof;.
<br>
3. Multiply by A: Vertical scaling (>1:stretch/expand/dilate, <1:shrink/compress/contract). 
<br>
Also reflection about X-axis if A<0
<br>
4. Add K: Vertical shift/translation up if K>0, down if K<0.
<p>
Shifts and reflections are <i>rigid</i> (change position and orientation). 
Scalings are <i>non-rigid</i> (change shape).

<form name="transform">
Class of base function &fnof;:
<br>
   <input type="radio" name="func_type" value="linear" />x
   &nbsp;&nbsp;&nbsp;
   <input type="radio" name="func_type" value="quadratic" checked="checked" />x<sup>2</sup>
   &nbsp;&nbsp;&nbsp;
   <input type="radio" name="func_type" value="cubic" />x<sup>3</sup>
   &nbsp;&nbsp;&nbsp;
   <input type="radio" name="func_type" value="sqrt" />&radic;x
   &nbsp;&nbsp;&nbsp;
   <input type="radio" name="func_type" value="semicircle" />&radic;(<input type="text" size="1" name="semicircleNum">-x<sup>2</sup>)
     
   &nbsp;&nbsp;&nbsp;
   <input type="radio" name="func_type" value="abs" />|x|
   &nbsp;&nbsp;&nbsp;
   <input type="radio" name="func_type" value="e" />e<sup>x</sup>
   &nbsp;&nbsp;&nbsp;
   <input type="radio" name="func_type" value="ln" />ln x
   &nbsp;&nbsp;&nbsp;
   <input type="radio" name="func_type" value="sin" />sin x
   &nbsp;&nbsp;&nbsp;
   <input type="radio" name="func_type" value="cos" />cos x
<p>
A<input type="text" size="1" name="A">
&nbsp;&nbsp;&nbsp;
B<input type="text" size="1" name="B">
&nbsp;&nbsp;&nbsp;
H<input type="text" size="1" name="H">
&nbsp;&nbsp;&nbsp;
K<input type="text" size="1" name="K">
&nbsp;&nbsp;&nbsp;

<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.transform.A.value = "1";
  document.transform.B.value = "1";
  document.transform.H.value = "0";
  document.transform.K.value = "0";
  document.transform.semicircleNum.value = "1";
 

  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);

  Clear();   //wipe the graphs

  var A = parseFloat(document.transform.A.value);
  var B = parseFloat(document.transform.B.value);
  var H = parseFloat(document.transform.H.value);
  var K = parseFloat(document.transform.K.value);
  var semicircleNum = parseFloat(document.transform.semicircleNum.value);
  plotData(A,B,H,K,semicircleNum);

//  calculate();   
}


function calculate() {
  var A = parseFloat(document.transform.A.value);
  var B = parseFloat(document.transform.B.value);
  var H = parseFloat(document.transform.H.value);
  var K = parseFloat(document.transform.K.value);
  var semicircleNum = parseFloat(document.transform.semicircleNum.value);

  plotData(A,B,H,K,semicircleNum);

}

function plotData(A,B,H,K,semicircleNum) {

var can = document.getElementById("plotCanvas");
var ctx = can.getContext("2d");

var w=can.width;
var h=can.height;

ctx.beginPath();
ctx.lineWidth=2;

ctx.moveTo(1,h/2);
var x, xInside;
var y=0;
var negSqrt, firstPoint=true;  // sqrtX stuff
var negLn;  //ln   uses firstPoint too
var negSemicircle;

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(100," + Math.round(Math.random()*90) + 
      "," + Math.round(Math.random()*90) + ")";
 else if (Math.random() < .5)
    ctx.strokeStyle = "rgb(" + Math.round(Math.random()*90) + 
      ",100," + Math.round(Math.random()*90) + ")";
 else
    ctx.strokeStyle = "rgb(" + Math.round(Math.random()*90) + 
      "," + Math.round(Math.random()*90) + ",100)";
  
//2 of 3 are 255, other less than 90:
/*
 if (Math.random() < .3333)
    ctx.strokeStyle = "rgb(255,255," + Math.round(Math.random()*90) + ")";
 else if (Math.random() < .5)
    ctx.strokeStyle = "rgb(" + Math.round(Math.random()*90) + ",255,255)";
 else
    ctx.strokeStyle = "rgb(255," + Math.round(Math.random()*90) + ",255)";
*/
//alert(""+ctx.strokeStyle);


for (x=xMin; x<=xMax; x+=xd) {
  xInside = x;

  xInside += H;   //add H to x. Horizontal shift left if H>0, right if H<0
  xInside *= B;   //divide that by B. Horizontal scaling. Also reflection about Y-axis if B<0.
  //Now do f:
  if (document.transform.func_type.value == "linear") 
    y = xInside;  //do nothing
  else if (document.transform.func_type.value == "quadratic") 
    y = xInside*xInside;
  else if (document.transform.func_type.value == "cubic") 
    y = xInside*xInside*xInside;
  else if (document.transform.func_type.value == "abs") 
    y = Math.abs(xInside);
  else if (document.transform.func_type.value == "e") 
    y = Math.exp(xInside);
  else if (document.transform.func_type.value == "sin") 
    y = Math.sin(xInside);
  else if (document.transform.func_type.value == "cos") 
    y = Math.cos(xInside);
  else if (document.transform.func_type.value == "sqrt") {
    negSqrt = true;
    if (xInside >= 0) {
      y = Math.sqrt(xInside);
      negSqrt = false;
      if (firstPoint) {  //move away from left border to first x that is sqrt-able
        ctx.moveTo(x * xscale + w/2, -(y*A+K) * yscale + h/2);
        firstPoint = false;
      }
    }
  }
  else if (document.transform.func_type.value == "ln") {
    negLn = true;
    if (xInside >= 0) {
      y = Math.log(xInside);   // log is ln
      negLn = false;
      if (firstPoint) {  //move away from left border to first x that is ln-able
        ctx.moveTo(x * xscale + w/2, -(y*A+K) * yscale + h/2);
        firstPoint = false;
      }
    }
  }
  else if (document.transform.func_type.value == "semicircle") {
    negSemicircle = true;
    if (semicircleNum - xInside*xInside >= 0) {
      y = Math.sqrt(semicircleNum - xInside*xInside);   
      negSemicircle = false;
      if (firstPoint) {  //move away from left border to first x that is sqrt-able
        ctx.moveTo(x * xscale + w/2, -(y*A+K) * yscale + h/2);
        firstPoint = false;
      }
    }
  }

  y *= A;   //multiply by A. Vertical scaling. Also reflection about X-axis if A<0
  y += K;   //add K. Vertical shift up if K>0, down if K<0.

  xS = x * xscale + w/2;
  yS = -y * yscale + h/2;
  if (!negSqrt && !negLn && !negSemicircle)   //don't do if sqrt or ln not defined here
    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>