인터렉티브한 작업을 위한 기본 수학1 - (sin, cos, radian)

 최근 three.js나 canvas, d3.js 등에 관심이 생겨 공부하다 보니, 기본적인 수학 개념들을 알아야 했다.

문과지만 수학을 싫어하지 않았기 때문에 "근방(?) 할 수 있겠지?" 하는 마음으로 한번 도전해 본다.

 

아래 글은 Javascript의 Math API를 기준으로 작성하였다.

---

Math.sin(radians: number): number 

https://www.mathsisfun.com/algebra/trig-sin-cos-tan-graphs.html

 이 함수는 숫자의 sin 값인 -1과 1 사이의 수를 반환한다. 여기서 말하는 숫자는 우리가 일반적으로 사용하는 각도가 아닌 라디안(radian or rad) 값인 것을 유의하자(각도를 구하고 싶다면 (radian * PI / 180) ). 라디안이란, 반지름과 호의 길이가 같을 때의 중심각의 크기를 말한다.

 

cf) 라디안(radian)

수학에서 각도에 대한 일반적인 측정은 라디안이다. 원의 원주는 2*PI이므로, 360도는 2*PI 라디안과 같다.

1도 = PI / 180 라디안
1 라디안 = 180 / PI 도

https://1ucasvb.tumblr.com/

 사인 그래프의 경우 0에서 시작하여 (PI / 2) 라디안(90도)에 의해 1까지 올라갔다가 -1까지 내려가는 모양을 보인다.

https://en.wikipedia.org/wiki/File:Sine_curve_drawing_animation.gif

 참고로 코사인 그래프의 경우 사인그래프와 거의 유사하지만, 1에서 시작하여 PI 라디안(180도)까지 아래로 향한 다음 다시 위로 향한다.

https://commons.wikimedia.org/wiki/File:Circle_cos_sin.gif

언제 사인 함수를 사용하는 것일까?

자연스러운 흔들림, 부드러운 곡선 등을 만들때 사인 함수를 많이 사용한다. 

https://en.wikipedia.org/wiki/File:Simple_harmonic_motion_animation.gif

즉 어떤 점을 사인 함수를 통해 위, 아래로 이동시키며 자연스러운 곡선을 만들게 된다.

export class Point {
  x;
  y;
  fixedY;
  speed = 0.1;
  cur = 0;

  // 얼마나 움직일 것인가에 대한 프로퍼티
  max = Math.random() * 100 + 150;

  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
    this.fixedY = y;
  }

  update() {
    this.cur += this.speed;
    
    // 이런식으로 활용됨
    this.y = this.fixedY + Math.sin(this.cur) * this.max;
  }
}

 

실사용 예제)

아래 예제는 김종민님의 캔버스 튜토리얼을 React와 Typescript을 이용해서 수정한 것이다. 정말 존경하고 많이 배우고 있는 중이다.

 

css-collection-git-main-jungkyuhyun.vercel.app/?path=/story/canvas-study-wavy--basic-css

Storybook

css-collection-git-main-jungkyuhyun.vercel.app/?path=/story/canvas-study-rotatingpolygon--basic-css

Storybook