garstka.dev

Category: Projects

  • Cycle Of Steel

    You can play the web exported version here:

    https://garstka.dev/static/cycle_of_steel/index.html

    Or try it out on steam:

    https://store.steampowered.com/app/3136590/Cycle_of_Steel

    This was my capstone project for my senior year at DePaul and developed in a group.

    It features rogue-like gameplay with pixel art graphics in a dystopian future where you have to battle through robots.

    It was developed in unity using built-in tilemap features, and a relatively simple random dungeon generation system, where it tried to generate more difficult rooms the further you are from the center. Each dungeon room was designed, but the order you encounter them in and the loot you obtain is random.

    I may write more about the mechanics at some point, or better yet cycle of steel 2?

  • Canvas Renderer

    My weird first renderer using a 2D canvas element to draw primitives.

    https://garstka.dev/static/canvas_renderer/index.html

    So first of all, this is really not the right way to draw things, webgl exists, and I actually have another project here. But this is dear to my heart because it was an old project I attempted back in high school and it really almost worked in so many ways. It was at the time the closest I could get to truly coding something from scratch, even if I didn’t realize at the time that canvas was anywhere near low level graphics. But nevertheless I learned a LOT about graphics programming on my hunt for visualizing 3D cubes (I should eventually link even older prototypes I have which are even jankier).

    This is an updated version of that initial project, with the same… mechanics for 3d rendering but everything surrounding it cleaned up much nicer. The webgl has even more modern patterns but this already is way cleaner in my opinion.

    So for how it works, essentially this is rendering isometric and drawing full triangles ordered by the centroid… there is no depth buffer or anything, two triangles cannot intersect. This surprisingly works pretty well given that massive limitation, concave low poly shapes struggle the most from this, but with small enough polys the centroid is a pretty good estimate for depth and you just get some visual artifacting around the edges while rotating.

    Because this is isometric, we can skip most of the projection and matrix math that would normally be done for 3D affairs and just use the x and y values:

    JavaScript
    const x1 = (v1.x * S) + transform.x; 
const y1 = (v1.y * S) + transform.y; 
const x2 = (v2.x * S) + transform.x; 
const y2 = (v2.y * S) + transform.y; 
const x3 = (v3.x * S) + transform.x; 
const y3 = (v3.y * S) + transform.y; 
drawTriangle(x1, y1, x2, y2, x3, y3, shaded_color);


    Here I was applying some scaling and translation, although I would write this differently even now looking back at it.

    Maybe I’ll write more details some other time but that’s all I got on my mind for now.