本記事の概要
- 以前こちらの記事で公開しましたMind Render上でミッキーマウスの輪郭の数式アートを描くプログラムを高速化した話に関する記事となります。
- 具体的には、その記事で触れた高速化のためのアイディアを実装することで高速化に成功しました。
- 描画速度が20倍くらいになり、10秒程度で描画できるようになりました。
- このプログラムについて本記事で紹介します。
- 作成した高速化プログラムを実行すると、下の数式アートが描かれます。
本記事の作成目的
- 下記の対象読者の知的好奇心を満たすこと
- 本件に関して学んだ知識を著者が定着させること
対象読者
- Mind Renderに興味がある人
- 数式アートに興味がある人
Mind Renderとは？
- Scratchのようなブロックベースのゲーム開発ツールとなります。
- 2D、3Dゲームの開発やムービーの作成、物理エンジンを利用したシミュレーションなどを行うことができます。
数式アートとは？
- 数式を使って描かれた図形です。
- DesmosやGeoGebraなどの数学ソフトウェアを使用して作成されることが多いようです。
使用数式
- 下のミッキーマウスの輪郭の数式を利用しました。
y=\sqrt{1-x^{2}}\left\{\left|x\right|\le.274\ \right\}{\tag2}
y=\sqrt{1-x^{2}}\left\{\left|x\right|\ge.962\right\}{\tag3}
y=-\sqrt{1-x^{2}}{\tag4}
y=-\frac{\sqrt{-400x^{2}-640x-135}}{20}+\frac{4}{5}\left\{x\le-.964\right\}{\tag5}
y=\frac{\sqrt{-400x^{2}-640x-135}}{20}+\frac{4}{5}\left\{x\le-.274\right\}
{\tag6}
y=-\frac{\sqrt{-400x^{2}+640x-135}}{20}+\frac{4}{5}\left\{x\ge.964\right\}
{\tag7}
y=\frac{\sqrt{-400x^{2}+640x-135}}{20}+\frac{4}{5}\left\{x\ge.274\right\}
{\tag8}
{(2)-(8)式のDesmos上での描画結果}
作成プログラム
-
公開
- こちらに作成プログラムを公開しています(閲覧するためには、Mind Renderのインストールが必要です)。
-
メインプログラム
-
メインプログラムの各変数、定数、マクロ、オブジェクトの定義一覧
| 種別 | 名称 | 定義 |
|---|---|---|
| マクロ | Border1(-0.274, 0.274) | 数式(2)を、$-0.274(引数1) <= x <= 0.274(引数2)$ の範囲で描画するマクロです。 |
| マクロ | Border1(-1, -0.962) | 数式(3)の左半分を描画するマクロです。引数は同様にxの範囲となります。 |
| マクロ | Border1(0.962, 1) | 数式(3)の右半分を描画するマクロです。引数は同様にxの範囲となります。 |
| マクロ | Border1_2(-1, 1) | 数式(4)を描画するマクロです。引数は同様にxの範囲となります。 |
| マクロ | Border1_3(-1.4, -0.964) | 数式(5)を描画するマクロです。引数は同様にxの範囲となります。 |
| マクロ | Border1_4(-1.4, -0.274) | 数式(6)を描画するマクロです。引数は同様にxの範囲となります。 |
| マクロ | Border1_5(0.964, 1.4) | 数式(7)を描画するマクロです。引数は同様にxの範囲となります。 |
| マクロ | Border1_6(0.274, 1.4) | 数式(8)を描画するマクロです。引数は同様にxの範囲となります。 |
-
メインプログラムの解説
- 開始時（スタートボタンが押された時）に実行されるプログラムです。
- 数式(2)-(8)を描く各マクロBorder1-Border1_6を順次実行します。
-
Border1(要素1, 要素2)、Border1_CalcY(要素1)
-
Border1(要素1, 要素2)、Border1_CalcY(要素1)の各変数、定数、マクロ、オブジェクトの定義一覧
| 種別 | 名称 | 定義 |
|---|---|---|
| 変数 | x | 現在のx座標の値 |
| 変数 | y | 現在のy座標の値 |
| 定数 | Tx | x軸方向の間隔 |
| 定数 | Xs | 最初のx座標の値 |
| 定数 | Xe | 最後のx座標の値 |
| オブジェクト | 自分 | オレンジ色の球体のオブジェクトであり、開始時（スタートボタンが押された時）にメインプログラムを実行します。 |
| マクロ | Border1_CalcY(要素1) | 要素1(x)に対するyの値($\sqrt{1-x^{2}}$)を計算し、座標(x, y)に自分の分身（オレンジ色の球体）を表示します。 |
- Border1(要素1, 要素2)の解説
- 初期値を設定します。
- Txを0.01とします。
- Xsを要素1とします。
- Xeを要素2とします。
- xをXsとします。
- ループ
- Border1_CalcY(x)を実行します。
- xの値をTxの間隔で増加させます。
-
x >= Xeとなったらループを抜けます。- 抜ける直前にBorder1_CalcY(Xe)を実行します。
- 初期値を設定します。
- Border1_2(要素1, 要素2), Border1_3(要素1, 要素2), ..., Border1_6(要素1, 要素2)
- Border1(要素1, 要素2)とほぼ同様のため省略します。
- yの値を計算する箇所のみが、それぞれ異なっています。
- それぞれ対応する計算式のものになっています。
- Border1(要素1, 要素2)とほぼ同様のため省略します。
まとめ
本記事では、Mind Renderや数式アートに興味がある人を対象に、読者の知的好奇心を満たすことなどを目的に、Mind Render上でミッキーマウスの輪郭の数式アートを描くプログラムを、過去記事で公開した高速化のためのアイデアを実装して高速化させた話について公開しました。
まず、「本記事の概要」の項目で、高速化させたプログラムの実行結果である輪郭を20倍速で描画する動画を公開しました。
次に、「使用数式」の項目で、使用したミッキーマウスの輪郭の数式を公開しました。
最後に、「作成プログラム」の項目で、作成したプログラムとその解説を公開しました。
本記事が読者の方の知的好奇心を満たす一助となれば幸いです。
参考ページ
ミッキーマウスの数式
https://corollary2525.hatenablog.com/entry/2019/12/11/224546
MindRender上で描いたコウモリの数式アート
https://www.youtube.com/watch?v=fodyto4HlBc
関連ページ
Mind Render上でミッキーマウスの輪郭を描く数式アートを描いた話
https://qiita.com/miya_gamedev/items/a2606edf625985334593
MindRender公式ページ
https://mindrender.jp