Matrix Concept
HTML5에서 사용되는 행렬(Matrix)의 기본 개념
테스트 환경: HTML5, Eclipse, Google Chrome, Javascript
행렬은 행과 열을 구성하여 모인 수들의 집합이며 이렇게 구성된 행렬과 다른 행렬 혹은 벡터와의 연산을 통해서 특수한 결과를 산출하기 위해 고안된 수들의 모임이다.
행렬의 사용 목적에 따라 회전행렬, 이동행렬 등으로 부를 수 있고 행렬을 이용하여 약속된 형식에 맞게 연산을 할 때 그 산출된 결과는 회전한 후의 새 좌표(점)을 의미하는 등의 효과를 볼 수가 있다.
다음은 회전행렬과 한점(벡터)의 곱셈을 코드로 표현한 내용이다.
한점(5, 0)을 90도 회전하여 새 점좌표를 구하려면 회전행렬에 그 점좌표(벡터)를 곱해주면 된다. 행렬의 곱셈법칙(약속)에 따라서 제대로 곱셈을 한다면 그 결과를 회전한 후의 새 좌표를 얻게 된다.
<!--
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>행렬의 기본개념과 행렬과 벡터(점)의 곱셈</title>
<script type="text/javascript">
function Point(x, y) {
this.x = x;
this.y = y;
}
window.onload = function() {
var theta = 90*Math.PI/180;
var cos = Math.cos(theta);
var sin = Math.sin(theta);
var pt = new Point(5,0); // 원래의 점
// 회전행렬과 점의 곱셈
var x = cos*pt.x + -sin*pt.y;
var y = sin*pt.x + cos*pt.y;
var pt2 = new Point(x,y); // 원래의 점이 회전한 결과 새 좌표
console.log("x'="+pt2.x+", y'="+pt2.y);
}
</script>
</head>
<body>
</body>
</html>
회전행렬을 이용하여 사각형을 회전하는 예
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>행렬의 기본개념과 행렬과 벡터(점)의 곱셈</title>
<script type="text/javascript">
var canvas = null;
var ctx = null;
var theta = 45*Math.PI/180;
var cos = Math.cos(theta);
var sin = Math.sin(theta);
function Point(x, y) {
this.x = x;
this.y = y;
}
var ptArr = [ new Point(0,0), new Point(100,0), new Point(100,100), new Point(0,100) ];
window.onload = function() {
canvas = document.getElementById('MyCanvas');
ctx =canvas.getContext('2d');
rectByLine(ptArr);
rotatePoints(ptArr);
rectByLine(ptArr);
}
function rectByLine(ptArr) {
ctx.beginPath();
ctx.strokeStyle = "black";
/* 색상을 동적으로 생성함 */
var r = Math.round(Math.random()*1000%256);
var g = Math.round(Math.random()*1000%256);
var b = Math.round(Math.random()*1000%256);
ctx.fillStyle = "rgba("+r+","+g+","+b+",0.3)";
ctx.moveTo(ptArr[0].x, ptArr[0].y);
ctx.lineTo(ptArr[1].x, ptArr[1].y);
ctx.lineTo(ptArr[2].x, ptArr[2].y);
ctx.lineTo(ptArr[3].x, ptArr[3].y);
ctx.lineTo(ptArr[0].x, ptArr[0].y);
ctx.fill();
ctx.stroke();
}
function rotatePoints(ptArr) {
for(var i=0;i<ptArr.length;i++) {
var x = cos*ptArr[i].x + -sin*ptArr[i].y;
var y = sin*ptArr[i].x + cos*ptArr[i].y;
ptArr[i].x = x;
ptArr[i].y = y;
}
}
</script>
</head>
<body>
<canvas id="MyCanvas" width="400" height="300" style="border:1px dotted black;">
HTML5 Canvas를 지원하지 않는 브라우저입니다.
</canvas>
</body>
</html>