a graphing calculator in pure HTML/CSS/JS, no dependencies
Just type an equation, and watch those curves! Run it locally if you wish.
- explicit functions -
y=x^2,sin(x)/x, or justx^2(they =is optional) - inverse explicit —
x = y^2 - 3 - implicit curves —
x^2 + y^2 = 9,sin(x) = cos(y) - implicit multiplication —
2x,xy,3sin(x),(x+1)(x-1) - 25+ functions — trig, inverse trig, hyperbolics,
log/ln/log2,sqrt/cbrt,floor/ceil/round/trunc,min/max/hypot,sign,abs - supported constants —
pi,tau,e - graph multiple functions at once, to each their own colour
- pan by dragging, zoom by scrolling (anchored at the cursor)
Conventions: log is base 10, ln is natural
why a 6px grid for marching squares? Cost is O(W·H/S²). At S=6 on a 1440×900 window that's ~36k evaluations per implicit curve per repaint, which stays at 60fps even while panning. S=3 looks slightly smoother but costs 4x as much. 6 is where it stopped feeling too laggy.
why redraw the whole canvas on every pan frame? Blitting the existing pixels and only recomputing the newly-exposed strip would be more optimal in most cases. However, i believe the complexity of its implementation is not worth it since a full repaint is only ~5ms at the current resolution.
git clone https://github.com/dzuizz/graphide.git
cd graphide
open index.html # or: python3 -m http.server- polar coordinates —
r = 2sin(3θ) - parametric curves
- per-function domain restrictions —
y = sqrt(x) {x > 0}(needs a real parser) - shareable URL state
- inequality shading
- trace / coordinate readout on hover
built by @dzuizz - dzuizz.com