가우스 함수, 혹은 floor function이 포함된 음함수의 그래프는 일반적인 소프트웨어에서 제대로 그려지지 않습니다. 간단한 형태인 $\lfloor x \rfloor +\lfloor y \rfloor =1$ (우리 나라 고등학교 교과서에서는 대체로 $[x]+[y]=1$이라 씁니다.)인 경우에도 지오지브라로 그려보면 다음과 같이 나옵니다.
많은 프로그램에서 이런 형태로 그려주죠. (제 컴 상태가 이상해서 좌측에 명령이 안보입니다.) 그나마 울프람 알파는 다음과 같은 그래프를 그려줍니다.
하지만, 울프람 알파에서도 $\lfloor x^3 \rfloor + \lfloor y \rfloor = 1$을 그리라고 하면 다음 정도 수준으로밖에 못 그려 줍니다.
사용자의 모든 입력에 대해 해를 구하려는 알고리즘 때문에 생기는 문제 같은데, 생각을 바꿔서 그리려는 영역의 점 모두에 대한 함수값을 구해서 등식이 성립하는지를 확인하면 쉽게 그릴 수 있습니다.
기본 자바스크립트로도 가능하지만, CindyJS를 이용하면 쉽게 그릴 수 있습니다. 우선, 다음의 내용을 담은 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>
CindyJS({
scripts: 'cs*',
autoplay: true,
ports: [{
id: 'CSCanvas',
width: 500,
height: 500,
transform: [{
visibleRect: [-10, 10, 10, -10]
}]
}]
})
</script>
</body>
</html>
20, 21째 줄의 width, height 부분은 그래프 영역의 크기를 설정하는 것이고, 23째 줄의 visibleRect에 대괄호로 표시된 부분은 순서대로 그래프 영역의 최소 x좌표, 최대 y좌표, 최대 x좌표, 최소 y좌표입니다. 좌표평면을 상상하면 시계방향으로 각 축의 끝 좌표를 나타내고 있음을 알 수 있습니다. 여기서 설명한 숫자는 취향에 따라 바꿀 수 있습니다.
이렇게 하고나서 11, 12째 줄에 걸쳐 있는 csdraw 부분을 다음 11-14줄과 같이 방정식 $[x^3]+[y]=1$을 출력할 수 있도록 바꿔줍니다.
<!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'>
f(p) := abs(floor(p.x^3)+floor(p.y)-1);
colorplot( gray(f(#)) );
</script>
<script>
CindyJS({
scripts: 'cs*',
autoplay: true,
ports: [{
id: 'CSCanvas',
width: 500,
height: 500,
transform: [{
visibleRect: [-10, 10, 10, -10]
}]
}]
})
</script>
</body>
</html>
그러면 웹브라우저로 읽었을 때 다음과 같은 그래프가 그려집니다.
절댓값 함수 abs와 내장된 colorplot이라는 기능을 사용해서 그렸습니다. x, y축을 나타나게 하려면 다음과 같이 draw로 선을 그려주면 됩니다.(14,15째 줄)
<!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'>
f(p) := abs(floor(p.x^3)+floor(p.y)-1);
colorplot( gray(f(#)) );
draw((-10,0),(10,0));
draw((0,-10),(0,10));
</script>
<script>
CindyJS({
scripts: 'cs*',
autoplay: true,
ports: [{
id: 'CSCanvas',
width: 500,
height: 500,
transform: [{
visibleRect: [-10, 10, 10, -10]
}]
}]
})
</script>
</body>
</html>
draw는 반드시 colorplot 다음에 있어야 합니다. 반대로 하면 모처럼 그린 두 축을 그래프가 덮어씌워버립니다. 결과는 다음과 같습니다.
CindyJS는 지오지브라의 기능을 거의 모두 가지고 있습니다. 많은 수학적 기능을 쉽게 구현할 수 있는데, 앞으로 한동안은 CindyJS에 대해 게시글을 올리겠습니다.