非圧縮性流体で密度分布が変化する例

https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/villagepump/非圧縮性流体で密度分布が変化する例/flow.svg

緑縦線：空間上の一点で計測する場合

Euler的に観測している

時間によって赤(高密度)になったり白(低密度)になったりする

緑枠：ある流体塊を追跡した場合

Lagrange的に観測している

どの時刻でも密度分布が変化しない

Chromeだとアニメーションが止まってしまうことがあるかも

code:flow.svg

<defs>

<linearGradient id="g0">

<stop offset="0" stop-color="#ff4b00"/>

<stop offset="0.125" stop-color="white"/>

<stop offset="0.25" stop-color="#ff4b00"/>

<stop offset="0.375" stop-color="white"/>

<stop offset="0.5" stop-color="#ff4b00"/>

<stop offset="0.625" stop-color="white"/>

<stop offset="0.75" stop-color="#ff4b00"/>

<stop offset="0.875" stop-color="white"/>

<stop offset="1" stop-color="#ff4b00"/>

</linearGradient>

<pattern id="pattern" x="0" y="0" width="100%" height="100%" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse">

<rect x="0" y="0" width="100%" height="100%" fill="url(#g0)"/>

</pattern>

</defs>

<g>

<rect x="-100%" y="0" width="200%" height="100%" fill="url(#pattern)"/>

<rect x="10%" y="30%" width="20%" height="20%" fill="none" stroke="#03af7a" stroke-width="2%" />

<rect x="-90%" y="30%" width="20%" height="20%" fill="none" stroke="#03af7a" stroke-width="2%" />

<animateTransform attributeName="transform" type="translate" from="0,0" to="200,0" begin="0s" dur="2s" repeatCount="indefinite"/>

</g>

<rect x="70%" y="0" width="2%" height="100%" fill="rgb(3,175,122)"/>

</svg>