🏔️ 3D 곡면 그래프

곡면 그래프는 두 변수의 함수 z = f(x, y)를 높이장으로 시각화합니다. 평평한 x/y 평면의 각 점마다 함수가 높이 z를 주고, 이 높이들을 이으면 3D 공간에 떠 있는 매끄러운 메시가 됩니다. 보통 색으로 높이를 표현하므로 봉우리와 골짜기가 한눈에 드러납니다. 지형, 판 위의 온도 분포, 수학적 안장의 모양 같은 것을 그리는 자연스러운 방법입니다.

이 도구는 정의역 전체에서 함수를 계산해 점들의 격자(최대 40×40)를 만든 뒤, 사용자가 조정하는 두 각도로 점들을 회전하고, 회전한 점들을 간단한 등각투영으로 2D에 투영하며, 면들을 뒤에서 앞 순서로 정렬해 가까운 면이 먼 면을 덮게 합니다 — 고전적인 화가 알고리즘입니다. 모든 것은 순수 HTML 캔버스로 그려지며, WebGL도 three.js도 쓰지 않아 도구가 가볍고 의존성이 없습니다.

맞춤형 화이트리스트 파서가 수식을 읽으며 JavaScript eval을 쓰지 않습니다. 따라서 나열된 함수(sin, cos, tan, sqrt, abs, exp, log, pow), 상수 pi와 e, 두 변수 x와 y만 허용되고 그 외의 것은 실행되기 전에 거부됩니다. 시작하기 좋은 예는 프리셋으로, 굽이치는 물결장을 만드는 sin(x)*cos(y)나 고전적인 안장을 만드는 x^2 - y^2가 있습니다.