가우스 함수, 혹은 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에 대해 게시글을 올리겠습니다.