이 글은 CindyJS의 사용환경을 만드는 법에 대해 다룹니다.
CindyJS는 Cinderella라는 소프트웨어의 한 기능인 CindyScript를 자바스크립트로 구현한 것입니다. WebGL에 대응하는 CindyGL을 확장해서 사용할 수 있습니다. 이것들에 대한 정확한 개념은 저도 잘 모릅니다.
CindyJS의 큰 장점은 수학적인 모델링을 수학 자체에 집중해서 구현할 수 있도록 만들어져 있다는 것입니다. 그래서, 이 문서에서 설명하는 내용을 빼고는 수학 소프트웨어를 사용하는 것과 비슷한 느낌으로 사용할 수 있습니다. 코딩보다 수학에 더 익숙한 분들을 위한 환경이죠.
사용을 위해 필요한 준비물
1. 텍스트 에디터
메모장으로도 충분히 할 수 있습니다만 모든 학습은 좋은 학습환경에서 가장 잘 이뤄집니다. 자바스크립트를 공부하려면 좋은 에디터가 필요한데, 어도비사의 brackets를 추천합니다. 다음 문서를 참고해서 설치하시기 바랍니다.
https://softwares.tistory.com/15?category=666810
위 문서를 읽으면 알게 되겠지만, 크롬 브라우저도 필요합니다.
2. CindyJS 파일(선택이지만 권장사항)
CindyJS는 사용자 컴퓨터에 설치하지 않고도 사용할 수 있지만, 만일의 경우를 대비해서 복사본을 가지고 있는 편이 좋습니다. CindyJS의 공식홈페이지인 cindyjs.org에서 연결되는 GitHub을 가보면 비정기적으로 기능업데이트가 있음을 확인할 수 있는데, 소스파일을 다운받아서 빌드하려면 윈도우10 등의 마이크로소프트 환경에서는 해야 할 일이 많습니다. 빌드를 할 수 있는 분이면 https://github.com/CindyJS/CindyJS에 있는 문서를 참고해서 직접 하시면 되겠고, 이 작업이 부담되신다면 제가 빌드한 다음 파일을 다운받아서 사용하시면 되겠습니다.(2019년 1월 4일자 빌드)
js.zip이 파일을 다운받아서 작업할 폴더의 서브폴더로 압축해제를 하면 됩니다. 이 문서에서는 대부분 작업폴더의 <code>js</code>라는 서브폴더에 CindyJS가 복사되어 있다고 가정하고 설명합니다만, 당분간은 꼭 필요한 환경은 아닙니다.
Template file 제작
CindyJS를 사용하기 위해서는 꼭 필요한 부분이 있습니다. 이 부분을 모아 하나의 파일로 만들어 두시기 바랍니다. 혹시 모르니 아래 설명하는 두 파일이 모두 있는 편이 좋습니다.
1. 본인의 하드에 CindyJS 파일이 없을 때:
<!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>
CindyJS({
scripts: 'cs*',
autoplay: true,
ports: [{
id: 'CSCanvas',
width: 500,
height: 500,
transform: [{
visibleRect: [-10, 10, 10, -10]
}]
}]
})
</script>
</body>
</html>
2. 본인의 하드에 CindyJS 파일이 복사되어 있을 때:
이 경우, 만약 CindyJS 파일이 작업폴더의 서브폴더 <code>js</code>에 모여있다면 다음과 같은 파일을 만들어두면 됩니다.
<!doctype html>
<html>
<head>
<script type="text/javascript" src="js/Cindy.js"></script>
</head>
<body>
<div id='CSCanvas'></div>
<script id='csdraw' type='text/x-cindyscript'>
</script>
<script>
CindyJS({
scripts: 'cs*',
autoplay: true,
ports: [{
id: 'CSCanvas',
width: 500,
height: 500,
transform: [{
visibleRect: [-10, 10, 10, -10]
}]
}]
})
</script>
</body>
</html>
두 파일은 5번째 줄의 내용을 빼고는 동일한 내용을 담고 있습니다. 설명이 필요한 부분이 있는데, 21번째 줄의 width는 CindyJS로 그려질 그림의 가로크기, 22째 줄의 height는 CindyJS로 그려질 그림의 세로 크기를 말합니다.
24째 줄의 대괄호 안의 숫자는 앞서 크기를 설정한 영역에서 사용할 x, y좌표의 범위를 정하는 부분입니다. 네 수의 순서쌍으로 이루어져 있는데, 순서대로 x좌표의 최솟값, y좌표의 최댓값, x좌표의 최댓값, y좌표의 최솟값을 의미합니다. 이 네 수는 아래 그림과 같이 시계방향을 따라 정의되어 있음을 알 수 있습니다.
이렇게 하면 CindyJS를 사용할 준비가 끝납니다. 아래 보이는 시계는 이 페이지 맨 밑의 소스를 이용하면 구현할 수 있습니다. 잘 보면 보통 시계와는 달리 실제 아날로그 시계처럼 매 시각 시, 분, 초침이 연속적으로 움직입니다.
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<script type="text/javascript" src="js/Cindy.js"></script>
</head>
<body>
<div id='CSCanvas'></div>
<script id='csdraw' type='text/x-cindyscript'>
t = time();
if(t_1>12, hrs = "오후 " + (t_1 - 12), if(t_1==12, hrs="오후 " + t_1, hrs="오전 " + t_1));
drawtext((-0.5,1.2), hrs +"시 "+t_2+"분 "+ t_3 + "초");
p(x):=(sin(2*pi*x),cos(2*pi*x));
S.xy = p(t_3/60+t_4/1000/60);
M.xy = p(t_2/60+t_3/60/60)*0.9;
H.xy = p((t_1*60+t_2)/12/60)*0.7;
draw(H*(-0.06),H, size->6, color->(1,0,0));
draw(M*(-0.08),M, size->4);
draw(S*(-0.1),S, size->2, color->(0,0,0));
apply(1..60,i,draw( p(i/60), size->1 ) );
apply(1..12,i,draw( p(i/12), color->hue(0.1) ) );
</script>
<script>
CindyJS( {
scripts: 'cs*',
autoplay: true,
ports:[{
id:"CSCanvas",
width: 500,
height: 500,
transform: [{
visibleRect: [-1.5, 1.5, 1.5, -1.5]
}],
}],
geometry: [
{name: 'S', kind: 'P', type: 'Free', pos: [0,1]},
{name: 'M', kind: 'P', type: 'Free', pos: [0,1]},
{name: 'H', kind: 'P', type: 'Free', pos: [0,1]}
]
})
</script>
</body>
</html>