【アプリ開発】Pythonで波のアニメーションを作成しよう

みなさんこんにちは本日は以下の記事の続きとなります。

2021年5月29日【アプリ開発】Sikulixを使ってYouTube広告を自動スキップするアプリの開発

YouTube広告を自動スキップするためのステップで説明していくと説明しました。

今回は、Pythonを使って波のアニメーションを作成します。

実際に動くアプリを作ることで、より具体的なイメージを持ちながらプログラミング学習ができると思いますよ！

今回作成するアプリの完成イメージは次の動画をご覧ください。

はじめに

今回の記事では、以下の読者を対象としています。

今回の記事では、次のような内容を説明します。

• はじめてのPythonのはじめかた（Visual Studio CodeでPythonを実装します）
• 基礎的なPythonの文法や書き方
• NumpyやMatplotlibを利用してアニメーションを作成する方法
• （ちょっとだけ）波動方程式の解説

そもそもPythonってなに？？

そもそも、Pythonってよく聞くけど、どんなプログラミング言語なの？

初心者向けのプログラミング言語なの？？

ともとも

Pythonはとっても学習コストの低いプログラミング言語のひとつだよ！

Pythonは通常のソフトウェア開発に使われることもあるけど、数値計算などの学術的な観点からも利用されることのあるプログラミング言語だよ！

最近よくPythonを聞く機会が多くなっているのは、機械学習にもPythonがよく使われることが多いからからな？Python自体は1991年にリリースされている歴史ある言語なんだよ。

Pythonを学ぶことで、今話題のAIについての学習や転職時にも役立つ知識を身に着けられるよ！

Pythonは1991年にGuido van Rossumによってリリースされた言語で、次のような内容に利用されています。

• ソフトウェア開発
• 数値計算
• 機械学習

あの、YouTubeも実はPythonで開発されています。

また、Pythonはインタプリタ言語で、異なるプラットフォーム（Windows、Mac OS、Linuxなど）でも問題なく動作します。

# 渡された数値nの2乗を返す
def square(n):
    return n * n;

print(square(10));
# 100が表示される

print(square(10));

# 渡された数値nの2乗を返す
def square(n):
    return n * n;

# "NameError: name 'square' is not defined"が発生して100が表示されない。

public class Main{
    public static void main(String[] args){
        // 100が出力される
        System.out.println(CalcUtils.square(10));
    }
}

class CalcUtils{
    public static int square(int n){
        return n * n;
    }
}

Pythonを使えるようにしよう

今回は、Visual Studio Codeを使ってPythonが利用できるようにしていきましょう。

Windowsを想定して説明をしていきますので、ほかのOSを利用しているなどうまくいかない場合は、次のサイトを参考に環境構築してください。

Visual Studio Codeとは、Microsoftが開発しているWindows、Linux、macOS用のソースコードエディタ（プログラミングをする際に利用できるメモ帳のようなもの）のことです。

世の中にはいろいろなエディタが存在しますが、筆者はこのVisual Studio Codeを全力で推します！（理由はいろいろありますが、とっても使いやすくてサクサク動く！と思います。）

Visual Studio Codeをインストールしよう

Pythonがインストールできたら次はVisual Studio Codeをインストールしましょう。

次のサイトにアクセスしてください。

お使いのパソコンのOSにあったインストーラをダウンロードしてください。

ダウンロードが完了したら、インストーラを起動して、Visual Studio Codeを立ち上げてください。

するとこのような画面が表示されるかと思います。

Visual Studio Codeを日本語化しよう

まずは、Visual Studio Codeを日本語化しましょう。Ctrl + Shift + xを押して、その後japanese languageと入力してください。

そして１番上に出てくる（はず）の、Japanese Language Pack for Visual Studio Codeを選択し、installを押してください。インストールして、Visual Studio Codeを再起動すると日本語化されているはずです。

Pythonをインストールしよう

まずはPythonをインストールしましょう。次のサイトにアクセスしてください。

そして、Download Python x.x.xを押して最新のPythonのインストーラーをダウンロードしてください。

すると、Pythonのインストーラがインストールできるので、ダウンロードしたら、クリックしてPythonをインストールしてください。

Visual Studio CodeにPythonのExtentionを追加しよう

Visual Studio Codeを開いて、Ctrl + Shift + xを押してください。そしてPythonと入力して次の画像と同じものをインストールしてください。（筆者はすでにインストール済みのため、アンインストールと表示されていますが、インストールを押してください。）

Pythonがインストールされているか確認しよう

Visual Sudio Codeを開いてCtrl + @ を押してください。すると画面下にターミナル（コマンドを打ってシステムの操作を行うことができるもの）が表示されます。

そして、ターミナルにpy -3 --versionと打ってエンターキーを押してください。

そして、次のようにPythonのバージョンが表示されれば正常にインストールできていることが確認できます。

ワークスペースを作成しよう

今回アプリを作成する際に作成するファイルを格納するためのフォルダをデスクトップに作成しましょう。

そして、画面左上の「ファイル(F)」を押して、「フォルダーを開く」を押してください。

そうして作成したフォルダを選択して、「フォルダーの選択」を押してください。

続いて、Ctrl + Shift + Pを押してください。そうするとコマンドパレットが開くので、そこにPython: Select Interpreterと入力して、エンターキーを押してください。

そうして、上でダウンロードしたPythonのファイルを選択して、実際に利用するPythonを選択してください。

お疲れさまでした！これで、Visual Studio CodeでPythonが使えるようになりました！
実際に簡単なプログラムを書いてみましょう。

はじめてのPython

次の画像を参考に左上のボタンをおして、ファイルを作成してください。ファイル名は何でも構いませんが、ファイルの最後に必ず.pyをつけるようにしてください。（これでPythonのファイルだと認識されます。）

そして、次のコードを書いてみましょう。

message = "はじめてのPython";
print(message);

これは、「はじめてのPython」を表示する簡単なプログラムです。実行するには右上の緑矢印ボタンを押してください。すると、ターミナルに「はじめてのPython」が表示されます。

Pythonのライブラリをインストールしよう

今回作成するプログラムでは、ライブラリ（便利な機能をまとめたもの）をいくつか利用します。

今回利用するライブラリは次の３つです。

• NumPy
• pandas
• Matplotlib

なので、ここではこれらをインストールしていきましょう。

まずVisual Studio Codeを開いて、Ctrl + @ を押してターミナルを開いてください。

そして、py -m pip install -U pipと入力してください。これは、pipというPythonのライブラリなどを管理するツールを更新しています。今回はこのpipを使ってライブラリのインストールをします。

pipの最新化が終わったら、次はpy -m pip install numpyと入力してください。これでnumpyというライブラリがインストールできます。

次にpy -m pip install pandasと入力してください。これでpandasというライブラリがインストールできます。

最後にpy -m pip install matplotlibと入力してください。これで、matplotlibがインストールできます。

以上で今回必要な準備が整ったことになります。

直線を書いてみよう

波の描画に入る前にまずは、直線を書いてみましょう。

次のコードを入力してください。

import numpy as np;

# 0から5までの数値を0.1刻みの配列で用意する
# np.arangeには引数が3つ必要で、1つめが開始時点の数値、
# 2つめが終了時点の数値、3つめがデータの刻み単位です。（numpyのメソッド）
x = np.arange(0, 5, 0.1);

print(x);
# [0 0.1 0.2 0.3 ... 4.9]の配列が出力される

まずは、x軸の値を用意します。ここでは、０から5まで0.1づつの数値が入った配列を変数xに代入します。

# データ1、データ2、データ3の配列
[ データ1,データ2, データ3] 
# 例）
# 100、Tomotomo(文字列)、trueの配列
[100, "Tomotomo", true]

続いて、y軸の値を算出していきましょう。

直線を表す公式は次です。（中学生でやったはず？の内容です）

# 直線を表す公式（aが傾き、bが切片）
y = a * x + b;

今回はy = 2 * x + 2を書いてみましょう。次のコードを書いてください。

import numpy as np;

import matplotlib.pyplot as plt;

# 0から5までの数値を0.1刻みの配列で用意する
# np.arangeには引数が3つ必要で、1つめが開始時点の数値、
# 2つめが終了時点の数値、3つめがデータの刻み単位です。（numpyのメソッド）
x = np.arange(0, 5, 0.1);

# y = 2x + 2の直線のy軸のデータ

y = 2 * x + 2;

# 変数xと変数yをプロットする
plt.plot(x, y);

# プロットした値を表示する
plt.show();

これを動かすと、次の画像が表示されるはずです。

どうでしょう？思ったより簡単に描画できたのではないでしょうか？

ユーザとやり取りしながら、描画できるようにしてみよう

ここでは、もう少し進めて、次を実行したユーザが選択できるようにしてみましょう。

• x軸の範囲（上の例では0から5まで）
• yの方程式（上の例では2x + 2）

上記を実現するためには、ユーザからの入力を受け付けるinput()メソッドを利用する必要があります。

次のコードを入力してみてください。

x_range = input("表示するx軸の範囲をカンマ(,)区切りで整数で入力してください。：");
print(x_range);

そして実際に実行すると、ターミナルに「表示するx軸の範囲をカンマ(,)区切りで整数で入力してください。：」と表示されて、ユーザからの入力まちの状態になります。

なのでここで、たとえば3,10などと入力すると、ターミナルの次の行に3,10が表示されます。

つまり、inputを利用すると、入力した値がx_rangeに入るので、システムとユーザでやり取りできるようになるのです。

なので、次のコードを入力してください。

import numpy as np;

x_range = input("表示するx軸の範囲をカンマ(,)区切りで整数で入力してください。：");

# x軸開始の値
x_range_start = int(x_range.split(",")[0]);

# x軸終了の値
x_range_end = int(x_range.split(",")[1]);

# xに指定した区間で0.1刻みで配列を作成
x = np.arange(x_range_start, x_range_end, 0.1);

x_rangeにはカンマ区切りで数値が入力されていますが、これはまだ文字列なので、数値に変換する必要があります。

まずは、カンマ区切りで入力されている前の数字と後の数字を取得します。それには、split()というメソッドを利用する必要があります。

文字列をsplitの引数で分割した文字列の入った配列を作成します。

"3,10".split(","); # →[3, 10]
"あいうえお　かきくけこ".split("　"); # →["あいうえお","かきくけこ"]

それで、配列から値を取得するときは、配列の何番目に入っている値が欲しいのかを記載する必要があります。

なので、今回はまず次のようにして値を取得する必要があります。

# 3,10と入力したとする。
x_range = input("表示するx軸の範囲をカンマ(,)区切りで整数で入力してください。：");

 # [3, 10]の1番目の値(配列は0から順に数えます)を取得する
x_range_start = x_range.split(",")[0];
print(x_range_start); # 3が表示される

 # [3, 10]の2番目の値(配列は0から順に数えます)を取得する
x_range_end = x_range.split(",")[1];
print(x_range_end); # 10が表示される

あとは、ここでの数字は文字列のため、数値にデータを変換する必要があります。

そのためには、int()メソッドを利用します。引数に入った文字列を整数値に変換してくれます。

次に、描画する式をユーザから受け付けて、描画できるようにしてみましょう。

最終的にできるコードは次の通りです。

import numpy as np;
import matplotlib.pyplot as plt;

x_range = input("表示するx軸の範囲をカンマ(,)区切りで整数で入力してください。：");

# x軸開始の値
x_range_start = int(x_range.split(",")[0]);

# x軸終了の値
x_range_end = int(x_range.split(",")[1]);

# xに指定した区間で0.1刻みで配列を作成
x = np.arange(x_range_start, x_range_end, 0.1);

# 公式をユーザが入力する
equation = input("描画する式を入力してください。（利用可能な変数はxです。）：y =");

y = eval(equation);

plt.plot(x, y);
plt.show();

あとは、描画する式が入力できるようにinputをもう一つ追加してみましょう。

あとは、いろいろな入力をしてみると、それに合わせて描画がされるようになるはずです。

次は、このコードから出力できる描画イメージです。

波のアニメーションを作成しよう

最後に波のアニメーションを作成しましょう。

アニメーションを作成するということは、時間の経過とともにデータの形が変わるということになります。

そして波の演算ということで、今回は波動方程式というものを利用しています。

波動方程式とは波の動きをモデル化しているもので、変数に時間が含まれているので、時間がたつごとにどのような波形になるのかがこの方程式から読み取ることができます。

筆者自身が勉強していた時に利用していた参考書を載せておきますが、具体的な解説は割愛します。。（要望があれば、別途解説します）

今回作成するプログラムの完成図を先に書いてみましょう。（そのあとでポイントを説明します。）

import numpy as np
import matplotlib.pyplot as plt
# アニメーションの描画に必要なライブラリ
import matplotlib.animation as animation

# 波動方程式
# x:x座標、t:経過時間
def wave_y(x,t):
    sigma = 0
    for n in range(50):
        sigma = sigma + (-1) ** (n + 1) / (2 * n - 1) ** 2 * np.sin((2 * n - 1) * np.pi * x / 2) * np.cos((2 * n - 1) * np.pi * t / 2)
    return 8 * h / np.pi ** 2 * sigma

# 変数定義
# 描画する空間を定義
fig = plt.figure()

# 描画するx軸の開始の値
x_range_start = 0

# 描画するx軸の終わりの値
x_range_end = 2

# x軸を表す配列
x_range = np.arange(x_range_start, x_range_end + 0.1, 0.1)

# 経過時間を表す変数
t = 0

# 時間間隔を表す変数
dt = 0.02

# 初期の高さ
h = 2

# 波を描画する数
render_num = 5000

# 各断面のy座標の値を保持する配列
yt = []

# 経過時間に対するy座標を算出
for i in range(render_num):
    y = wave_y(x_range,t)
    yt.append(y)
    t = t + dt

# 再描画する際の設定を記載
def _update_plot(i):
    y = yt[i]
    fig.clear()
    plt.plot(x_range,y)
    plt.grid(True)
    plt.xlim([x_range_start, x_range_end])
    plt.ylim([-h - 2, h + 2])

# アニメーションの設定
ani = animation.FuncAnimation(fig, _update_plot, frames=360, interval=20)

# 実際に描画する
plt.show()

これを動かしてみると、次のようなアニメーションが表示されるはずです。

まず、波動方程式とその後の変数宣言の箇所についての説明は省略します。

このプログラムは、イメージとして次のように作られています。

1. 時点tにおける、xの値とyの値を計算する。
2. 時点t から少し経った時間でのxの値とyの値を計算する。
3. １～２を何度も繰り返す（今回は5,000回）
4. 最後に、作成したxとyの値を描画する

そして、今回、xの値は0から2までの0.1刻みの数値の配列となっています。なので、時間によって値が変わるのはyの値のみとなります。それが次の箇所です。

# 経過時間に対するy座標を算出
for i in range(render_num):
    y = wave_y(x_range,t)
    yt.append(y)
    t = t + dt

ここでは、render_numの回数だけ、ytに波動方程式で算出したyの値（配列）を入れています。

for 変数名 in 配列:
   処理内容

for i in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]:
    print(i)
# 0 1 2 3 4 5 6 7 8 9 が表示される

# 0 ～ 99の配列を作成する
range(100)

for i in range(100):
    print(i)
# 0 1 2 ... 99が表示される

最後にアニメーションを動かす箇所の説明をします。

# 再描画する際の設定を記載
def _update_plot(i):
    y = yt[i]
    fig.clear()
    plt.plot(x_range,y)
    plt.grid(True)
    plt.xlim([x_range_start, x_range_end])
    plt.ylim([-h - 2, h + 2])

# アニメーションの設定
ani = animation.FuncAnimation(fig, _update_plot, frames=360, interval=20)

実際にアニメーションを実行しているのは、animation.FuncAnimationの箇所です。

このメソッドでは４つの引数を設定しています。

1つ目の引数は描画する描画する対象のfigureを設定します。

2つ目の引数はfigureを更新するメソッドを指定します。メソッドの引数には0始まりで、1づつ増加する変数が勝手に入るようになっています。

3つ目以降は任意の変数で、今回はframesとintervalを指定しています。

framesは2つ目の引数で指定したメソッドを呼び出す回数を指定しています。

intervalはfigureを更新する間隔を指定しています。

FuncAnimationの詳細は次を参考にしてください。

そしてfigureを更新している_update_plotでは、波動方程式で算出したデータをiを利用して順番に取り出して図を更新しています。

さいごに

Pythonを使った簡単なアプリを作ってみましたが、いかがでしたでしょうか？

意外と簡単で、面白いなと思っていただけたら幸いです。

引き続き、アプリ開発を通じてプログラミングの学習を積んでいきましょう！