Handy Math

Sketching with Math and Quasi Physics

Sine, Cosine and Tangent

$$\mathrm{sine}=\frac{\mathrm{opposite}}{\mathrm{hypotenuse}}$$

$$\mathrm{cosine}=\frac{\mathrm{adjacent}}{\mathrm{hypotenuse}}$$

$$\mathrm{tangent}=\frac{\mathrm{sine}}{\mathrm{cosine}}$$

* 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.

Rotate 2D points

$$\begin{bmatrix}x'\\y'\end{bmatrix}=\begin{bmatrix}\cos\theta&-\sin\theta\\\sin\theta&\cos\theta\end{bmatrix}\begin{bmatrix}x\\y\end{bmatrix}$$

Learn more

A Gentle Primer on 2D Rotations

Euclidean distance between two points

Two dimensions

$$p=(p_x,p_y),\;q=(q_x,q_y)$$

$$\mathrm{distance}(p,q)=\sqrt{(p_x-q_x)^2+(p_y-q_y)^2}$$

n dimensions

$$p=(p_1,p_2\cdots,p_n),\;q=(q_1,q_2\cdots,q_n)$$

$$\mathrm{distance}(p,q)=\sqrt{(p_1-q_1)^2+(p_2-q_2)^2+\cdots+(p_n-q_n)^2}=\sqrt{\sum_{i=1}^n(p_i+q_i)^2}$$

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$$

index