mdsvex.config.js

@@ -3,46 +3,6 @@ import rehype_katex from 'rehype-katex';
 import katex from 'katex';
 import visit from 'unist-util-visit';
 
-const gruvboxColorMap = {
-	red: '#fb4934',
-	green: '#98971a',
-	yellow: '#fabd2f',
-	blue: '#458588',
-	purple: '#d3869b',
-	cyan: '#8ec07c',
-	orange: '#fe8019',
-	black: '#282828',
-	white: '#ebdbb2',
-	gray: '#a89984'
-};
-
-const override_katex_colors = () => (tree) => {
-	visit(tree, 'element', (node) => {
-		if (node.tagName === 'span' && node.properties?.className?.includes('katex')) {
-			removeInlineColors(node);
-		}
-	});
-};
-
-function removeInlineColors(node) {
-	if (node.properties?.style && typeof node.properties.style === 'string') {
-		// Split style string into individual declarations
-		const styles = node.properties.style.split(';').map(s => s.trim()).filter(Boolean);
-		const newStyles = styles.map(style => {
-			const [key, value] = style.split(':').map(s => s.trim());
-			if (key === 'color' && gruvboxColorMap[value]) {
-				return `color: ${gruvboxColorMap[value]}`;
-			}
-			return `${key}: ${value}`;
-		});
-		node.properties.style = newStyles.join('; ');
-	}
-
-	if (node.children) {
-		node.children.forEach(removeInlineColors);
-	}
-}
-
 const correct_hast_tree = () => (tree) => {
 	visit(tree, 'text', (node) => {
 		if (node.value.trim().startsWith('<')) {
@@ -54,7 +14,7 @@ const correct_hast_tree = () => (tree) => {
 const katex_blocks = () => (tree) => {
 	visit(tree, 'code', (node) => {
 		if (node.lang === 'math') {
-			let str = katex.renderToString(node.value, {
+			const str = katex.renderToString(node.value, {
 				displayMode: true,
 				leqno: false,
 				fleqn: false,
@@ -63,16 +23,9 @@ const katex_blocks = () => (tree) => {
 				strict: 'warn',
 				output: 'htmlAndMathml',
 				trust: false,
-				macros: {
+				macros: { '\\f': '#1f(#2)' }
-					'\\f': '#1f(#2)'
-				}
 			});
 
-			for (const [name, gruvColor] of Object.entries(gruvboxColorMap)) {
-				const regex = new RegExp(`(style="[^"]*)color:\\s*${name}\\b`, 'g');
-				str = str.replace(regex, `$1color: ${gruvColor}`);
-			}
-
 			node.type = 'raw';
 			node.value = '{@html `' + str + '`}';
 		}
@@ -81,12 +34,12 @@ const katex_blocks = () => (tree) => {
 
 export const mdsvex_config = {
 	extensions: ['.md', '.svx'],
-	layout: './src/routes/articles/Layout.svelte',
+    layout: "./src/routes/articles/Layout.svelte",
 
 	smartypants: {
 		dashes: 'oldschool'
 	},
 
 	remarkPlugins: [math, katex_blocks],
-	rehypePlugins: [correct_hast_tree, rehype_katex, override_katex_colors]
+	rehypePlugins: [correct_hast_tree, rehype_katex]
 };

src/routes/articles/Tip.svelte

@@ -11,11 +11,11 @@
 	.tooltip {
 		position: relative;
 		display: inline-block;
-
+		
-		font-weight: 600;
+        font-weight: 600;
-		font-style: italic;
+        font-style: italic;
-		color: #fabd2f;
+        color: #fabd2f;
-		border-bottom: 1px dotted #fe8019;
+        border-bottom: 1px dotted  #fe8019;
 	}
 
 	/* Tooltip text */
@@ -25,14 +25,14 @@
 		max-width: 60ch;
 		min-width: 60ch;
 		margin-left: -30ch; /* Use half of the width (120/2 = 60), to center the tooltip */
-		margin-top: 0.5em;
+        margin-top: .5em;
 
-		background-color: #282828f5;
+		background-color: #282828ea;
 		text-wrap-mode: wrap;
 		text-align: justify;
-		padding: 1em;
+        padding: 1em;
 		border-radius: 6px;
-		border: 1px solid #fe8019;
+        border: 1px solid #fe8019;
 
 		top: 100%;
 		left: 50%;
@@ -47,7 +47,7 @@
 		visibility: visible;
 	}
 
-	.tooltip:hover {
+    .tooltip:hover {
-		color: #fe8019;
+        color: #fe8019;
-	}
+    }
 </style>

src/routes/articles/the-graphics-pipeline/geometry-processing/+page.svx

@@ -8,10 +8,7 @@ import Image from "../../Image.svelte"
 import Note from "../../Note.svelte"
 import Tip from "../../Tip.svelte"
 
-let a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z;
+let i, red,j,green;
-let A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U, V, W, X, Y, Z;
-let red, green, yellow, blue, purple, cyan, orange, black, white, gray, color;
-
 </script>
 
 Ever wondered how games put all that gore on your display? All that beauty is brought into life by
@@ -30,7 +27,7 @@ But why exactly **4-parts**?
 
 Like any pipeline, the **graphics pipeline** is made up of several **stages**, 
 each of which can be a mini-pipeline in itself or even parallelized.
-Each stage takes some **input** (data and configuration) to generate some **output** data for the next stage.
+Each stage takes some input (data and configuration) to generate some output data for the next stage.
 
 <Note title="High level breakdown of the graphics pipeline", type="diagram">
 
@@ -468,7 +465,7 @@ your time** :)
 
 ## Linear Algebra --- Vectors
 
-**Vectors** are the **fundamental** building blocks of **linear algebra**. And we're going to get
+**Vectors** are the **fundamental** building blocks of the linear algebra. And we're going to get
 really familiar with them :) But what is a **vector** anyways? As all things in life, it depends.
 
 For a **physicist**, vectors are **arrows pointing in space**, and what defines them is their **length** (or **magnitude**)
@@ -493,114 +490,38 @@ to be in the simple world of a computer scientist:
 But **mathematically** speaking, vectors are a lot more **abstract**.
 Virtually **any** representation of **vectors** (which is called a **vector-space**) is valid as long as they follow a set of **axioms**. 
 It doesn't matter if you think of them as **arrows in space** that happen to have a **numeric representation**,
-or as a **list of numbers** that happen to have a cute **geometric interpretation**. 
+or as a **list of numbers** that happen to have a cute **geometric interpretation** (or even certain mathmatical **functions**). 
-As long the <Tip text="axioms of vector spaces"> <p>A **real vector space** is a set X with a special element 0, and three operations
+As long the [aximos of vector spaces](https://www.math.ucla.edu/~tao/resource/general/121.1.00s/vector_axioms.html) apply to them, they're vectors.
 
-- **Addition**: Given two elements x, y in X, one can form the sum x+y, which is also an element of X.
+However, we won't go into such axioms as we're not interested in **abstract** thinking here.
-
+We're aiming to do something **concrete** like **linear transformations** of a set of vertices (models). 
-- **Inverse**: Given an element x in X, one can form the inverse -x, which is also an element of X.
-
-- **Scalar multiplication**: Given an element x in X and a real number c, one can form the product cx, which is also an element of X.
-
-These operations must satisfy the following axioms: 
-
-* **Additive axioms**. For every x,y,z in X, we have
-    - x+y = y+x.
-    - (x+y)+z = x+(y+z).
-    - 0+x = x+0 = x.
-    - (-x) + x = x + (-x) = 0.
-
-* **Multiplicative axioms**. For every x in X and real numbers c,d, we have
-    - 0x = 0
-    - 1x = x
-    - (cd)x = c(dx)
-
-* **Distributive axioms**. For every x,y in X and real numbers c,d, we have
-    - c(x+y) = cx + cy.
-    - (c+d)x = cx +dx.      
-
-
-[source](https://www.math.ucla.edu/~tao/resource/general/121.1.00s/vector_axioms.html)
-
-</Tip> apply to them, they're vectors.
-
-<Note type="math", title="Mathmatician">
-
-<br/>
-<br/>
-
-```math
-\bar{v} = \begin{pmatrix} \color{red}x \\ \color{green}y \\ \color{blue}z \\ \vdots \end{pmatrix}
-```
-
-</Note>
-
-From such **abstraction**, we achieve **generalization**. Instead of solving a specific problem, mathematicians provide us tools (operations) 
-that can be useful in many fields. However! we won't go into such axioms as we're not interested in **abstract** thinking here.
-We're aiming to do something **concrete** **linear transformation** of a set of vertices (models). 
 So it would be ideal for us to think of them like this:
 
-- A vector describes a series of steps for performing a **transformation** in space.
+- A vector describes a series of steps to perform a **transformation** in space.
-- A vector has 2 properties: **direction** and **magntitude**.
+- A vector has the properties: **direction** and **magntitude**.
-- If its **magntitude** is exactly **1**, then it only describes a **direction** in space and is called a **unit vector**.
+- If its **magntitude** is exactly **1**, then it describes a **direction** in space and is called a **unit vector**.
 
-Let's go over these points one by one. We'll focus mostly on **2-dimensional** vectors for simplicity and easier
+Let's go over these points one by one.
-visualization, but same principles easily extend to **3-dimensions**.
 
-Given the vector $\bar{V}$; the first element ($\color{red}\bar{V}_{x}$) tells us how much to move **horizontally**---along the $\color{red}x$-axis;
+**Basis Vector**
-and the second element ($\color{green}\bar{V}_{y}$) tells us how much to move **vertically**---along the $\color{green}y$-axis:
-
-<Note type="image", title="">
-
-**Insert image here**
-
-$\color{red}\bar{V}_{x}$: move $-5$ units parallel to the $\color{red}x$-axis (left)
-
-$\color{green}\bar{V}_{y}$: move $+3$ units parallel to the $\color{green}y$-axis (up)
-
-</Note>
-
-As you can see, it's just elementary school number line, but extended into a higher dimension; very simple.
-
-If you paid close attention, you can see that there's an imaginary **triangle** formed there! $\color{red}\bar{V}_{x}$ as the **adjacent** side,
-$\color{green}\bar{V}_{y}$ as the **oppoosite** side and the $\bar{V}$ itself as the **hypotenuse**. 
-<Note type="image", title="">
-
-**Insert image here**
-
-</Note>
-
-And if you're clever enough, you've already figured out how to calculate the **length** of $\bar{V}$!
-Using the **pythagorean theorem**, we can calculate it like so:
-
-<Note type="math", title="">
-
-```math
-\Vert\bar{V}\Vert = \sqrt{\color{red}x^2 \color{white}+ \color{green}y^2} \color{white}= \sqrt{\color{red}(-5)^2 \color{white}+ \color{green}(3)^2} \color{white}\approx5.83
-```
-
-And if $\bar{V}$ is 3-dimensional:
-
-```math
-\Vert\bar{V}\Vert = \sqrt{\color{red}x^2 \color{white}+ \color{green}y^2 \color{white}+ \color{blue}z^2}
-```
-
-</Note>
 
 **Additions**
 
+**Multiplication**
+
 **Scalar Operations**
 
-**Multiplication --- Cross Product**
+**Cross Product**
 
-**Multiplication --- Dot Product**
+**Dot Product**
-There's another piece of information we can extract using **trigonometry**.
 
 The **length** of the vector isn't the only thing we can get from **trigonometry**. We can also
 **compare** the **directions** of two vectors. But this needs a bit of explaination.
 
 Imagine two vectors: the $\color{red}\hat{i}$ and the $\color{green}\hat{j}$
 
+
+
 Let's discuss **scalar** operations. A **scalar** is a number that **scales** the vector by itself.
 Most often we're only interested in doing **multiplication** (denoted by $\cdot$ symbol). Yet the other 3 operatoins (/, +, -) are also defined
 for **scalars**. Here are two examples:
@@ -622,8 +543,11 @@ Subtraction
 
 <Note title="The Essence of Linear Algebra">
 
-If you're interested in **mathematics** (bet you are) and **visualization**, then I highly recommend watching the [Essence of Linear Algebra](https://www.youtube.com/playlist?list=PLZHQObOWTQDPD3MizzM2xVFitgF8hE_ab) 
+A **visual** and very **intuitive** explaination of these concepts is beyond the scope of this article.
-by **3Blue1Brown**. His math series gives you great intuitive understanding of linear algebra.
+If you're interested in **mathematics** (bet you are) and **visualization**,
+then I highly recommend watching the [Essence of Linear Algebra](https://www.youtube.com/playlist?list=PLZHQObOWTQDPD3MizzM2xVFitgF8hE_ab) 
+by **3Blue1Brown**.
+His math series can give you a great intuitive understanding using very smooth visuals.
 And much of my own understanding comes from this series---and the other sources references at the end.
 
 </Note>
@@ -640,7 +564,7 @@ And much of my own understanding comes from this series---and the other sources
 
 **Division (or lack there of)**
 
-**Identity Matrix & Basis Vectors**
+**Identity Matrix**
 
 ## Linear Algebra --- Transformations
 
@@ -665,6 +589,12 @@ I've left links at the end of this article for further study.
 
 **Translation**
 
+<Note type="info", title="Homogeneous coordinates">
+
+Why are we using 4D matrixes for vertices that are three dimensional?
+
+</Note>
+
 **Embedding it all in one matrix**
 
 Great! You've refreshed on lots of cool mathematics today, let's get back to the original discussion.