Handy Math

Sketching with Math and Quasi Physics

There is a newer and more elaborate version of this site.
Visit Sketching with Math and Quasi Physics on Notion.

Sine, Cosine and Tangent




* Note that p5.js is based on the screen coordinate system in which y increase from top to bottom. The opposite is flipped by multiplying -1 in the rendering below.

Rotating 2D points


Learn more

A Gentle Primer on 2D Rotations

Euclidean distance between two points

Euclidean distance is the most intuitive, "ordinary" straight-line distance between two points in Euclidean space.

Two dimensions



n dimensions



Manhattan distance between two points

Euclidean distance is not the only way to measure distance between two points. In mathmatics, distance is defined by a function called distance function or metric, which can be any function that satisfy a set of conditions.

Manhattan distance is an example of a non-Euclidean distance, which is the sum of the absolute differences of their Cartesian coordinates, or the distance a car would drive in a city laid out in square blocks.

Two dimensions



Perspective Projection (Fixed Camera)

\(\lbrack x,y,z\rbrack\) projects to \(\left[x\frac{\displaystyle d_1}{\displaystyle d_2},y\frac{\displaystyle d_1}{\displaystyle d_2}\right]\)

\(d_1=\) Focal length
the axial distance from the camera center to the image plane
\(d_2=\) Subject distance
the axial distance from the camera center to the subject

Dot Product

Two dimensions

$${\boldsymbol v}_\mathbf1=\lbrack x_1,y_1\rbrack,\hspace{8px}{\boldsymbol v}_\mathbf2=\lbrack x_2,y_2\rbrack$$

$${\boldsymbol v}_\mathbf1\cdot{\boldsymbol v}_\mathbf2=x_1x_2+y_1y_2$$

n dimensions

$$\boldsymbol a=\lbrack a_1,a_2,a_3,\dots,a_n\rbrack,\hspace{8px}\boldsymbol b=\lbrack b_1,b_2,b_3,\dots,b_n\rbrack$$

$$\boldsymbol a\cdot\boldsymbol b=a_1b_1+a_2b_2+a_3b_3\dots a_nb_n$$

Cross Product

3 dimensions

$${\boldsymbol v}_\mathbf1=\lbrack x_1,y_1,z_1\rbrack,\;{\boldsymbol v}_\mathbf2=\lbrack x_2,y_2,z_2\rbrack$$

$${\boldsymbol v}_\mathbf1\times{\boldsymbol v}_\mathbf2=\lbrack y_1z_2-z_1y_2,z_1x_2-x_1z_2,x_1y_2-y_1x_2\rbrack$$