3D Illusion in 2D Space. Simulation in C++ ImGui

The idea discuss in the following article is simple, however, the solution can be a bit tricky. I decide to draw it in 2D space a cube and perform the rotation around X, Y, and (Z) axes. This is a common illusion trick that is often used across different domains. This approach can is also applicable in gaming computer vision to receive the 3D effect of scenes or while rendering

There is, of course, true that we do not have axis Z in the 2D space, however, our illusion is that axis Z is perpendicular to the screen (red dot, see below where I depicted the results of the simulation). The dot is also considered as a reference point for 8 existing cube vertexes that rotate around.
The solution for the idea (map 3D to 2D) is to apply rotation matrices (for X, Y, and Z) around a point other than the origin. In our case, we rotate all 8 vertex around the “center” — red dot inside the cube.
There is a common standard in computer graphics that we operate in a right-handed Cartesian coordinate system.

Right-handed coordinative system (by author)

The implementation of the solution I deployed in C++ with the visualization in ImGui. The introduction to the C++ ImGui and information on how to compile and build programs you will find in one of my previous articles.

The source code you will find on my GitHub.

Applied approach

Introduction the article gives you some intuition on how to achieve a 3D effect (illusion) in 2D space. Generally, we have to apply the rotations (for all vertexes) around the center of the cube (red dot). We use the formula. For each coordination, we apply the first translation back to the origin, then we rotate around the axis of interest and translate again to the original position.

The formula can be expressed by following the matrix equation.

where P’ is the position after rotation operation, the R matrix of rotation, and the T matrix of translation.

Since we display our computations imGuithe right-handed coordinate system is applicable. The type of coordinative system affects the rule of rotation which has to be kept. We rotate first around axis Y, then axis X, and at the end, we rotate around axis Z.

Simulations

The simulation of discussed implementation can be seen below.

Illusion effect of 3D movement in 2D (by author)

There is also a flag SIMULATION. If set to false, you can control rotations using sliders.

Manual control of cube rotation (by author)

Thank you for reading.