**minimal**distance between the leaf and the camera axis; this is equivalent to the dashed red line segment in Fig. 5 meeting the camera axis in a perpendicular. Thus the distance along the camera axis is however much of ${\bf r}-{\bf p}$ goes along ${\bf\hat{c}}$, i.e. the projection $$\textrm{distance along camera axis}=({\bf r}-{\bf p})\cdot{\bf\hat{c}}.$$ The vector pointing from the camera axis to the leaf (the dashed red line segment) is then whatever's left over, so $$\textrm{vector from camera axis to object}=({\bf r}-{\bf p})-\left(\left({\bf r}-{\bf p}\right)\cdot{\bf\hat{c}}\right){\bf\hat{c}},$$ which is as computationally unwieldy as it looks. Fortunately, we don't care as much about that length as we do about how it breaks down into components on the screen. @@[email protected]@(/img/3d-graphics/leaf_coordinates.png)(Coordinates in a plane parallel to the screen)[Fig. 6: illustrating Cartesian coordinates in a plane parallel to the screen. The red dashed line segment is the same as in Fig. 5, connecting the camera axis to the leaf.] In Fig. 6, we consider a plane parallel to the screen which contains the leaf (the green dot). We want to compute its Cartesian coordinates in this plane (taking the origin to be $(0,0)$, right and up being the positive directions). From those quantities, it will be a simple matter to scale them down to screen coordinates. But these coordinates are just projections. The $y$ coordinate is the component of the red vector in the ${\bf u}$ direction: \begin{equation} y=\left[({\bf r}-{\bf p})-\left(\left({\bf r}-{\bf p}\right)\cdot{\bf\hat{c}}\right){\bf\hat{c}}\right]\cdot{\bf\hat{u}}=({\bf r}-{\bf p})\cdot{\bf\hat{u}}, \label{leaf_y} \end{equation} where we make use of the fact that ${\bf\hat{c}}\cdot{\bf\hat{u}}=0$. Likewise, because ${\bf\hat{c}}\cdot{\bf\hat{g}}=0$, we have \begin{equation} x=({\bf r}-{\bf p})\cdot{\bf\hat{g}}. \label{leaf_x} \end{equation} Finally we can write down the screen coordinates of the leaf. Again, we take the center of the screen to be the origin of our coordinates, and we take the positive directions to be up and to the right. By Eqns. (\ref{screen_scaling}), (\ref{leaf_y}) and (\ref{leaf_x}), we have $$\textrm{screen x coordinate}=d_0\frac{({\bf r}-{\bf p})\cdot{\bf\hat{g}}}{({\bf r}-{\bf p})\cdot{\bf\hat{c}}}$$ and $$\textrm{screen y coordinate}=d_0\frac{({\bf r}-{\bf p})\cdot{\bf\hat{u}}}{({\bf r}-{\bf p})\cdot{\bf\hat{c}}}.$$ ### Summing up We now have a straightforward way of implementing three-dimensional rendering. We imagine our scene taking place in $\mathbb{R}^3$. There's a camera with some parameters, most importantly $$ \begin{eqnarray*} {\bf\hat{c}} =& \textrm{unit vector along camera's axis,}\\ {\bf\hat{u}} =& \textrm{unit vector along camera's up direction,}\\ {\bf\hat{g}} =& \textrm{unit vector along camera's right direction,}\\ {\bf p} =& \textrm{position of observer}. \end{eqnarray*} $$ Then an object at ${\bf r}$ will appear on the screen at the coordinates $$(x,y)=d_0\left(\frac{({\bf r}-{\bf p})\cdot{\bf\hat{g}}}{({\bf r}-{\bf p})\cdot{\bf\hat{c}}},\frac{({\bf r}-{\bf p})\cdot{\bf\hat{u}}}{({\bf r}-{\bf p})\cdot{\bf\hat{c}}}\right),$$ taking the center of the screen to be the origin, with positive $x$ to the right and positive $y$ up. In [the next part of this series](./rendering-3d-in-under-100-lines-js), we will implement this renderer using HTML5 canvas.