이번편에서는 다음 내용을 소개합니다.
- 사용자가 이동시킬 수 있는 점 추가하기
- 시간에 따라 변하는 그림 만드는 법
- 함수 정의하기
최종 결과물은 다음과 같은 화면입니다. (아래 동영상이 가끔 안보이는데, 이 경우는 광고차단을 임시해제하면 됩니다.)
그럼 시작하죠.
1. 제어가능한 점 추가
우선은 다음과 같은 html 파일을 준비합니다.
<!doctype html>
<html>
<head>
<script type="text/javascript" src="https://cindyjs.org/dist/latest/Cindy.js"></script>
</head>
<body>
<div id="CSCanvas"></div>
<script id="csdraw" type="text/x-cindyscript">
</script>
<script type="text/javascript">
CindyJS({
scripts: "cs*",
autoplay: true,
ports: [{
id: "CSCanvas",
width: 500,
height: 500,
transform: [{
visibleRect: [-1,1,1,-1]
}]
}],
geometry: [
{name: 'A', kind: 'P', type: 'Free', pos: [0,0]}
]
});
</script>
</body>
</html>
위 파일은 이전 문서에서도 소개했던 기본파일과 거의 같습니다만, 마지막 CindyJS 부분에 geometry가 추가되어 있습니다. 이 부분은 CindyJS의 공식 문서에서 완전히 정리가 되어 있지는 않은 내용인데, 사용자가 마우스로 직접 움직일 수 있는 점을 추가하는 부분입니다. name은 사용자가 마음대로 정할 수 있는 이름으로, 이 이름은 스크립트 내에서도 사용하게 될 것입니다. 이 파일을 브라우저로 읽으면 다음과 같이 화면에 점 하나가 생깁니다.
이 점은 마우스 드래그나 터치로 이동할 수 있습니다.
2. 함수 정의하기
우리는 이 점 주위로 물결파를 그릴 것입니다. 시간에 따라 이동하는 파동은 $\sin(px-\omega t)$와 같이 표시되므로 아래와 같이 함수를 정의합니다. (11째 줄)
<!doctype html>
<html>
<head>
<script type="text/javascript" src="https://cindyjs.org/dist/latest/Cindy.js"></script>
</head>
<body>
<div id="CSCanvas"></div>
<script id="csinit" type="text/x-cindyscript">
Phi(x, center, time) := sin(20*|x-center|-time);
resetclock();
</script>
<script id="csdraw" type="text/x-cindyscript">
colorplot( gray(1/2 + 1/2*Phi(#, A, seconds())));
</script>
<script type="text/javascript">
CindyJS({
scripts: "cs*",
autoplay: true,
ports: [{
id: "CSCanvas",
width: 500,
height: 500,
transform: [{
visibleRect: [-1,1,1,-1]
}]
}],
geometry: [
{name: 'A', kind: 'P', type: 'Free', pos: [0,0]}
]
});
</script>
</body>
</html>
정의하는 방식은 프로그램이라기보다는 수학의 일반적인 정의 형식에 더 가깝습니다. 단순히 :=를 통해 식을 정하기만 하면 함수를 사용할 수 있습니다. 어느 것이 벡터고 어느 것이 스칼라인지는 CindyJS가 알아서 판단합니다. 함수의 정의는 대체로 CindyJS의 초기 환경설정 부분인 csinit()라는 부분에서 정의합니다.
설명 없이 나타난 부분이 있는데, 12째 줄은 자바스크립트에서 시간 카운터로 사용할 시계를 초기화 하는 부분이고(반드시 csinit에 있어야 합니다.), 실제 그림은 16째 줄을 통해 그려집니다
결론적으로 봤을 때, 먼저 소개한 그림을 그리기 위해 추가된 코드는 네 줄밖에 안 됩니다.(11, 12, 16, 32)