Visualize matrix operations

by holoopooj

HTML

<body>
<table>
<tr><td><input id="m1" value="2"/></td><td><input id="m2" value="0"/></td></tr>
<tr><td><input id="m3" value="0"/></td><td><input id="m4" value="2"/></td></tr>
</table>
<div>
<canvas id="myCanvas"></canvas>
</div>
</body>

CSS

div {
/*     width:300px;
    height:300px; */
    position:relative;
    background:white;
}

JavaScript

var canvas = document.querySelector('canvas');
var ctx=canvas.getContext("2d");
fitToContainer(canvas);

function fitToContainer(canvas){
  // Make it visually fill the positioned parent
  canvas.style.width ='100%';
  canvas.style.height='100%';
  // ...then set the internal size to match
  //canvas.width  = canvas.offsetWidth;
  //canvas.height = canvas.offsetHeight;
   canvas.width  = 1000;
  canvas.height = 1000;
}

function lineFromTo(color, x1, y1, x2, y2) {
	ctx.beginPath();
  ctx.moveTo(x1,y1);
  ctx.strokeStyle=color;
  ctx.lineTo(x2,y2);
  ctx.stroke();
}

function printMousePos() {
//  document.body.textContent =
//    "clientX: " + event.clientX +
//    " - clientY: " + event.clientY;
	var canvasRect = canvas.getBoundingClientRect();
  var top = canvasRect.top;
  var left = canvasRect.left;
  var right = left + canvas.offsetWidth;
  var bottom = top + canvas.offsetHeight;
	ctx.clearRect(0, 0, 1000, 1000);
  ctx.strokeStyle="black";
  crossCenteredAt(200, 500);
  crossCenteredAt(800, 500);
	var originX = 200;
  var originY = 500;
  x=1000*(cursorX-left)/(right-left);
  y=1000*(cursorY-top)/(bottom-top);
  lineFromTo("red", originX, originY, x, y);
  
  vecX = x - originX;
  vecY = -(y - originY);
  
  
  matrix = [[ document.getElementById("m1").value, document.getElementById("m2").value],
            [ document.getElementById("m3").value, document.getElementById("m4").value]];
  var newX = vecX * matrix[0][0] + vecY * matrix[0][1];
  var newY = vecX * matrix[1][0] + vecY * matrix[1][1];
  var col1 = [vecX * matrix[0][0], vecX * matrix[1][0]];
  var col2 = [vecY * matrix[0][1], vecY * matrix[1][1]];
  lineFromTo("blue", 800, 500, 800+newX, 500-newY);
  lineFromTo("green", 800, 500, 800+col1[0], 500-col1[1]);
  lineFromTo("magenta", 800, 500, 800+col2[0], 500-col2[1]);
}

function crossCenteredAt(x,y) {
	ctx.beginPath();
  ctx.setLineDash([5,5]);
  ctx.moveTo(x-200,y);
  ctx.lineTo(x+200,y);
  ctx.stroke();

  ctx.beginPath();
  ctx.setLineDash([5,5]);
...