Tic-Tac-Woah!

I’ve just added mouse controls to the camera. You can now move the camera by holding right-click and dragging, which works just like WASD. Scrolling zooms in and out, although the scroll is a little bit choppy.
The video doesn’t really make it clear that I’m controlling the camera with my mouse, but I do make the mouse disappear while you drag it, which adds to the effect.

I FINISHED THE CAMERA!!!
It all works now: orbiting, setting a position to look to, and other stuff. I had to look up a lot of math and details for it, but I implemented it and now it works!
Here’s a clip of the camera orbiting the center and NOT experiencing gimbal lock. The thing is, I tried in like 3 different, convoluted ways to avoid the locking, but in the end I just clamped the value to be a LITTLE less than π and a LITTLE more than 0. Yeah, it was lame but it works.

Also, you probably noticed this, the tic-tac-toe board there is a bit buggy. Yeah, my polygons are NOT the best when it comes to concavity. I’m going to try a rewrite of the face logic to fix that, so hopefully they’ll stop z-fighting soon.

I finished the raycasting from the camera!!!
It took a lot of fixes and many a disappointed return to Wikipedia pages about linear algebra, but it is done! Now, every polygon knows whether it’s being pointed at or not. Isn’t that great?

Now, basically every major part of the graphics, interaction, and geometry of the game is done. From here on out, I just have to… make Tic-Tac-Toe! On arbitrary 2D surfaces… with arbitrary shapes…

Shouldn’t be… too hard, right?

I made a circle!!!

Using all of my polygon tools, I easily made a circle with a for loop and some trigonometry. It looks nice spinning around, and the color was easy to add because of my Color class.
I did have one issue with the vertexCount in my function for drawing the scene, but I just added an auto-assigned vertexCount so that I won’t have to worry about it.

Writing this now, I think that maybe I should install a maximum number of vertices… I’ll do that next so that I don’t get surprise crashes or performance issues from accidental vertex overload.

Also, I’m currently working on a Camera and Input class! This is all so that I can easily calculate and get raycasts from the camera using the mouse position on the canvas. It’ll be necessary for playing a game on a surface to know which tile the player is mousing over.

WELL I MADE IT WORK!

The cube is correct now because I fixed an error with the order of the vertices of a quadrilateral when it gets created. I’ve included the code to make this all work, which is SUPER SMALL in the grand scheme of things.

Sure, the cube-making part is kind of complex, but it’s way easier to think about making parallelogram than typing in all of the vertices individually. This also allows for PROGRAMMATICAL GENERATION OF SHAPES!!! I can hook this code up to some sort of circle generator and then easily be able to make colored circle-slices or annuli or whatever.

I have written A TON of code for Triangles and Polygons and stuff to make it easier to make shapes and visuals with WebGL. I’ve got functions for checking if a ray intersects a triangle, generating vertex arrays from a polygon, and other stuff that will be very useful. I’m basically creating a whole library for this stuff, although it’s not too big.
Anyway, what I’ve done now is made a rotating cube with only _ lines of code in the main functions! That will make things SO easy in the future.
…I hope.

In my first test… yeah, it’s not looking good; that’s supposed to be a cube.
I’ll fix it, though.

I created a color system which makes it easy to add and manage colors for vertices. With all of my color functions and stuff in a different file, I was able to make this pulsing square in just 4 lines and with a much more easily changeable architecture.
My next goal is to make some classes and functions for polygons and improve the architecture for displaying them. My next devlog will have a 3D shape!

I finished the simple square WebGL tutorial from MDN Web Docs!
I’ll have to learn WebGL, so this is a good start. From here on, I plan to figure things out myself and generalize for making my game.