WebGL Shader and RC/RL Circuits Overlay
To finish up with the Dark Mode I started implementing in January, I delved into GLSL (a C derivative) and WebGL to build proper Fragment and Vertex Shaders for application on textures. I now have inversion of dark/white colors while respecting transparency and leaving RGB values outside of gray tones untouched- just look for yourself:
I also did a lot of clean-up, restructuring and polishing on CSS and interface design. Here’s an excerpt of just 2 weeks of GIT commits:
Implementing Steam Cloud and Dark Mode
It has been a busy January, during which I accomplished a great deal on the WTF-Model.
Here’s an overview of the updates:
Keyboard Shortcuts I integrated keyboard shortcuts and developed a dynamic, language-adjusting and mobile-friendly mouse-over overlay that fades in/out while hovering the Menu button.
Dark Mode Implementation Dark Mode was a major update, requiring extensive manual fine-tuning and coding in addition to basic CSS optimizations. If the user has App-DarkMode enabled in Windows settings, it will be automatically detected and applied as the default.
Fabric.js, YAML Pipeline & Model Category
I recently posted about the TypeScript changes, but a lot more has happened over the last month. I wasn’t really able to post a full summary until today, so here’s a major recap.
First off, I implemented a new drawing functionality with Fabric.js. This allows users to draw on the screen when Caps is pressed or when the Presentation Mode is accessed. Holding Alt+Shift draws rectangles, while the Mouse Wheel changes the color.
Typescript: Partial Migration, Book & Exam
For years, I worked exclusively with vanilla JavaScript—no React, no Vue, no Angular. I know about all of these frameworks, but I never had the opportunity to work with them. Angular, in particular, has bugged me because it has recently become the bread and butter of frontend development for full-stack developers. Angular is heavily dependent on TypeScript, so what better use of my free time and vacation than to dive into that?
New: Visual Scope Identifier
Yesterday, I added visual identifiers to better identify the currently selected Scope:
One continuous line for the Local Scope… …and a point-based circle for the Global Scope: Both markers resize and adjust position according to the base vortex movements - so it looks like one homogeneous part. I thought this would be a handy and useful visual clue.
After implementing that, I also redesigned the former Perspective icons that are now labeled as Scope: