article(graphics-pipeline/geometry-processing): wip

mdsvex.config.js

@@ -3,6 +3,46 @@ 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('<')) {
@@ -14,7 +54,7 @@ const correct_hast_tree = () => (tree) => {
 const katex_blocks = () => (tree) => {
 	visit(tree, 'code', (node) => {
 		if (node.lang === 'math') {
-			const str = katex.renderToString(node.value, {
+			let str = katex.renderToString(node.value, {
 				displayMode: true,
 				leqno: false,
 				fleqn: false,
@@ -23,9 +63,16 @@ const katex_blocks = () => (tree) => {
 				strict: 'warn',
 				output: 'htmlAndMathml',
 				trust: false,
-				macros: { '\\f': '#1f(#2)' }
+				macros: {
+					'\\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 + '`}';
 		}
@@ -34,12 +81,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]
+	rehypePlugins: [correct_hast_tree, rehype_katex, override_katex_colors]
 };

src/routes/articles/Tip.svelte

@@ -25,9 +25,9 @@
 		max-width: 60ch;
 		min-width: 60ch;
 		margin-left: -30ch; /* Use half of the width (120/2 = 60), to center the tooltip */
-        margin-top: .5em;
+		margin-top: 0.5em;
 
-		background-color: #282828ea;
+		background-color: #282828f5;
 		text-wrap-mode: wrap;
 		text-align: justify;
 		padding: 1em;

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

@@ -8,7 +8,10 @@ import Image from "../../Image.svelte"
 import Note from "../../Note.svelte"
 import Tip from "../../Tip.svelte"
 
-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 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
@@ -27,7 +30,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">
 
@@ -465,7 +468,7 @@ your time** :)
 
 ## Linear Algebra --- Vectors
 
-**Vectors** are the **fundamental** building blocks of the linear algebra. And we're going to get
+**Vectors** are the **fundamental** building blocks of **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**)
@@ -490,38 +493,114 @@ 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 even certain mathmatical **functions**). 
+or as a **list of numbers** that happen to have a cute **geometric interpretation**. 
-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.
+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
 
-However, we won't go into such axioms as we're not interested in **abstract** thinking here.
+- **Addition**: Given two elements x, y in X, one can form the sum x+y, which is also an element of X.
-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 to perform a **transformation** in space.
+- A vector describes a series of steps for performing a **transformation** in space.
-- A vector has the properties: **direction** and **magntitude**.
+- A vector has 2 properties: **direction** and **magntitude**.
-- If its **magntitude** is exactly **1**, then it describes a **direction** in space and is called a **unit vector**.
+- If its **magntitude** is exactly **1**, then it only describes a **direction** in space and is called a **unit vector**.
 
-Let's go over these points one by one.
+Let's go over these points one by one. We'll focus mostly on **2-dimensional** vectors for simplicity and easier
+visualization, but same principles easily extend to **3-dimensions**.
 
-**Basis Vector**
+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;
+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**
 
-**Cross Product**
+**Multiplication --- Cross Product**
 
-**Dot Product**
+**Multiplication --- 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:
@@ -543,11 +622,8 @@ Subtraction
 
 <Note title="The Essence of Linear Algebra">
 
-A **visual** and very **intuitive** explaination of these concepts is beyond the scope of this article.
+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) 
-If you're interested in **mathematics** (bet you are) and **visualization**,
+by **3Blue1Brown**. His math series gives you great intuitive understanding of linear algebra.
-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>
@@ -564,7 +640,7 @@ And much of my own understanding comes from this series---and the other sources
 
 **Division (or lack there of)**
 
-**Identity Matrix**
+**Identity Matrix & Basis Vectors**
 
 ## Linear Algebra --- Transformations
 
@@ -589,12 +665,6 @@ 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.