
マイケル
みなさんこんにちは!
マイケルです!
マイケルです!

エレキベア
こんにちクマ〜〜〜

マイケル
今回は引き続きゲーム数学シリーズ!
前回は微分を使ってみたので、今回は積分を使っていきます!
前回は微分を使ってみたので、今回は積分を使っていきます!

エレキベア
そうくると思ったクマ〜〜〜

マイケル
積分も実装してみると案外簡単だし理解が深まると思います!
早速やっていこう!!
早速やっていこう!!
積分とは

マイケル
積分とはある関数を導関数とする元の関数を求めることです。
簡単にいうと微分の逆です!
簡単にいうと微分の逆です!

マイケル
積分はインテグラル(∮)を用いて記述され、簡単な例を挙げると下記のようになります。
$$ \int2xdx = x^2 + C $$

エレキベア
微分と逆の計算をすればいいクマね
でもこのCは何クマ??
でもこのCは何クマ??

マイケル
Cは積分定数と言われていて、任意の値になるんだ。
例えば下記のように微分をした場合には2は消えてしまいます。
このように導関数からは復元できない値が出てくるわけですね
例えば下記のように微分をした場合には2は消えてしまいます。
このように導関数からは復元できない値が出てくるわけですね
$$ f(x)=x^2+2 $$
$$ f'(x)=2x $$

エレキベア
なるほどクマ
微分すると消えてしまう値を表しているクマね
微分すると消えてしまう値を表しているクマね

マイケル
このように範囲を決めずに積分定数を用いて表す積分を不定積分と言います。
逆に、下記のように求める範囲を決めて積分することを定積分と言います。
逆に、下記のように求める範囲を決めて積分することを定積分と言います。
$$ \int_{1}^{3}2xdx = 3^2 – 1^2 = 8 $$

マイケル
これは結果として関数の指定範囲の面積となります。
下記のようなイメージですね
下記のようなイメージですね


エレキベア
微分は傾きを求めるものだったクマが、
積分は面積を求めるものになるクマね
積分は面積を求めるものになるクマね
積分の実装

マイケル
それでは早速積分を実装してみます。
下記は積分定数は無視して関数を微分した結果を描画するサンプルです。
(青:元の関数 ピンク:積分した関数)
下記は積分定数は無視して関数を微分した結果を描画するサンプルです。
(青:元の関数 ピンク:積分した関数)
See the Pen
20221220_integral by masarito617 (@masarito617)
on CodePen.



エレキベア
ちゃんと元の形を求められていそうクマね

マイケル
積分の実装箇所は下記のようになっていて、定めた間隔分、値を求めて加算しています。
先ほどの面積を求めるイメージですね。
先ほどの面積を求めるイメージですね。
// 関数
function func(x) {
return 2*x; // => x**2
}
// 積分
function integral(start, end) {
let r = 0.0;
let dx = 0.01; // 間隔を小さくすると精度が向上する
if (start > end) {
[start, end] = [end, start];
}
for (var x = start; x < end; x += dx) {
r += func(x) * dx;
}
return r;
}

エレキベア
実装はかなりシンプルなのクマね

マイケル
func関数の中身を変更することで任意の関数の積分結果を表示することができるので、いろいろ変えて遊んでみてください!
応用:面積を求める

マイケル
次は面積を求めているイメージが分かりやすいよう、0と指定のX値の定積分の結果と面積を可視化するサンプルを作って見ました。
See the Pen
20221220_integral_area by masarito617 (@masarito617)
on CodePen.



エレキベア
なんだか見ていて面白いクマね

マイケル
右上に動きを停止するボタンも用意しているので、止めてみると問題なく面積を求められていることが確認できます。


エレキベア
実際に図で見てみると分かりやすいクマね
応用:クロソイド曲線を描画する

マイケル
最後に応用として、積分を利用してクロソイド曲線というものを描画してみます。
クロソイド曲線は何かいい感じの螺旋を描く曲線で、下記の積分値で求めることができます。
クロソイド曲線は何かいい感じの螺旋を描く曲線で、下記の積分値で求めることができます。
$$ x(l)=\int_{0}^{l}cos(\frac{\theta^2}{2}d\theta) $$
$$ y(l)=\int_{0}^{l}sin(\frac{\theta^2}{2}d\theta) $$

エレキベア
xとyのどちらも積分することで求めるクマね

マイケル
実際に描画するサンプルは下記になります!
See the Pen
20221222_integral_clothoid by masarito617 (@masarito617)
on CodePen.


マイケル
問題なく表示することができました!

エレキベア
美しいクマ・・・

マイケル
描画部分のコードは下記になります。
コードで見てもかなりシンプルですね!
コードで見てもかなりシンプルですね!
// クロソイド曲線の描画
function drawClothoidIntegral() {
strokeWeight(1.5);
stroke(0, 0, 255);
let dt = 0.01;
let l = 10;
for (let t = -l; t < l; t+=dt) {
let vec = 0 < t ? 1 : -1; // 0からの方向になるので負の場合は反転させる
drawLineCanvas(
vec * integral(0, t, clothoidFuncX),
vec * integral(0, t, clothoidFuncY),
vec * integral(0, t+dt, clothoidFuncX),
vec * integral(0, t+dt, clothoidFuncY));
}
}
// クロソイド曲線の関数
function clothoidFuncX(x) {
return cos(x**2/2);
}
function clothoidFuncY(y) {
return sin(y**2/2);
}

エレキベア
積分、恐るるに足らずクマ〜〜〜!!
おわりに

マイケル
というわけで今回は積分について触れてみました!
どうだったかな??
どうだったかな??

エレキベア
実装するとやっぱり分かりやすいクマね〜〜

マイケル
コードを書いてみるとすごくシンプルな計算をしていることが分かるね!
積分を使えると様々な式の導出も出来るようになるから、積極的に使っていこう!
積分を使えると様々な式の導出も出来るようになるから、積極的に使っていこう!

マイケル
それでは今日はこの辺で!
アデューー!!
アデューー!!

エレキベア
クマ〜〜〜〜
【ゲーム数学】第七回 p5.jsで学ぶゲーム数学「積分の実装とクロソイド曲線」〜完〜
コメント