Posts

Dot Product Find the interior angle between two vectors $$ A\cdot B = |A||B|cos\theta $$ $$ \theta = \arccos(\dfrac{A\cdot B}{|A||B|}) $$ $$ where\ A\cdot B = A_x \times A_y + B_x \times B_y $$ Cross Product Get perpendicular vector from two vectors Find area created by two vectors (for 2D, parallelogram area, for 3D, parallelepiped area) This is the magnitude of perpendicular vector Matrix Multiplication There is a formula for calculating the resultant matrix from a matrix multiplication. ...

What Matters The dot product has a bunch of properties when you use it’s raw scalar output but honestly most of the times you will use the dot product is to find the angle between two vectors by rearranging to equation as follows $$ A\cdot B = |A||B|cos\theta $$ $$ \theta = \arccos(\dfrac{A\cdot B}{|A||B|}) $$ $$ where\ A\cdot B = A_x \times A_y + B_x \times B_y $$ In games, this equation is used exhaustively to calculate light projections and field of view. ...

Two’s Complement Representation Why We Use It In c++, signed integers are represented in two’s complement notation. Before I get to how that notation works, I want to explain why we use it. Comparing both representations, -1 would look like this // Decimal 4294967295 // Binary Signed Int 10000000000000000000000000000001 // Two's Complement Signed Int 11111111111111111111111111111111 The normal signed binary representation is pretty easily understood if you know what a sign bit is. You just have the typical binary for 1 with the most significant bit being the sign bit to indicate that it’s negative. Then why the heck do we use two’s complement instead? Isn’t it just more confusing? ...

I’m on my second week and to my surprise, all my anxieties and insecurities subsided really quickly. It had been while since I’ve had a proper schedule or talk to people in person on a frequent basis but I’m glad at how smoothly I’ve been able to reacclimate and I’ve been feeling a lot happier as a result. Anyways so far, it’s just been a lot of intro talk and fundamentals of concepts I’ve already learned before. There are some teasers of new and interesting content up to come like the graphics pipeline but we’ve yet to wok directly with it. ...

Today is my first official day of class attending the Advanced Programming program at Sheridan College. To commemorate this, I’ve reorganized my whole directory structure for this blog to be organized by year and month rather than sub topics. I’ve been finding the subtopic folders to be growing far to fast (particularly the dev folder) to keep posting all in one place. This way, my working directory is ever only so large for each month and I’m also relieved of the duty of figuring out which folder I should be making my post in. I mentioned before how I feel too inclined to make each blog post substantial and with purpose rather than just posting freely. I think uncategorizing each post will make it easier to just post updates and devlogs as well. ...

I finally put a start into replacing the current ribbon visualizer implementation with an HTML canvas drawn one. Why Bother? To reiterate, the current visualizers works by filling the screen with vertical divs that are positioned identically to the piano keys so each key essentially has a identically width column above it. I then spawn divs inside each lane that act as each of the ribbons. The extending animation works by settings each ribbon to the max size of the lane and running a scaleY transition from 0 to 1 to mimic the ribbon growing from nothing. Once the ribbon is released, I then query the DOM object for it’s current length at that moment of the transition and then cancel the rest of the transition and manually set the div to that size. I also add a new transition that translates the ribbon from the bottom of the view until it’s offscreen where it’s then removed from the DOM. ...

I’ve been working on putting together a layered parallax scene as per https://www.youtube.com/watch?v=XaiYKkxvrFM. I’m a good ways there writing most of the code on my own. I’ve made series of repeating trees across a sloping hill and it’s time for me to start layering them on top with a for loop. In the tutorial, he wrote all of the shape functions to return vec4 so they include the alpha channel in addition to the colours. ...

While I was working on writing simple shape patterns in GLSL, I ended up with an interesting conundrum. I fell into the pattern of creating shapes by closing in each side of the shape with a smoothstep in the following form. smoothstep(-blur, +blur, uv.x); In this case, this creates a vertical edge where the left side is 0 and the right side is 1. I then do the same thing for the rest of the side of the shape, until I enclose it so that all values inside the shape are 1 and everywhere else remains 0. For example, a square. ...

Not too much to report. I had the realization that I can pause the scheduled notes by suspending the AudioContext since they depend on the context’s timer. It’d be pretty easy to add pause functionality. The only caveat is that if I pause the AudioContext, than all sound from the piano is also paused. Perhaps I could code in a notice to resume the timer given the user inputs a key press but I don’t want to resume the context on every key press. Maybe I could write some code to resume on the first user input on pause. ...

A couple years ago I made a little extension for chrome to organize and sort tabs by url domains. It was really quick and crudely designed and since I wasn’t even a Chrome user, I didn’t think too much about improving it. Fast forward to now, I decided to do exactly that. Looking at old code Actually the code was mostly better than I expected, other than some variable naming and redundant lines, I didn’t see much need to rewrite it. The html on the other hand needed some tuning and was pretty messily put together. There was lot’s of redundant styling and a disappaering timeout on the buttons that I wonder why I even thought was a good idea in the first place. ...