프로그래밍/수학

프로그래밍을 위한 수학 - 삼각비, 삼각함수 그래프

Lou Park 2022. 1. 9. 14:50

삼각비

각 A의 크기가 같은 세 직각 삼각형 ABC / ADE / AFG은 모두 닮은 도형이다. 이 닮은 도형들의 대응변 길이의 값은 항상 그 비율이 같게 된다. CB / AB = ED / AD 이런식으로... 이렇게삼각형의 각 변에 대해서 두 변의 길이의 비례값을 구할 수 있는데, 이것이 sin, cos, tan이다. sin A, cos A, tan A를 모두 통틀어 각 A에 대한 삼각비라고 한다. 

 

살다보면 이것조차 까먹는다....

유치하지만 이렇게 sin, cos, tan을 외웠었지...아무튼 각 삼각비가 어느 변들의 비례를 말하는 것인지만 기억하면 된다. 특수각 30° / 45° / 60°도에대한 삼각비 값이 정리된 표를 심심찮게 볼 수 있지만 아래처럼 계산하기 편한 삼각형을 만들어서 특수각들에 대한 sin, cos, tan 값을 도출해낼 수 있다.

 

나머지 0°와 90°에대해서도 각도가 점점 0°에 수렴하거나 90°도 커지는 것을 보면 sin, cos, tan을 알 수 있다.

삼각함수와 그래프

삼각비는 예각에 대해서만 보았지만, 이 삼각비의 각을 일반각으로 확장시켜 식을 세운 것이 삼각함수다. sinθ = y/r 이니 이것을 y에 대한 식으로 정리해보면 y = sinθr 이되는데, 단위 원에서 r=1 이므로 y = sinθ가된다. θ값이 커짐에 따른 y의 값을 좌표평면위에 부드러운 곡선으로 나타낸 것이 sinθ의 그래프다. cosθ의 그래프도 같은 방법이다.

 

 

θ값이 커짐에 따른 점 P의 위치 - sin / cos

 

sin 함수와 cos 함수에서 θ를 x, 그리고 f(θ)를 y로 나타내기로 하면, 두 함수 y = sinx, y = cosx는 일정한 주기를 가지고 반복됨을 알 수 있는데, 당연히 한바퀴 돈 2π다. 반면, y = tanθ의 그래프는 다음과 같이 그려지게 되는데, 180°지점에서 다시 0이되어 tan 함수는 그 주기가 π다.

 

삼각함수를 이용해 캔버스에 물결 그리기

코드를 실행해보면 다음과 같이 물결이 그려진다.

부드러운 물결같은 선을 그리려고 할때 삼각함수를 응용할 수 있다. 전체 소스는 아래에 첨부되어있다. 위에 그린 gif 처럼 sin 그래프에서 θ값을 계속 늘려가면서 path를 그려 파동을 만들었다. 최대 y값을 낮추면 잔잔한 물결처럼 그려지게 된다. 알아보기 쉽게하기 위해 X축도 추가해두었다.

<!DOCTYPE html>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
	canvas {
		background: #eeeeee;
	}
</style>
<body>
	<canvas id="canvas" width="500" height="320"/>
</body>
<script>
	var canvas = document.getElementById('canvas');

	drawAxis(); // 축 그리기 

	drawSine(canvas.height / 2); // sine 그래프 그리기

	function drawAxis() {
		var context = canvas.getContext("2d");
		context.beginPath();

		// x Axis;
		for (var pX = 0; pX < canvas.width; pX++) {
			context.lineTo(pX, canvas.height / 2);
		}
		context.strokeStyle = "#333";
		context.stroke();
	}

	// 최대 y높이가 MAX 값을 가지는 sine 그래프 그림
	function drawSine(max) {
		var context = canvas.getContext("2d");
		context.beginPath();
		var degree = 0;

		for (var degree = 0; degree < canvas.width; degree+=5) {
			var pX = degree; // 캔버스 길이만큼 그리므로
			var pY = (canvas.height / 2) + (Math.sin(degToRad(degree)) * max);
			context.lineTo(pX, pY);
		}
		context.lineWidth = 3;
		context.strokeStyle = "#11AD55";
		context.stroke();
	}

	function degToRad(degree) {
		return Math.PI / 180 * degree
	}
</script>
</html>

 


참고자료

https://m.blog.naver.com/pss2072/220798287435

https://viewpds.jihak.co.kr/tsoldb/%EA%B5%90%EA%B3%BC%EC%84%9C%EB%B3%84/%EA%B3%A0_%EC%88%98%ED%95%99(%EC%9D%B4%EA%B0%95%EC%84%AD)/7-1/%EC%A7%80%ED%95%99_%EC%88%98%ED%95%99_%EA%B3%A0_%EC%9D%B4_7_1_%EC%82%BC%EA%B0%81%ED%95%A8%EC%88%98_%EA%B5%90%EA%B3%BC%EC%84%9C%20%EB%B3%B8%EB%AC%B8.pdf