2021-01-06

ブログデザイン備忘録～ gridを用いたレイアウト2

HTML/CSS

　今回はCSSのGridを用いた12カラムのグリッドレイアウトについて紹介していきたい。12カラムのグリッドレイアウトで左右比で2:3となるようなレイアウトについて紹介していく。

atatat.hatenablog.com

今回見基本的なコードは下記記事のものを用いて、最低限レイアウトを構成する必要なコードだけに絞った。

htmlはcontainerの中にclass名:item-1, item-2として、それぞれSub panel, Main panelとしておく。

<body>
    <div class="container">
      <div class="item-1">Sub panel</div>

      <div class="item-2">Main panel</div>
    </div>
</body>

CSSに関してbodyは前回と同じ。12カラムにするには grid-template-columns: repeat(12, 1fr);として、さらにcolumn-gap: 12px;とするとSub panelとMain Panelに12pxのギャップを設けることができる。

body {
  margin: 0 auto;
  max-width: 1000px;
}

.container {
  display: grid;
  height: 100vh;
  background:lightgray;
 
  grid-template-columns: repeat(12, 1fr);
  column-gap: 12px;
 
  align-items: center;
}

次にGridを用いてSub panelとMain panelを12カラムに対して2:3となるように設定する。いろいろな設定方法があるがitem-1に対してgrid-column: 2 / span 4;とすると12カラムの2カラム目から4カラム分の長さの領域を確保する。6カラム目までitem-1の領域になるので、item-2はgrid-column: 6 / span 6;として、6カラム目から6カラム分の長さの領域を確保する。確保した領域がわかるように緑の点線枠をborder: 2px dashed green;として設定した。

.item-1 {
  border: 2px dashed green;
  grid-column: 2 / span 4;
  height: 50vh;
}
.item-2 {
  border: 2px dashed green;
  grid-column: 6 / span 6;
  height: 50vh;
}

以下に12カラムのグリッドレイアウトで左右比で2:3となるようなレイアウトを実装した例を示す。

See the Pen 2column by ATATAT (@atatat) on CodePen.

2021-01-05

SymPyの使い方15 ～ベクトルモジュール3

その他ツール python SymPy

　今回はSymPyのベクトル演算を専門に扱うベクトルモジュールのうちベクトル積分について紹介する。

1. 積分領域の定義

　ベクトル積分を実行するには、積分領域を定義する必要がある。SymPyではParametricRegion、ImplicitRegionおよびGeometryモジュールを使用して領域を定義することができる。 ParametricRegion、ImplicitRegionは最新のSymPyを使用する必要があり、Google ColabのSymPyはVer 1.1.1なので一時的なアップデートであれば

!pip install -U sympy

とする。ParametricRegion、ImplicitRegionなどをロードするには

from sympy.vector import CoordSys3D, ParametricRegion, ImplicitRegion, vector_integrate
from sympy import sin, cos, exp, pi, sqrt, symbols
from sympy.abc import r, x, y, z, theta, phi
C = CoordSys3D('C')

半径2の円の領域を定義するためにParametricRegion((para1,para2),(変数,下限,上限))では

param_circle = ParametricRegion((2*cos(theta), 2*sin(theta)), (theta, 0, 2*pi))

通常のXY座標を用いるImplicitRegionでは

implicit_circle = ImplicitRegion((x, y), x**2 + y**2 - 4)

2. 線積分の例

　定義した領域に従って積分を実行するにはvector_integrate()を使用する。以下のように1を領域に沿って積分する場合は、領域の長さ、今回は半径2の円周を計算することになる。 ParametricRegionとImplicitRegionいずれも計算できるが、ImplicitRegionの方が時間がかかる。

vector_integrate(1, param_circle)
>4*pi
vector_integrate(1, ImplicitRegion)
>4*pi

３角形のような図形はパラメータ定義が難しいので、Geometryモジュールを用いて図形を定義する。 2辺が長さ1の直角2等辺三角形は

from sympy.geometry import Point, Polygon
triangle = Polygon(Point(0, 0), (0, 1), (1,0))

積分方法は上と同様で

vector_integrate(1, triangle)
>sqrt(2)+2

3. 面積分、体積積分の例

　ParametricRegionなどの領域の定義内の変数により、面積分や体積積分も実行できる。例えば円の面積を計算するには変数rを加え、さらにrの変化域を0からシンボリックのaとすると

a=symbols('a')
area_circle = ParametricRegion((r*cos(theta), r*sin(theta)), (theta, 0, 2*pi),(r,0,a))
vector_integrate(1, area_circle)
>pi*a**2

ParametricRegionのタプルの次元を増やせば2次元だけでなく3次元の積分にも適用できる。以下は半径1の球の表面積を計算する。

surfacesphere = ParametricRegion((sin(phi)*cos(theta),sin(phi)*sin(theta), cos(phi)),(phi, 0, pi), (theta, 0, 2*pi))
vector_integrate(1, surfacesphere)

さらに変数rを加えると体積積分になる。

solidsphere = ParametricRegion((r*sin(phi)*cos(theta),r*sin(phi)*sin(theta), r*cos(phi)),(phi, 0, pi), (theta, 0, 2*pi), (r, 0, 1))
vector_integrate(1, solidsphere)
>4/3*pi

積分する関数を1の代わりにC.xとすると直線に沿って積分していることが確認できる。

line = Polygon(Point(0, 0), (3, 0))
vector_integrate(C.x, line)
>9/2

4. まとめ

　今回はベクトル積分の基礎として領域の設定とベクトル積分の実行方法について紹介した。

2021-01-04

Texによる数式表現49～連立線形微分方程式の解法

その他 TeX

1. 連立1階微分方程式
2. 変数消去法による連立1階微分方程式の解法
3. 考察
4. まとめ

　Texによる数式表現方法として今回は連立1階微分方程式の解法について紹介する。

atatat.hatenablog.com

1. 連立1階微分方程式

　以下の連立1階微分方程式

<div>
[tex:\displaystyle \begin{eqnarray}
       \frac{dy_{1}}{dx} &=& ay_{1}+by_{2} \\
       \frac{dy_{2}}{dx} &=& cy_{1}+dy_{2}   \end{eqnarray} ]
</div>

$\displaystyle \begin{eqnarray} \frac{dy_{1}}{dx} &=& ay_{1}+by_{2} \\ \frac{dy_{2}}{dx} &=& cy_{1}+dy_{2} \end{eqnarray}$

上記連立微分方程式からy₁,y₂を求める方法について考えていく。

2. 変数消去法による連立1階微分方程式の解法

通常の連立方程式を解くのと同様に変数を消去する方法が考えられる。例えば第1式から

[tex:\displaystyle y\_{2}=\frac{1}{b} \frac{dy_{1}}{dx}-\frac{a}{b}y\_{1} ]

$\displaystyle y_{2}=\frac{1}{b} \frac{dy_{1}}{dx}-\frac{a}{b}y_{1}$

これを第2式に代入すると

[tex:\displaystyle \frac{1}{b} \frac{d^{2}y\_{1}}{dx^{2}}-\frac{a}{b}\frac{dy\_{1}}{dx}=cy\_{1}+ \frac{d}{b} \frac{dy_{1}}{dx}-\frac{ad}{b}y\_{1}]

$\displaystyle \frac{1}{b} \frac{d^{2}y_{1}}{dx^{2}}-\frac{a}{b}\frac{dy_{1}}{dx}=cy_{1}+ \frac{d}{b} \frac{dy_{1}}{dx}-\frac{ad}{b}y_{1}$

これを整理すると以下の2階線形微分方程式になる。

[tex:\displaystyle  \frac{d^{2}y\_{1}}{dx^{2}}-(a+d)\frac{dy\_{1}}{dx}+(ad-bc)y\_{1}=0]

$\displaystyle \frac{d^{2}y_{1}}{dx^{2}}-(a+d)\frac{dy_{1}}{dx}+(ad-bc)y_{1}=0$

この2階線形微分方程式の解は以下の通りy₁=C exp(λ x)という解を仮定して、λを求める。

atatat.hatenablog.com

[tex:\displaystyle \lambda\_{1,2}=\frac{1}{2} \left( (a+d)\pm \sqrt{(a+d)^{2}-4(ad-bc) } \right) ]

$\displaystyle \lambda_{1,2}=\frac{1}{2} \left( (a+d)\pm \sqrt{(a+d)^{2}-4(ad-bc) } \right)$

y₁の解は上記のλ_1,2を用いて以下のようになる。

[tex:\displaystyle y\_{1}=C\_{1}\exp ( \lambda\_{1} x ) + C\_{2} \exp ( \lambda\_{2} x )]

$\displaystyle y_{1}=C_{1}\exp ( \lambda_{1} x ) + C_{2} \exp ( \lambda_{2} x )$

y₁が求まれば、連立1階微分方程式からただちにy₂の解も求まる。

[tex:\displaystyle y\_{2}=D\_{1}\exp ( \lambda\_{1} x ) + D\_{2} \exp ( \lambda\_{2} x )]

$\displaystyle y_{2}=D_{1}\exp ( \lambda_{1} x ) + D_{2} \exp ( \lambda_{2} x )$

微分や係数の演算により指数関数の係数については変わるが、指数関数自体は変わらないので表記簡略化のため指数関数の係数をD_1,2とした。

3. 考察

　単一の1階微分方程式では解は単調の指数関数だったが、連立1階微分方程式の場合は変形の途中で2階微分方程式になることから

<div>
[tex:\displaystyle (a+d)^2{2} < 4(ad-bc) ]
</div>

$\displaystyle (a+d)^2{2} < 4(ad-bc)$

という条件下では振動解になるという違いがある。

4. まとめ

　Texによる数式表現方法として今回は連立1階微分方程式の解法と解について示した。

つれづれなる備忘録

日々の発見をあるがままに綴る

ブログデザイン備忘録～ gridを用いたレイアウト2

SymPyの使い方15 ～ベクトルモジュール3

1. 積分領域の定義

2. 線積分の例

3. 面積分、体積積分の例

4. まとめ

Texによる数式表現49～連立線形微分方程式の解法

1. 連立1階微分方程式

2. 変数消去法による連立1階微分方程式の解法

3. 考察

4. まとめ