Plotting

In this post and the next we'll introduce the idea of functions or maps between spaces. This is where things start to get more interesting and dynamic. The sequel will dive into the theoretical ideas around functions; in this post, we'll focus more concretely on how to graph or plot them.

2d graphing

If f ⁣:R→Rf\colon\R\to\R is a function, its graph is the set

{(x,f(x))∣x∈R}⊂R2.\{(x, f(x)) \mid x \in \R \} \subset \R^2.

That is, we plot the input on the horizontal axis and the output on the vertical axis.

A parametric plot involves two functions g,h ⁣:R→R;g,h\colon\R\to\R; in this case, we visualize these using the set

{(g(t),h(t))∣t∈R}⊂R2.\{(g(t), h(t)) \mid t\in \R\} \subset \R^2.

Note that the graph of a function is a special case of parametric plotting via

g(t)=t,h(t)=f(t).g(t) = t, \quad h(t) = f(t).

However, on a general parametric plot, it's not possible to read off the input value tt which produced a given output value (x,y).(x,y).

Desmos

Desmos is the best 2d graphing calculator on the internet. Here's an example of explicit and parametric plotting in Desmos:

It's also possible to use Desmos programmatically. They provide an API that will embed the calculator directly into your webpage (not an iframe!)

Here's an example of using desmos-react to embeds Desmos in a video:

Source

SVG and Canvas

Since this is a series about programming, we want to be able to plot things programmatically, without relying on GUI tools. There are two options for doing so: SVG and <canvas>. However, plotting functions directly using the APIs (rather than a library) is a bit manual, so I'll show how to do it after we cover linear interpolation (a few posts from now).

Also, for experimenting, using a GUI tool like Desmos is usually faster.

3d graphing

There are two kinds of plotting we can do in 3d: curves and surfaces. Curves involve three functions of one variable:

x=f(t)y=g(t)z=h(t)\begin{align*} x &= f(t)\\ y &= g(t)\\ z &= h(t) \end{align*}

Surfaces involve three functions of two variables:

x=f(u,v)y=g(u,v)z=h(u,v)\begin{align*} x &= f(u, v)\\ y &= g(u, v)\\ z &= h(u, v) \end{align*}

In 2d, a special kind of parametric curve was the graph of a single function. Similarly, if we have a single function of two variables f(x,y),f(x, y), then we can visualize it using the parametric surface

x=uy=vz=f(u,v)\begin{align*} x &= u\\ y &= v\\ z &= f(u, v) \end{align*}

THREE.js

In this series, we'll use THREE.js for all our 3d examples. I'll also (usually) use it in conjunction with React Three Fiber, which provides a nice declarative way to use THREE inside React.

We use TubeGeometry to plot curves, and ParametricGeometry to plot surfaces. Here's a demonstration of using THREE.js to plot the parametric curve

x=5cos⁡(4πt)y=5sin⁡(4πt)z=−3+6t0≤t≤1\vcenter{ \begin{align*} x &= 5\cos(4\pi t)\\ y &= 5\sin(4\pi t)\\ z &= -3 + 6t \end{align*} }\qquad 0 \le t \le 1

and the graph of the function

z=cos⁡(x)sin⁡(y),−2π≤x, y≤2πz = \cos(x)\sin(y),\qquad -2\pi \le x,\, y\le 2\pi Access source on GitHubSource

(I'll explain in the next chapter how I came up with these formulas.)

WebGL / WebGPU

THREE.js is a friendly API over WebGL. There's also a fancy new thing called WebGPU. It's probably worth getting familiar with using these technologies directly. If I ever get around to doing so, I'll talk about it in this series.

Grapher

If you're on OS X, it comes with a great piece of software called Grapher. It can do 2d and 3d graphing, as well as animations; it was hugely important for me when I was learning math growing up. Here's a tutorial video I recorded on how to use it: