From 5461fb90821e57330014463dc7491538855283b3 Mon Sep 17 00:00:00 2001 From: Tom Date: Thu, 9 Jan 2025 20:20:51 +0000 Subject: [PATCH] a tricky proof --- _includes/default_head_tags.html | 1 + _posts/2025-01-09-a-tricky-proof.md | 116 ++++++++++++++++++ .../astrophysical_fluids/line_element.svg | 109 ++++++++++++++++ .../astrophysical_fluids/surface_element.svg | 91 ++++++++++++++ assets/blog/astrophysical_fluids/thumnail.png | Bin 0 -> 12034 bytes assets/js/index.js | 46 ------- assets/js/pre_page_load.js | 45 +++++++ 7 files changed, 362 insertions(+), 46 deletions(-) create mode 100644 _posts/2025-01-09-a-tricky-proof.md create mode 100644 assets/blog/astrophysical_fluids/line_element.svg create mode 100644 assets/blog/astrophysical_fluids/surface_element.svg create mode 100644 assets/blog/astrophysical_fluids/thumnail.png create mode 100644 assets/js/pre_page_load.js diff --git a/_includes/default_head_tags.html b/_includes/default_head_tags.html index a333444..656ef99 100644 --- a/_includes/default_head_tags.html +++ b/_includes/default_head_tags.html @@ -54,6 +54,7 @@ + {% if page.mathjax %} diff --git a/_posts/2025-01-09-a-tricky-proof.md b/_posts/2025-01-09-a-tricky-proof.md new file mode 100644 index 0000000..fd2458e --- /dev/null +++ b/_posts/2025-01-09-a-tricky-proof.md @@ -0,0 +1,116 @@ +--- +title: A tricky index proof +layout: post +excerpt: An 'exercise for the reader' has been bugging me all week. + +mathjax: true + +thumbnail: /assets/blog/astrophysical_fluids/line_element.svg +social_image: /assets/blogs/astrophysical_fluids/thumbnail.png +assets: +alt: +image_class: invertable + +--- + +I've been trying to prove a theorem from [these notes](https://arxiv.org/abs/1604.03835) for a few days and I finally figured it out so I thought I'd share. + +## Line Element + +So the setup is this: Imagine we draw a very short line vector $\vec{v}$ and let it flow along in a fluid with velocity field $u(\vec{x}, t)$. + +
+ +
A line element $\delta \vec{v}$ being dragged aloung in a fluid with velocity field $u(\vec{x}, t)$
+
+ +Three things will happen, the vector will be translated along, it will change length and it will change direction. If we ignore the translation, we can ask what the equation would be for the change in length and direction of $\vec{v}$. I'll drop the vector symbols on $v$, $u$ and $x$ from now on. + +$$ D_t \; v = ? $$ + +If we assume $v$ is very small we can think about expanding $u$ to first order along $v$ + +$$ u(x + v, t) = u(x, t) + v \cdot \nabla u $$ + +where $v \cdot \nabla$ is the directional derivative $v_x \partial_x + v_y \partial_y + v_y \partial_y$ and when $v$ is infinitesimal it just directly tells us how $u$ will change if we move from point $x$ to point $x + v$. + +So from this we can see that one end of our vector $v$ is moving along at $u(x, t)$ while the other end will move at $u(x, t) + v \cdot \nabla u$ hence: + +$$ D_t \; v = v \cdot \nabla u $$ + +## Surface Element + +Now the natural next thing you might ask is how will a little surface element will be stretched and rotated as it moves along in the fluid? It's natural to represent the infinitesumal surface element spanned by two small vectors $v^1$ and $v^2$ with the normal vector $S$ whose length is related to the area of the quadrilateral spanned by $v^1$ and $v^2$. + +
+ +
A surface element $\vec{S}$ that represents the quadrilateral swept out by $v^1$ and $v^2$
+
+ +Probably I call it 'natural' because it's easy to compute it with the cross product: + +$$ S = v^1 \times v^2 $$ + +Now, how does this change over time? Slightly surprisingly to me, you can write down a differential equation purely in terms of $S$ and not $x^1$ or $x^2$. + +$$ D_t \; S = (\nabla \cdot u) S - \nabla u \cdot S$$ + +The proof of this is left as an exercise to the reader in the lecture notes and trying to figure it out has bugged me for the last few days. Spoilers ahead if you'd like to try yourself. + +Ok first let's apply chain rule (after first squinting at the index definition of the cross product to make sure chain rule still works, never trust vectors). + +$$ D_t \; S = (D_t \; v^1) \times v^2 + v^1 \times (D_t \; v^2) $$ + +And I'll reorder the second term because I want to align indices and pull some stuff out. + +$$ D_t \; S = (D_t \; v^1) \times v^2 - (D_t \; v^2) \times v^1 $$ + +using our equation for the derivative of $v$ from the last bit: + +$$ D_t \; S = (v^1 \cdot \nabla u) \times v^2 - (v^2 \cdot \nabla u) \times v^1 $$ + +Now to convert this to index notation let's go bit by bit: + +$$ [v\cdot \nabla u]_i = v_k \partial_k u_i$$ + +then using $$ [a \times b]_i = \varepsilon_{ijk} a_j b_k $$ the two terms become: + +$$ [(v^1 \cdot \nabla u) \times v^2 ]_i = v^1_l \partial_l \; u_j \; \varepsilon_{ijk} v^2_k $$ + +$$ [(v^2 \cdot \nabla u) \times v^1 ]_i = v^2_l \partial_l \; u_j \; \varepsilon_{ijk} v^1_k $$ + +Putting these together we can pull out the $\varepsilon$, $\partial$ and $u$ terms. We can move $\partial$ about liberally as long as we remember it is always acting on $u$ and nothing else. + +$$ D_t S_i = \varepsilon_{ijk} \partial_l u_j \; (v^1_l v^2_k - v^1_k v^2_l) $$ + +Now this is where I got stuck for ages, We know the answer should have a $v^1 \times v^2$ term in it but looking at this all the indices seem to be connect up wrong!! I tried various things, manage to `prove` it in the case that $v^1 = (1,0,0)$ and $v^1 = (0,1,0)$ etc but was left scratching my head for the more general proof. + +*Then I saw it*, there's this identity about products of Levi-Civita symbols +$$ \varepsilon_{iab} \varepsilon_{inm} = \delta_{an}\delta_{bm} - \delta_{am}\delta_{bn}$$ +I've only used this this to turn two Levi-Civita symbols into something simpler. But that right hand side actually looks suspiciously like the term +$$ (v^1_l v^2_k - v^1_k v^2_l) $$ + +What if we use the identity in reverse??????? I sometimes think of $\delta_{ij}$ as the "rename i->j or j->i" operator because in the presence of Einstein summation that's kinda what it does. Using that idea: + +$$ (v^1_l v^2_k - v^1_k v^2_l) = v^1_\alpha v^2_\beta (\delta_{\alpha l}\delta_{\beta k} - \delta_{\alpha k}\delta_{\beta l})$$ + +This seems good, we've managed to disconnect $v^1$ and $v^2$ a bit. Now applying the identity in reverse we get: +$$ v^1_\alpha v^2_\beta \varepsilon_{m\alpha\beta} \varepsilon_{mlk}$$ + +This is amazing because +$$ v^1_\alpha v^2_\beta \varepsilon_{m\alpha\beta} = [v^1 \times v^2]_m = S_m$$ + +giving us + +$$ D_t S_i = \varepsilon_{ijk} \partial_l u_j \; \varepsilon_{mlk} S_m $$ + +applying the identity again in the normal direction this time: + +$$ D_t S_i = \partial_l u_j \; S_m (\delta_{im}\delta_{jl} - \delta_{il}\delta_{jm})$$ + +and finally performing the renaming: +$$ D_t S_i = \partial_j u_j S_i - \partial_i u_j S_j$$ + +gives us what we want! +$$ D_t S = (\nabla \cdot u) \; S - (\nabla u) \cdot S$$ + diff --git a/assets/blog/astrophysical_fluids/line_element.svg b/assets/blog/astrophysical_fluids/line_element.svg new file mode 100644 index 0000000..900dfb0 --- /dev/null +++ b/assets/blog/astrophysical_fluids/line_element.svg @@ -0,0 +1,109 @@ + + + + + + + + + + + + + + + 5101 + + + + + + + + + + + diff --git a/assets/blog/astrophysical_fluids/surface_element.svg b/assets/blog/astrophysical_fluids/surface_element.svg new file mode 100644 index 0000000..11470b9 --- /dev/null +++ b/assets/blog/astrophysical_fluids/surface_element.svg @@ -0,0 +1,91 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/blog/astrophysical_fluids/thumnail.png b/assets/blog/astrophysical_fluids/thumnail.png new file mode 100644 index 0000000000000000000000000000000000000000..8fd26d0e89b34bb5e09ed80ffcee9aa73110b111 GIT binary patch literal 12034 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
pW~W-GW71lyHA~Bi7=1%T3&J25f*xUvO6rj$vNO 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 { - let response = getComputedStyle(document.documentElement).getPropertyValue( - propKey - ); - - if (response.length) { - response = response.replace(/\"/g, "").trim(); - } - - return response; -}; - -const applySetting = () => { - let currentSetting = - localStorage.getItem(STORAGE_KEY) || getCSSCustomProp(COLOR_MODE_KEY); - - if (currentSetting) { - document.documentElement.setAttribute( - "data-user-color-scheme", - currentSetting - ); - } - console.log( - `Mode Preference set on document.documentElement.getAttribute("data-user-color-scheme"): ${currentSetting}` - ); -}; - const toggleSetting = () => { let currentSetting = localStorage.getItem(STORAGE_KEY); @@ -79,18 +48,3 @@ modeToggleButton.addEventListener("click", (evt) => { toggleSetting(); applySetting(); }); - -let localStorageSetting = localStorage.getItem(STORAGE_KEY); -let defaultValue = getCSSCustomProp(COLOR_MODE_KEY); - -if (localStorageSetting) { - console.log( - `Night mode setting found in localStorage: ${localStorageSetting}` - ); -} else { - console.log( - `Night mode setting not found in localStorage. Set to value from css --color-mode key: ${defaultValue}` - ); -} - -applySetting(); diff --git a/assets/js/pre_page_load.js b/assets/js/pre_page_load.js new file mode 100644 index 0000000..3fbbba4 --- /dev/null +++ b/assets/js/pre_page_load.js @@ -0,0 +1,45 @@ +// run the night mode toggle +const STORAGE_KEY = "user-color-scheme"; +const COLOR_MODE_KEY = "--color-mode"; + +const getCSSCustomProp = (propKey) => { + let response = getComputedStyle(document.documentElement).getPropertyValue( + propKey + ); + + if (response.length) { + response = response.replace(/\"/g, "").trim(); + } + + return response; +}; + +const applySetting = () => { + let currentSetting = + localStorage.getItem(STORAGE_KEY) || getCSSCustomProp(COLOR_MODE_KEY); + + if (currentSetting) { + document.documentElement.setAttribute( + "data-user-color-scheme", + currentSetting + ); + } + console.log( + `Mode Preference set on document.documentElement.getAttribute("data-user-color-scheme"): ${currentSetting}` + ); +}; + +let localStorageSetting = localStorage.getItem(STORAGE_KEY); +let defaultValue = getCSSCustomProp(COLOR_MODE_KEY); + +if (localStorageSetting) { + console.log( + `Night mode setting found in localStorage: ${localStorageSetting}` + ); +} else { + console.log( + `Night mode setting not found in localStorage. Set to value from css --color-mode key: ${defaultValue}` + ); +} + +applySetting();