<h5>At this point this article is probably outside of the curriculum. The transformations are in the curriculum, but most of this article is on a real math problem I've experienced which of course requires a bit of programming.</h5>
Warning: This page requires javascript to render the math. This website runs better on a chromium browser. Untested on Firefox. <b>TikZ graphics may not render on other platforms!</b>
<center><b>Introduction - What is '2.5d'?</b></center>
'2.5d' is not an actual dimension, but refers to techniques in computer graphics which aim to create the presence of 3d depth, but in a 2d level or environment.<br><br>
<center>
<scripttype="text/tikz">
\begin{tikzpicture}[thick,scale=1, every node/.style={scale=1.9,inner sep=0pt}]
\draw (-2.5,0) rectangle (2.5,3);
\draw [fill=gray] (-2.5,0) rectangle (2.5,-3);
\node [label=left:{[-2.5, 0]}] at (-2.5,0) {\textbullet};
\node [label=right:{[2.5, 0]}] at (2.5,0) {\textbullet};
\node [label=right:{[2.5, 3]}] at (2.5,3) {\textbullet};
\node [label=right:{[2.5, -3]}] at (2.5,-3) {\textbullet};
\node [label=left:{[-2.5, 3]}] at (-2.5,3) {\textbullet};
\node [label=left:{[-2.5, -3]}] at (-2.5,-3) {\textbullet};
\end{tikzpicture}
</script>
</center>
This box is a simplified example of 2.5d graphics.<br>
The gray on the front-facing side and the white top side is an example of shading, and creates the illusion of a 3d environment as a result of basic lighting. The camera is placed at a 45 degree angle, as we see equal proportions of the top and front faces of the box<br>
However, this is not real 3d graphics, as we're representing this box within a 2d space with only 2d position vectors.<br>
Therefore, this is 2.5d graphics.
</div>
</div>
<br>
<divclass="card">
<divclass="card-body">
<center><b>The problem</b></center>
I was making a mod for a game that added in rockets. The rockets took a ballistic trajectory to reach a target point<br>
Of course, because this is a 2.5d game I couldn't simply model the flight with the actual equations, because there is no concept of 'height' or 'altitude' in the game<br>
<br>
<center>
<scripttype="text/tikz">
\begin{tikzpicture}[thick,scale=1, every node/.style={scale=1.9,inner sep=0pt}]
The blue dashed parabola represents the pre-transformed trajectory (we are only given the distance \(d\) from target \(\mathbf{T}\) to silo \(\mathbf{S}\))<br>
<divclass="alert alert-warning"role="alert">
<center>How this transformation is achieved [Advanced]</center>
<br>
Our transformation requires a shift. We can't just add two matrices of different dimensions so we need to somehow represent the shift as a matrix multiplication. For this we need a <b>homogeneous coordinate</b><br>
We represent a 2d vector as a 3d vector, but the \(\vec{k}\) component is a constant \(1\). This constant allows the addition of the shift through matrix multiplication. <br>
\[\mathbf{X}=\begin{bmatrix}
x_0 & x_1 & x_2 & x_3 & x_4 & x_5 & \dots \\
y_0 & y_1 & y_2 & y_3 & y_4 & y_5 & \dots \\
1 & 1 & 1 & 1 & 1 & 1 & \dots
\end{bmatrix}\]
In this case, we applied the following transformations to <b>rotate</b> then <b>translate</b> \(\mathbf{T}\) into 'inaccurate' trajectory, \(\mathbf{T'}\)
\begin{align}
\mathbf{X'} &= \begin{bmatrix}
1 & 0 & \Delta{x} \\
0 & 1 & \Delta{y} \\
0 & 0 & 1 \\
\end{bmatrix}\begin{bmatrix}
\cos(\theta) & -\sin(\theta) & 0 \\
\sin(\theta) & \cos(\theta) & 0 \\
0 & 0 & 1 \\
\end{bmatrix}\mathbf{X}
\\\\
&= \begin{bmatrix}
1 & 0 & 1 \\
0 & 1 & 2 \\
0 & 0 & 1 \\
\end{bmatrix}\begin{bmatrix}
\cos(\frac{\pi}{6}) & -\sin(\frac{\pi}{6}) & 0 \\
\sin(\frac{\pi}{6}) & \cos(\frac{\pi}{6}) & 0 \\
0 & 0 & 1 \\
\end{bmatrix}\mathbf{X}
\end{align}
However, in reality I would just use a for loop and iterate through each pair of points.<br>
<pre><codeclass="python">import math
import numpy as np
def rotate(theta):
return np.array([[cos(theta), -sin(theta)],
[sin(theta), cos(theta)]])
T = [[0,0], ... ,[4,0]] #Our starting list of points T
T_ = []
C = [1,2]
R = rotate(math.pi/6) #Rotation matrix when theta=pi/6. Store to R to save function calls
for P in T:
P = np.array(P) #convert python list (A point P, like [0,0]) to numpy array
P_ = np.add( np.matmul(R,P), C ) #multiply with rotation matrix R (matmul), then add C
T_.append(P_) #Add our transformed point P_ to our transformed list, T_
end
# T_ is now our transformed matrix.
</code></pre>
</div>
</div>
</div>
<br>
<divclass="card">
<divclass="card-body">
<center><b>Shear matrices</b></center>
\begin{align}
\text{Parallel to the y-axis, Vertical shear}\quad
\mathbf{X'} &= \begin{bmatrix}
1 & 0\\
m & 1
\end{bmatrix}\mathbf{X}\\
&= \begin{bmatrix}
x\\
mx+y
\end{bmatrix} \\\\
\text{Parallel to the x-axis, Horizontal shear}\quad
In this case we applied a vertical shear (parallel to the y-axis). Our x-values are the same, but our y-values have been transformed in a way that they match the line \(y'=mx+y\) (see the matrix representation).<br>
It has almost all of the properties required for our 2.5d rotation - we're only distorting the matrix on one axis and preserving the other. The only issue is that our transformed object will appear longer.<br>
<br>
In my case, I do not need to know the angle - I can use the gradient between the silo \(\mathbf{S}\) and target \(\mathbf{T}\).
Note that \(d\) is also the distance from the silo \(\mathbf{S}\) and target \(\mathbf{T}\)<br>
\(\mathbf{P_1}\) and \(\mathbf{P_2}\) are not the same as \(\mathbf{S}\) and \(\mathbf{T}\), because we've created these points with \(\begin{bmatrix}0\\0\end{bmatrix}\) as the origin, <b>not</b> \(\mathbf{S}\). We will translate all of the points later so that our starting point is \(\mathbf{S}\) after rotating.<br>
However, the distances are the same, so we might as well use \(\mathbf{S}\) and \(\mathbf{T}\) to calculate \(d\).
\node [label=below:{$\mathbf{P_1}$}] at (-6,1) {\textbullet};
\node [label=below:{$\mathbf{P_2}$}] at (-2,1) {\textbullet};
\node [label=below:{$\mathbf{P''_1}$}] at (2,1) {\textbullet};
\node [label=right:{$\mathbf{P''_2}$}] at (5.36656315,2.68328157) {\textbullet};
\end{tikzpicture}
</script></center>
The limitation of this technique is that we need to perform the rotation about \(\begin{bmatrix}0\\0\end{bmatrix}\), the origin. After this we can translate the rotated matrix to match the silo and target location.<br>
You can use homogeneous coordinates to achieve this (see the yellow box earlier), or programatically do it.<br>
<br>
We also have to solve one last issue with this method: it only works within the domain \(\left(\frac{\pi}{2}, -\frac{\pi}{2}\right)\).<br>
This is because the gradient can only describe so much information.<br>
For instance, the line \(f(x)=1\cdot x\).<br>
We cannot tell if the line is going from the top-right to bottom-left, or bottom-left to top-right because it describes both situations.<br>
We need to adjust the signs on the shear matrix according to the quadrant our target is in.
<pre><codeclass="python">import math
import numpy as np
def quad(A,B): #A is our origin/fix point, B is our other point.
if B[0] > A[0] and B[1] > A[1]:
return 1 #First quadrant
elif B[0] <A[0]andB[1]> A[1]:
return 2 #Second quadrant
elif B[0] <A[0]andB[1]<A[1]:
return 3 #Third quadrant
else:
return 4 #Fourth quadrant
#By elimination. We could do another if but it's unnecessary
# elif B[0] <A[0]andB[1]> A[1]:
def trajectory(distance, n):
# Here we create a list of points. n is the amount we create
# (higher n results in greater precision)
# Not going to include it here - uses bezier interpolation and stuff to create
# the illusion of a ballistic trajectory with gravity (not a simple quadratic function)
#
return points
S = np.array([10,4]) #Silo position vector
T = np.array([5204,954]) #Target position vector
d = np.linalg.norm(T - S) #Get the distance: d = ((Tx-Sx)^2+(Ty-Sy)^2)^(0.5)
m = (T[1]-S[1])/(T[0]-S[0]) #Gradient of line between target and silo.
X = trajectory(d, 50) #50 is a constant for n. only affects trajectory precision
#X now contains a 'flat trajectory', a list of points which have the correct
#distance but the wrong angle and offset.
#It does not intersect with the target T.
def shear(m, X):
q = quad(S,T) #Silo and target is passed to the quadrant finding function.
#q is the quadrant
if q == 1 or q == 4:
return np.array([[1,0],
[m,1]]) #shear matrix.
else:
return np.array([[-1,0],
[m,-1]]) #shear matrix, but for quadrants 2 and 3 (negative x).
# AN easier way to do this would be to just compare S[0] > T[0]. Forget about the quadrant stuff.
# because we only need to know if it's in the negative or positive x.
SHEAR = shear(m, X) #we get the shear matrix, which the function returns
P_ = np.matmul(SHEAR, X[(0,-1),]) #first, take a slice of the array X to obtain the first (P1)
# and last (P2) points. Then multiply this new 2x2 matrix
