QuantumRohan the Quantentity

The Button is working! It’s finally done. Next I’ll genuinely do game logic.
I can make the button do anything with a function in its constructor, which basically means I can have it change variables and stuff when you click it. This can make a lot of menus and, what I’m planning, it’ll make child classes like Checkbox or TextField. That way, a lot of stuff can be done in a menu.
Sorry for the short devlog, I’m really tired.

LET’S GO, I GOT UI DISPLAY DONE!!!

I finally fixed the shader issues by just… going with my original idea and including a UI flag as a GL uniform. From there, I can just change the code to do different things for UI.

So, yeah! Now, I’ll quickly make button and UI click detection, then I’ll make menus! After that, I’ll do game logic.

Look, I’ve made a scene!!! I think this is really cool-looking now, but the UI is still not camera-based. I swear I’ll do it tomorrow. It won’t take long, I’m sure, I just keep getting distracted with other changes. That’s a thing I need to stop doing since I only have a week left to work on this project before shipping.
I had to do a lot of debug to get everything working perfectly. Included is a screenshot of a successful console.log call.

But… I have sad news… everyone say goodbye to the Link Cube.

OK! Got buttons working visually!
Now I’m going to make them stick to the camera, introduce cam-coordinates and all that stuff. Yay! Sorry for the wait.

Quick change:
I’ve changed the inheritance of UI classes; now there’s a base UIObject class that contains most of the important stuff. Also, Button is now inherited from Panel rather than from Text.

Now the text can be red! When I get back home tonight, I’ll finish the UI by sticking it to the camera. Bye!

I’ve begun on the UI !
So far, I’ve made classes for Panels, Text, and Buttons. Currently, the buttons are not working as you can see in the corner of the video. But the text and the panels are working amazingly!
Now, my plan was to have these stick to the camera with a container-like UI class, but this testing is making me realize that these objects can be used for way more than I first intended.

You can see a very comical failed test run in the second screenshot, where it looks like I’ve recreated Missingno or something 😭. But yeah, this stuff is going well and I expect to be done with UI once I hook it up to the camera and make a menu or two.

Wow! I just wasted a lot of time!!!

So, I was basically trying to make a function that sorted vertices by angle around the center of a polygon… it did not work out. I don’t know if my math was wrong, or if something else somewhere else was wrong, but I wasted a hell of a lot of time trying to fix it before ultimately commenting the whole thing out and working on something else.

And that “something else” is this!! I have created a new PolygonGroup class that lets me make more complicated shapes like a sphere by just cobbling together a whole bunch of little rectangles. There it is in the middle of the tic-tac-toe board. It looks very round, doesn’t it?
Next, I’m going to make UI, which is important. I think it’ll be easy, too, as long as I find a way to add text. I suppose I could make my own font and load it in like that. That sounds like fun, actually.

Anyway, my idea for the UI is that they will just be textured rectangles sitting right up against the camera. I suppose that’s how all UI works, but adding it to my game will be a little bit of work making sure it always stays with the camera, since everything is pretty global right now.

I’m trying to make my shape classes better for the future by sorting vertices by angle… It has not gone well with the vertices so far, as you can see.
I did successfully fix the sizing of the Xs and Os, though. Once I get this stupid thing done, I’m pretty sure that almost everything else, like UI, won’t take long. I’m trying to lock in 😭

Linear Algebra is killing me rn

I’ve added Xs!!! As you can see, when you click on a tile, an X is added on top.
This means I basically have the following to do now:

• Turn logic
• Winning logic
• Menus and modes
• More cool maps!
• Anything else I forgot about

So, I’ve been doing some polishing up of the code. I’ve been adding comments to things and making more helpful functions. I tried adding the placing of Xs and Os, which, as you can see, did not go so well so far. That’s just what you get the first time testing a complicated function. And, unsurprisingly, it doesn’t work.

So my next mission is debugging that because it’s very important for placing the… game pieces? Shapes? …it’s important for placing the tics, tacs, and toes.

So, before I did this big change to how I rendered stuff, I had the polygons of the wheel turn white when hovered over. To re-implement this, I thought I was clever when I just added a color that had reciprocal components to the normal one.
Then I realized that I forgot about… the number 0. You can’t really reciprocate that. So I needed a different solution. And that solution was to change my fragment shader!

Now, the material color overrides the polygon color. This makes it so that I can turn stuff white (or any other color) COMPLETELY while keeping the original color saved under the hood.
This was just to recreate a testing effect, but it’ll probably be useful for something.

The way in which I detect if there IS a color to override the vertex color is to see if its R component is positive. That might sound crazy, but here’s why. I added a default color to my COLORS object called COLORS.NONE. Its components are all -1, which means it won’t affect the vertex color (because of the if statement).
If that’s a… stupid way to do it, please tell me, but it works well !

The rendering of all of the objects and stuff has been simplified now A TON and it’ll be super easy to make stuff now. Which means I can actually start making this into a GAME. Which is, you know… kinda what this whole thing was for…

So, yeah, the next thing I’m going to do is adding Xs and Os!! I’m super excited because it’ll be interesting to dynamically create rendering objects and add them to the list, which my new system will make VERY easy.
After that will be game logic, and after that will be UI, and after THAT… uh… just make cool maps, I guess?

Just an update, since I’ve taken a TON of time on this addition…
I’m completely changing the rendering code. It was honestly really bad, recreating the whole scene every frame… So I made rendering classes! You can see them in the images below.

The primary image is a screenshot of a… successful test of the textures. Well, only the textures. The colors had quit for some reason. Also the square did too.
(Yeah, that’s my placeholder sprite)

I tried making a better, kinda optimizing or something, combineGeometries function, but it didn’t work AT ALL and I decided that I’d give up on that for now.

Time to add pronouns! These are pretty important for making sentences, of course. I had a bit of trouble deciding how to implement them, but I eventually settled on a reliable solution: overscoping. Or at least that’s what I like to call it.
So, I went with a Latin-y approach that is so broad it should cover any pronoun system by just not using certain parts of it. The third screenshot shows that structure, for one pronoun.

Not every possible case is there (we’re missing genitive and ablative, for two), but, of course, most languages don’t have all of them. That’s why I called it overscoping.

Let me explain the terminology:

• Actor: the number and narrative position of the speaker (“1s” for first-person singular).
• Agreement: The grammatical gender of the pronoun. In this case it is “x” to denote that the agreement is independent of the pronoun, but for other pronouns it takes on strings like “m” or “f”.
• nom: Short for nominative, also known as the subject.
• acc: Short for accusative, also known as the direct object.
• dat: Short for dative also known as the indirect object.
• pos: Short for possessive. This object contains sub-objects for the possessive adjective and the possessive object. These, in many languages, have to be conjugated by agreement, so those must be included in there.

I also added the full reference. What this does is it just mirrors the ENTIRE conjugation of another verb, not just the ending. This would be used when you need to copy a structure instead of a set of endings. For example, in passé composé, the helper verb “avoir” stays the same for every verb; the only thing that changes per-verb is the past participle. So, instead of repeating the definition everywhere, do the fourth screenshot in ONE conjugator object.

I added a ton of verb and pronoun data!!! It took me a while 😭
For the last time, this is mostly for testing features, but the data will stay around because why waste that work?

Anyway, take a look at this, in the fifth screenshot.
I also added "vouloir", "pouvoir", and "sortir".

As you can probably see, I also added new conjugator objects!
Yeah, I also added a new field to the reference objects!!! It’s so exciting to add stuff like this. It’s called "input", and it tells the reference what to conjugate with (pronoun or agreement). I realized that some conjugations in language are intransitive, so I made a very quick fix for that.

Thanks for reading all of that… Next, I’m going to work on FULL sentence-making, which will be kinda easy, I’m thinking. And hoping 😭
See you next time!

Oops, I forgot about posting devlogs here 😭
I have made devlogs in the github though, please look at those if you’re interested.

Anyway, I’ve done a lot of things! I’ve added a lot of ways of referencing: ending references, full references, and straight up string references, which just replace the object in a conjugator.
Then, I added pronouns and agreements, which lets you conjguate things with those instead of with the actor (1st person singular, 2nd person plural, etc.).

You can see in the second screenshot that the agreement (fp) makes the verb ‘venu’ into ‘venues’. I know that it’s kinda funny to see ‘suis venues’ because that could never even occur in speech, but it’s an example, so who cares.
Also, I’m only using all of this French because I know it enough to test. Other people will be able to add their own language data, and I’m going to make a tutorial document! I hope people contribute.

Some data would look like the third screenshot. There, you can see the references and the normal data. This screenshot shows a conjugator object, which would be referenced in specific verbs’ conjugations. It can be as simple as a one-line verb entry if it’s regular.

I fixed my Polygon class!
I changed the algorithm for getting vertex order to use alternating triangles rather than fan triangles. This solves the issue of concave polygons, so now these cool circle bits show up correctly! I liked how I coded it, so I included a screenshot of the loop. Isn’t that awesome? I think it’s awesome.

Secondly, I started experimenting with shaders. I used some randomness to make a shader that makes everything shake a little. Or a lot, if you want.
I stole a randomizer function from online and passed in a random vector from my Javascript. The code is shown in one of the screenshots below. I included videos for the following:

• A small bit of shaking to emulate a sort of hand-drawn style
• A little shaking, maybe to make things seem tense
• A LOT OF SH-SHAKING

Side Note:
I also fixed the coloring on the board there, as you can probably see. Minor thing, but it’s cool.
Bye!

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 made the basic HTML and CSS for two main pages:
Sentence translation and verb conjugation.

I’m thinking of the best way to store data for translation, and I’ll implement something 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.