Development

I’m a bit more than late for a second devlog but I figured there’s no better thing to call this. I originally made this blog for the purposes of short and sweet devlogs but my recent posts have been bit larger than what I originally intended. I’m hoping with this log to bring that focus back down to just that. Since my previous post, I’ve done a lot of fine tuning of the UI and functionality of the site. One I’m quite happy with was adding draggability to the inputs simialr to other software like Blender. It’s a lot more convenient than typing and allows you to set options easily using mouse only. ...

I recently finished a course in deep learning and wanted to took a look at a few ways I could apply my knowledge to. The idea the came to me was to create an ai music generation model and feed it into my old pianotypes app. Simple right! It’s all broken So I booted up my old, dusty, untouched, forgotten, delapidated, abused, ramshackled, repository, and lo and behold, I can’t get it to run. I tried updating packages, my nodeJS version, moving around code, but nothing worked. In fact, I think updating anything at all just made it worse. Mind you, this project has been mostly untouched for a couple years so it was prone to deprecated libaries and syntax that made it very difficult to remedy. At this point I’ve all but given up on trying to polish a giant heaping pile of rust. ...

I’ve been working on migrating my old PianoTypes project over from Vue to Svelte. So far the syntax has been much cleaner to use and has been an overall a great experience. My first and primary pain point thus far has been implementing a global reactive state for the piano. The Problem In Vue, it’s possible to add a reactive wrapper to any object. In my case, I had created a class containing all of the piano data and property methods so all I had to do was wrap this class in the wrapper and state is maintained across all instances of my piano class. ...

While writing this blog, I’ve been constantly finding a need to include various JavaScript libraries such as graphics libraries or text processors. I love the simplicity of Markdown but sometimes it can be really helpful to include more meaningful content and visuals to better illustrate a certain topic or idea. My most recent endeavor was adding an easy way to render shaders within each of posts which turned out to be a more painful task than I originally anticipated. Here, I hope to document some of my process of importing modules and hopefully make it easier for whoever is reading to import modules into their own Hugo blog. ...

Intuition of 3x3Matrix Transformations Rotations can be achieved by locking the desired axes of rotation and transforming the rest of the axes by \(sin\) and \(cos\). 3x3 matrices can be used to bend the coordinate space in 3 dimensions, effectively allowing any desired transformations to objects in that space. As the coordinate space is being transformed, it’s helpful breaking up the matrix into its unit vectors $$ \vec{a} = x\begin{bmatrix}1\\0\\0\end{bmatrix} + y\begin{bmatrix}0\\1\\0\end{bmatrix} + z\begin{bmatrix}0\\0\\1\end{bmatrix} $$ ...

When describing rotations of an object, the typical way would be through linear algebra and trigonometry. However, similarly to how complex numbers can be used to describe rotations in 2D, quaternions allow efficient and more pragmatic methods describing rotations in 3D. How It’s Done With Trigonometry Depending on the framework or software using, a lot of the work is already done for you with API available to you to perform rotations on shapes. But for a simple point in space rotating in about an origin, what would that look like? ...

I followed this tutorial https://www.youtube.com/watch?v=bXNFxQpp2qk&list=PLwyUzJb_FNeQrIxCEjj5AMPwawsw5beAy&index=3 Adding a 3D Character Animation States Unity has it’s own skeleton rigging system called Mecanim. To add animations to a character, you first need to add an animator component to your character model and then create a character controller object and link it to the component. Double clicking the controller will then open up a panel to handle state transitions between animations. There you can add each of the states you want to transition your model to and from. I set idle to be the default state which is self-explanatory. From there, I connect transition arrows between each of the states and set a condition for each of the transitions to occur. ...

When using a programming engine or framework, one of the things I get stuck on the most is how to organize all the directories and files for a project. Every technology has its own separate ethos when it comes to the separation of concerns. It’s such an important part in order to not have a growing project becoming a nightmare for other’s to work with, or even yourself after spending some time away from it. ...