수식 파싱(Math Expression Parsing)과 카르테시안 좌표계 렌더링 원리
수학적 함수의 시각화는 단순한 계산 결과 확인을 넘어, 함수 곡선이 갖는 대칭성, 주기성, 극값(Local Min/Max), 불연속성(Discontinuity) 및 극한의 포괄적 이해를 위한 핵심 과정입니다. 기존의 설치형 고급 수학 프로그램은 무겁고 복잡했던 반면, 웹 표준 HTML5 Canvas 2D 그래픽 렌더러를 활용하면 플러그인 없이 현대 웹 브라우저에서 초당 60fps의 매끄럽고 정밀한 그래픽 시각화가 가능합니다.
Toolbase 수학 그래프 계산기는 사용자가 입력한 중위 표기법(Infix Notation) 텍스트 수식을 실시간 어휘 분석(Lexical Analysis) 및 연산자 가중치 평가를 거쳐, 화면의 픽셀 좌표계와 수학적 카르테시안 좌표계(Cartesian Coordinates) 간의 고해상도 안티앨리어싱 매핑 렌더링을 지원합니다.
다중 함수 동시 중첩 지원
서로 다른 색상의 선으로 f(x), g(x), h(x) 등 3개 이상의 수식을 한 화면에 동시에 중첩 렌더링하여 교점과 대칭성을 명확히 비교합니다.
실시간 마우스 좌표 트래킹
캔버스 위 마우스 커서 위치에 따른 정밀 수학적 (x, y) 부동소수점 좌표값을 실시간 툴팁 팝업으로 제공합니다.
자유로운 뷰포트 확대/축소/원점 초기화
줌-인(+), 줌-아웃(-) 버튼과 원점 초기화 버튼으로 미세 파형 관찰부터 전체 축척 탐색까지 자유롭게 조작합니다.
1. 지원되는 수학 연산자 및 기호 문법 표
입력 가능한 표준 수학 함수, 연산자 및 주요 상수 명세표입니다.
| 기호 / 함수 | 구분 및 설명 | 사용 예시 수식 | 시각적 그래프 특성 |
|---|---|---|---|
| +, -, *, / | 기본 사칙연산자 | 2 * x + 5 | 기울기 2, Y절편 5의 1차 직선 |
| ^ 또는 ** | 거듭제곱 (Power) | x^2 - 4 | 원점을 중심으로 좌우 대칭인 2차 포물선 |
| sin(x), cos(x), tan(x) | 삼각함수 (Trigonometric) | sin(x) * 2 | 주기 2π, 진폭 2를 갖는 정현파 곡선 |
| sqrt(x), cbrt(x) | 제곱근 및 세제곱근 | sqrt(x) | x >= 0 영역에서 완만히 증가하는 곡선 |
| abs(x) | 절대값 (Absolute Value) | abs(x) - 3 | x=0 지점에서 꺾이는 V자형 대칭 그래프 |
| log(x), exp(x) | 자연로그 및 지수함수 | exp(x) | x가 증가함에 따라 급격히 발산하는 지수 곡선 |
| pi, e | 수학 상수 (Mathematical Constants) | sin(pi * x) | 원주율(π)과 자연상수(e) 기반 정확한 주기 산출 |
2. 픽셀 좌표(Pixel Coordinates) ↔ 카르테시안 수학 좌표 변환 공식
HTML5 Canvas 그래픽 캔버스의 (0, 0)은 화면의 좌측 상단(Top-Left)을 기점으로 X축은 우측, Y축은 하단 방향으로 증가합니다. 반면 데카르트 수학 좌표계(Cartesian Coordinate)는 중앙을 (0,0)으로 하고 Y축이 상단 방향으로 증가합니다.
따라서 입력된 수식의 임의의 점 (MathX, MathY)를 캔버스 상의 픽셀 좌표 (ScreenX, ScreenY)로 정밀 변환하기 위해 아래 매핑 수식을 사용합니다:
ScreenX = (MathX - Xmin) / (Xmax - Xmin) * CanvasWidth
ScreenY = CanvasHeight - (MathY - Ymin) / (Ymax - Ymin) * CanvasHeight
이 변환 수식의 역연산을 통해 마우스 커서의 픽셀 위치 (px, py)를 정밀 수학 좌표 (x, y)로 환산하여 화면 하단 툴팁으로 표시합니다.
3. 다중 함수 중첩 분석 및 실무 활용 팁
① f(x) = sin(x)와 g(x) = cos(x)를 동시에 입력하면 삼각함수의 위상차(Phase Shift, π/2)와 교점을 눈으로 손쉽게 확인할 수 있습니다.
② 삼각함수와 다항식의 곱(예: h(x) = cos(x) * x)을 입력하여 감쇠 파동(Damped Oscillation) 또는 진폭이 확장되는 진동 그래프 형태를 시각화해보세요.
③ 완료된 그래프는 캔버스 위에서 마우스 우클릭 후 "이미지를 다른 이름으로 저장"을 클릭하여 고해상도 PNG 포맷으로 저장할 수 있습니다.
자주 묻는 질문 (FAQ)
Q.1/x 수식이나 sqrt(-1)처럼 정의되지 않는 수학 영역은 어떻게 처리되나요?
1/x의 x=0 지점(분모가 0)이나 sqrt(-1)처럼 실수 영역에서 정의되지 않는 수치는 연산 시 NaN(Not a Number)으로 분기 처리되어, 캔버스 선이 끊어진 불연속 형태로 안전하고 정확하게 표현됩니다.
Q.수식 입력 시 곱하기 기호(*)를 생략해도 되나요?
본 내부 수식 평가 엔진은 2x -> 2*x, sin(x)x -> sin(x)*x 등 암묵적 곱셈 규칙을 자동으로 교정해줍니다. 다만 명확한 계산을 위해 2*x 형태로 입력하는 것을 권장합니다.
Q.동시에 몇 개의 함수까지 중첩해서 그릴 수 있나요?
입력할 수 있는 함수 개수에는 제한이 없습니다. 하단의 "+ 새 함수 추가" 버튼을 클릭하여 원하는 만큼 여러 색상의 함수를 추가할 수 있습니다.
Q.모바일 디바이스나 다양한 해상도에서도 그래프가 잘 깨지지 않나요?
네, 잘 유지됩니다. Canvas 영역이 창 크기에 맞추어 반응형(Responsive)으로 자동 리사이징되며, 윈도우 리사이즈 이벤트 발생 시 캔버스 해상도에 맞게 초당 60fps로 즉시 다시 그립니다.