Devlog: A Rotating Cube In Terminal (aka A deep Dive into Math, Code, and Chaos)


Hello everyone reading this thanks for your time. I am sure this will be worth the while. So I am planning on making this series about what I learn and what I develop and make as projects and share my insights along with all these. After all some of the best way to learn is by messing around and finding out.
“Fail Fast, Learn Faster”
This is something I try to live by. Trying out stuff so even if I fail I, still try to take away the learning. So, while trying out stuff I found a project I wanted to replicate. As you have read the title Its about making a cube made of ASCI character to be displayed in terminal and animate it so it looks like its rotating. Like not using any graphic engine or any tool like that but instead using just pure math, c++ and me trying not to throw my laptop out the window.
So first and foremost the citations or reference i was inspired by and that is this guy, So if you wanna look at coding process and see a more professional and a sane overview of this you should definitely check him out.
https://www.youtube.com/watch?v=p09i_hoFdd0&t=132s
But if you’re here for chaos, debugging despair and a sprinkle of insights, then you’re in the perfect spot.
The Actual Development (aka: “Where It All Went Sideways”)
So here’s what I started with:
A code space for working with c++
And most importantly a Cup of Coffee
First task? Figuring out the working of the reference code. seems simple, right?
Well turns out it wasn’t that easy. I had to revise through a math concept I used to hate in my high school era, TRIGONOMETRY and a bit of matrix. But ya figuring out the actual working of how a cube is projected in 2d plane that it looks realistic was pretty hard.
Well this turns out is a core concept in rendering graphics in games like how to present something 3D in a 2D screen and after lot of googling and tutorial and a lot and lot’s of math video lecture I figured it out. How projection works. So the next subsection how its works in short. :-]
How does for fucks sake Projection works?
Okay, so let’s try to understand it with out frying out brains.
Analogously projection can explained with like projecting a shadow of an object on an plane. its like you're holding a real cube in front of plane. That shadow is the projection. The cube is still a 3D object, but the shadow on the plane? It’s not a perfect replica, but it represents the cube’s shape and depth from a specific angle. The longer the distance, the weirder the shadow stretches.
That’s exactly what we’re doing with projection in our little terminal universe.
We're casting the "shadow" of every 3D point in our cube onto the 2D screen. But instead of sunlight, we're using math (which, for me,is a more terrifying force of nature). The farther a point is from the viewer, the smaller and more squashed it becomes — mimicking how things shrink into the background in the real world.
And if you are confused what happens when point over lap due to being in same line of view but one is the front face and other is back-face. Well just like shadows we simply don’t render it.
And if you like to find out more about this here are some of reference’s I have used:
https://www.youtube.com/watch?v=eoXn6nwV694
https://www.youtube.com/watch?v=U0_ONQQ5ZNM&t=201s
https://www.youtube.com/watch?v=kECiI8D6j7k
Now how do we rotate stuff ?
Well this part was not as nerve racking as the figuring out projection part after I understood the math part behind it. Mostly trigonometry and matrix is behind it. After working the math on the paper it got easier to imagine and visualize the end result more clearly.
So the idea is: each point of the cube has to be rotated around an axis (or all three axes if you're feeling chaotic like me). And to do that, you use rotation matrices.
I ended up writing using other equivalent functions: calculateX, calculateY and calculateZ to get the rotated coordinates. i did that so I test my doubt about being able to different rotation vector other than what was used in the reference video. Also to know if I have understood the working or not(spoiler alert! It did work and I did understand). And yes, I could’ve used a proper matrix structure, but this was just me and my coffee.
reference for this and I think this will suffice:
https://en.wikipedia.org/wiki/Rotation_matrix
Writing the CODE. . . .
Now this part. . . . is the fun part where I almost threw everything out of the window
Starting off, just understanding what the reference code was doing took more time than anticipated. At first glance it looks like only some math is used but who knew that some small amount of math is the back bone for rendering graphics like the projection logic and that damned trigonometry.
Now the technical side of the code, cause of this I now understand concept of buffer memory more clearly. So this code relies on buffer to store the frame before its being rendered out in the terminal like. the image is stored here before the displayed. It where the image us fully built first and then the completed image is rendered out in the terminal.
And using ASCI character to represent faces and using ASCI escape character to clear out the terminal is also something which I got to know because of this.
And after total of three days of mind-bending messing around I was able to make it work. It wasn’t like the reference one but that was given since I used whole different rotation matrix for calculating the rotation of a point.
Also after I have got a better grasp of c++ than I previously had. I am kinda happy about that too….
Also the code repo :
https://github.com/HyperLeafy/ASCII-Cube-Rotation-Simulation
Final Run:
Conclusion
So, yaa this project was quite a learning experience. It showed my how persistence and cups of coffee can take you a long way. They say, "The greatest teacher, failure is," and indeed, every frustrating bug, every moment of doubt, was a stepping stone towards clarity.
So, here’s to the chaos, the coffee, and the unexpected lessons. If you like the narrating style do considered to give a like. Any suggestion on narrating are also appreciated.
Subscribe to my newsletter
Read articles from Leafy directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
