Dot Product

Reference: “Dot products and duality | Essence of linear algebra, chapter 9”, 3Blue1Brown Algebra example: $\begin{bmatrix} 1 & 2 \end{bmatrix} \cdot \begin{bmatrix} 3 \ 4 \end{bmatrix} = 1 \cdot 3 + 2 \cdot 4$ Gemoetrically: ![projection](https://i.imgur.com/HYJeePM.png =150x150) The dot product of v and u = (length of projection of v onto u)(length of u) Order and Symmetry Order doesn’t matter. (Length of projected v) x (Length of u) = (Length of projected u) x (Length of v)...

January 27, 2019 · Kyle Fang

Three.js - shaderMaterial and vertex/fragment shaders

A vertex shader: //WebGL Vertex Shader uniform mat4 uMVMatrix; // Model-view matrix uniform mat4 uPMatrix; // Projection matrix uniform mat4 uNMatrix; // Normal matrix attribute vec3 aVertexPosition; // Vertex position in object space attribute vec3 aVertexNormal; // Vertex normal in object space varying vec3 vPosition; // Vertex position (camera space) varying vec3 vNormal; // Vertex normal (camera space) void main(void) { vec4 camSpacePosition = uMVMatrix * vec4(aVertexPosition, 1....

June 13, 2018 · Kyle Fang

Sphere Coordinates and Trigonometry

Sphere in 3-D three parameters: (r, θ, φ) $x = r \cdot sin(φ) cos(θ)$ $y = r \cdot sin(φ) sin(θ)$ $z = r \cdot cos(θ)$ Trigonometry $\cos(θ) = \frac{x}{\sqrt{x^{2} + y^{2}}}$ $\sin(θ) = \frac{y}{\sqrt{x^{2} + y^{2}}}$ $\tan(θ) = \frac{y}{x}$ arcsin/arccos/arctan is the inverse. e.g. $\tan(45^{\circ}) = 1$ $\arctan(1) = 45^{\circ}$

May 13, 2018 · Kyle Fang

Recall I

line in 3-D Define $\vec r_0$ and $\vec r$ are position vectors of $P_0$ and $P$, and $\vec a$ represents $\vec{P_0P}$. if $\vec v$ is parallel to $\vec a$, then: $\vec{r} = \vec{r_0} + \vec{a}$ $\vec{a} = t\vec{v}$ $\vec{r} = \vec{r_0} + t\vec{v}$ in othe words, $(x_r, y_r, z_r) = (x_{r_0}, y_{r_0}, z_{r_0}) + t \cdot (x_v, y_v, z_v)$ sphere the sphere’s center point is $(x_0, y_0, z_0)$ radius = $r$ all point on surface: $(x, y, z)$ $(x - x_0)^{2} + (y - y_0)^{2} + (z - z_0)^{2} = r^2$...

April 26, 2018 · Kyle Fang

Color Channel 颜色通道

颜色通道(color channel)不能光用类比三原色的方法来理解,还需要理解灰度值(gray scale)。 数字图像的本质是矩阵。 每个矩阵内的元素可以看作是一个像素,每个元素都有关于 BGR 三种颜色的灰度值,而灰度值表示的是颜色的“深浅/强弱/明亮”。灰度值越高,颜色越深/强/暗,反之则是越浅/弱/亮。 如果一个像素的 BGR 的灰度是 [100, 40, 35]。那么这就表示,这个像素的蓝色通道的灰度值是100,绿色的通道的灰度值是40,红色的则是35。这些颜色混合在一起就变成了这个像素的颜色。 P1.d 的题目要求的是: Modify the above code snipet to replace the green with blue, red with green, and blue with red channels. 也就是: green -> blue red -> green blue -> red 第一次解法: newColor.at<Vec3b>(i, j)[0] = r; newColor.at<Vec3b>(i, j)[1] = b; newColor.at<Vec3b>(i, j)[2] = g; 实际上是: red -> blue blue -> green green -> red...

April 12, 2018 · Kyle Fang