프로그램으로 애니메이션을 만드는 【기초편 랜덤】

이 게시물은 Quad inc 모험 달력의 마지막 날입니다.

랜덤 정보

약간의 스케치 등으로 무언가 움직이는 것을 만들고 싶었을 때, 랜덤을 이용하는 것이 많다고 생각합니다.
브라운 운동이라고도 불리는 것 같습니다.

예를 들면 이런 느낌의 것.

브라운 모션 from dimitris gourdoukis on Vimeo .

이것은 랜덤하게 포지션을 설정해 라인을 묘화하고 있군요.

랜덤하게 x와 y 좌표를 생성해, 오브젝트를 움직이는 코드는 대체로 이런 느낌일까요?

var vx = Math.random(-1, 1); // -1 ~ 1 
var vy = Math.random(-1, 1); // -1 ~ 1

obj.x += vx;
obj.y += vy;

확실히 이것으로 무작위로 움직입니다.
그러나 방금전의 동영상을 보면, 움직임은 꽤 단단한 느낌이 드네요. 이것은 vx,vy의 값에 연속성이 없는 것이 문제입니다.
더 부드럽게 움직이는 것은 만들 수 없습니까?
거기서 자주 이용되고 있는 것이 noise(Perlin noise)입니다.

펄린 노이즈란?

펄린 노이즈(Perlin noise)란, 컴퓨터 그래픽스의 리얼리티를 늘리는데 사용되는 텍스처 작성 기법.

펄린 노이즈는 여기

원래는 텍스처를 만드는 방법 중 하나였지만 이것을 모션에 사용할 수 있습니다.

펄린 노이즈와 애니메이션의 관계

펄린 노이즈를 사용하면 다음과 같은 텍스처 이미지를 만들 수 있습니다.



이것, 잘 보면 부끄러워하는 곳과 검은 곳 있네요. 검정 이외의 부분은 흰색에서 회색으로 미묘하게 명도가 변화하고 있지요.

이 미묘하게 변화하고 있지만 중요합니다. 이것은 완만하게 변화하고 있는 것, 즉 연속성이 있는 것입니다.
확신에 가까워지고 있습니다.

이것을 애니메이션에 이용하려면 어떻게 할까? 방법은 여러 가지가 있습니다.

이번에는 위의 이미지를 이용해 보겠습니다. (앞으로 소개하는 코드는 완전히 더미이므로 주의해 주십시오.)
이미지의 적절한 1px를 선택하고 거기에서 색상 정보를 추출합니다.
예를 들면 이런 느낌 (어디까지나 샘플입니다)

// サンプルです。
var color = noise(100, 100, 100);
var r = (color >> 16) & 0xff;
var g = (color >> 8) & 0xff;
var b = color & 0xff;

핀 때 사람이 있을지도 모르지만 이 r, g, b를 다음과 같이 대체하면

// サンプルです。
var color = noise(100, 100, 100);
var vx = (color >> 16) & 0xff;
var vy = (color >> 8) & 0xff;
var vz = color & 0xff;

이것은! ! 그런데 이것을 이런 식으로 하면

// サンプルです。
obj.x += vx;
obj.y += vy;
obj.z += vz

움직임을 만들 수있었습니다! 눈치 채면 3차원의 랜덤 모션이 되어 있었습니다. 2차원이라면 단순히 z의 값을 사용하지 않으면 OK입니다.
obj가 이동시킨 장소의 1px를 취득해, 같은 처리를 실행합니다.
텍스처 맵은 천천히 색상이 변하기 때문에 모션은 유기적입니다.

이런 느낌

Starlings Study 01 from Peder Norrby on Vimeo .

노이즈를 사용하면 웹에서 자주 볼 수 있는 유기적인 움직임을 직접 만들 수 있습니다.
실제로 움직이는 샘플이 있는 편이 좋기 때문에, 나중에 추기합니다. 제발...

움직이는 것을 만드는 것은 재미 있습니다.

Advent Calender는 오늘 끝이지만 계속 게시할 수 있도록 노력하겠습니다!