애니메이션과 삼각함수

캔버스에서의 시간

frameCount

캔버스를 재생한 순간부터 지금까지 그린 프레임의 갯수
마치 시간처럼 무한정 늘어나는 값
그래서 시간, second(초) 대신 쓸 수 있는 값
응용: frameCount 에 정수를 곱하면? 소수를 곱하면?

frameRate

frame per second
1초에 몇 프레임이 그려지는 지
frameRate 값이 0에 가까우면 컴퓨터가 버벅거리고 40이상이면 준수함.

삼각함수가 재미있어지는 마법

sin, cos, tan 함수의 모양을 유심히 보자.
유사한 점과 다른 점은 무엇일까?

sin cos 함수들은 결과(y)값이 -1 ~ +1 사이로 한정되어 있다.
반면, tan 함수는 음수 무한대 ~ 0 ~ 양수 무한대로 뻗어나간다.
삼각함수를 사용한 애니메이션 역시 이 함수들의 그래프 모양처럼 진행된다고 상상하면 된다.

삼각함수와 애니메이션

Math.cos, Math.sin, Math.tan
p5js 문법: sin(), cos(), tan()
atan2(): 마우스 피해가거나 따라가는 효과에 좋음.
- 예제

추가 설명

html, vanilla javascript 에서는 requestAnimationFrame 이라는 함수를 사용한다.
- https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

삼각함수 2D로 시각화해보기.

미니 예제 실습: trig-begin.js
- 시작 코드는 아래와 같이 세팅.
js 파일을 하나 추가하면, html 파일에도 <script src="trig-begin.js"></script> 를 추가해줘야 한다.

// 기본 시작 템플릿
function setup() {  
	createCanvas(windowWidth, windowHeight)
	angleMode(DEGREES);
	background(0);
	rectMode(CENTER);
}
function draw() {
        // background(0);
        
        let x = frameCount * 0.5;
        let y = sin(x);           // 현재 높이는 -1 픽셀 ~ +1 픽셀 정도일 것.
        
        push();
        fill(255);
        translate(x, y);
        ellipse(0, 0, 50, 50);
        pop();
}

참고: https://openprocessing.org/sketch/1839372

실습 `trig-begin.js`

정수 혹은 소수를 sin() 안 / 밖에다가 곱해보자.
- 안에서 곱하면: 가로 주기 폭과 속도가 달라짐. sin(x * 4) * 100
- 밖에서 곱하면: 세로 높이가 달라짐. sin(x) * 400
- sin => cos, tan 로도 바꿔보기.

function draw() {
	// background(0);    // 배경색 코드를 비활성화: 궤적이 남음.
	// 1 이하의 소수점을 곱하면 속도가 느려짐.
	// 1 이상의 수를 곱하면 속도가 빨라짐.
	let x = frameCount;

	// -1 ~ 1 에다가 height/4를 곱하면? 
	let y = sin(x) * (height*0.25); 

	push();
	fill(200, 100, 0);
	// 2D 캔버스의 세로 중앙에 위치 하려면, 높이/2를 더해줘야 함.
	translate(x, y + (height * 0.5));  
	ellipse(0, 0, 50, 50);
	pop();
}

삼각함수를 이용해 원 궤도로 배치하기

미니 예제 실습: trig-begin.js
텍스트를 이용한 샘플 예제

삼각함수로 원형 모션 표현하기

삼각함수로 원의 좌표를 나타낼 수 있다.
원 위의 어떤 점이 가지는 각도(세타)와 반지름을 알면 해당 점의 (x, y) 좌표를 삼각함수로 알아낼 수 있다.
아래 예제들은 원의 반지름이 1이라고 가정하고 기본 공식을 설명하고 있다.

cos(\theta) = \frac{x}{radius} \newline x = cos(\theta) * radius \newline sin(\theta) = \frac{y}{radius} \newline y = sin(\theta) * radius

실습1. 원 위의 점(x, y) 위치를 이용해서 텍스트나 작은 도형들로 원을 그려보자.

위에서 배운 x, y 위치를 구하는 공식을 사용한다.
세타(theta) 각도는 0부터 360도까지 원하는 만큼 사용하되 일정한 규칙을 가지게끔 한다.
- 예) 0, 30, 60, 90, ... 360
반지름을 원하는 크기로 정한다.
- 반지름용 슬라이더를 만들거나 반지름의 크기를 마우스 위치에 비례하게끔 해볼 수도 있다.

실습2. 반복문을 이용해서 하나의 원 위 여러 좌표에 도형을 그려보자.

각도가 늘어나는 값이 일정한 규칙을 가지고 있으니, 이 규칙을 반복문으로 치환해서 작성해보자.

코드를 어떻게 짜야할까?

push, translate, ellipse 혹은 도형, pop 함수를 작성한다.
translate()을 이용해서 cos, sin 함수 안에 일정하게 증가하는 각도 값을 파라미터로 준다.
함수 안에 반지름 변수를 만들고, sin(), cos()에다가 반지름 변수를 곱한다.
이 문단을 반복해서 360도까지 직접 작성해본다.

// 중앙을 기준으로 원처럼 배치. 30도, 60도, 90도, 180도...
function drawUnitCircle() {
	// radius의 값을 고정된 숫자가 아닌 마우스와 연동한다면?
	let radius = 200;
	
	push()
	translate(cos(30)*radius, sin(30)*radius);
	ellipse(0, 0, 10, 10);
	pop();

	// 360도까지 반복하기.
}

draw() 함수 안에서 drawUnitCircle()을 호출해서 실행한다.

push, translate, pop을 이용해서 캔버스의 중앙 위치에 drawUnitCircle()을 그린다.
왜 drawUnitCircle() 함수 밖에다가?
이렇게 하면, translate()로 캔버스의 중앙이든, 마우스 위치든 원하는 곳으로 쉽게 이동할 수 있다.

function draw() {
	background(100);

	push();
	translate(width*0.5, height*0.5);  // 캔버스의 중앙에 배치.
	// translate(mouseX, mouseY);      // 마우스 위치에 따라 이동
	drawUnitCircle();
	pop();
}

drawUnitCircle()을 반복문을 이용해서 작성해보자.

function forUnitCircle() {
	for ( /* 반복 조건 */ ) {
		/* 반복할 코드 */
		push()
		translate(cos(?)*radius, sin(?)*radius);
		ellipse(0, 0, 10, 10);
		pop();
	}
}