2020/09/20

プログラミング講座 (202) 1次元セルオートマトン

以前、Facebook の Small Basic グループに公開した1次元セルオートマトンのプログラムがあったので、これを Small Basic オンライン用に改造しました。

1dca_18

プログラムはこちらに公開しました。描画が終わるまで多少の時間がかかります。上図はルール18の1次元セルオートマトンについて y 方向に各世代を並べたものです。ルール18を含むいくつかのルールでは上図のようなシェルピンスキーのギャスケットと呼ばれるフラクタル図形を生成します。

関連項目

| | コメント (0)

2020/09/14

プログラミング講座 (201) パラメーター

数学のパラメーター

最近の連載で、直線の方程式をパラメーター k で表したり、スーパー楕円をパラメーター θ で表したりしました。このパラメーターは数学用語で媒介変数(ばいかいへんすう)とも言います。確率統計の母数(ぼすう)も英語では parameter です。

y = f(x) において、x を独立変数 (independent variable)、y を従属変数 (dependent variable) と言います。y を x の関数で表せればいいのですが、例えば円の方程式 x2 + y2 = r2 のように y = f(x) で表しずらいとき、媒介変数を使って x = g(θ), y = h(θ) のように従属変数を独立変数の関数で表せると計算がしやすくなったりします。

プログラミングのパラメーター

一方で、プログラミングでは仮引数(かりひきすう)が英語で (formal) parameter です。Small Basic では例えばヘルプ画面に出てくる GraphicsWindow.DrawRectangle(x, y, width, height) の x、y、width、height は仮引数です。これに対して実際に与える値を実引数(じつひきすう)と言い、英語では actual parameter と言います。例えば GraphicsWindow.DrawRectangle(150, 100, 400, 300) の 150、100、400、300 は実引数です。

引数を使うことで、その部分は外から変えられるのでより一般化されることになります。例えば3次関数の y = x3 を計算する関数より y = ax3 + bx2 + cx + d を計算するほうがより一般的な解が得られます。

プログラミングの引数にはもう一つメリットがあります。仮引数がローカル変数として扱われる点です。コピーしたものを変数として使うので、中身を上書きしても実引数は壊れません。

Small Basic では関数の定義ができず、全ての変数がグローバル変数なので、サブルーチンに変数を渡す場合、壊さないようにしたり、事前にコピーするようにするなどの工夫が必要です。また、何を外から渡しているかは、コメントなどで明示したほうが読みやすくなります。

GitHub Gist に Small Basic のサブルーチン群をスニペット (snippet) として公開しています。ここでは疑似的な引数については、

' param x, y - Cartesian coordinate

のように記述しています。この param はもちろん parameter の略ですが、伝統的なドキュメント形式として、JavaDoc、JSDoc 3、Doxigen などの(ソースコードからドキュメントを出力する)ツールで @param 仮引数名 と書いているものを真似ました。 ちなみに C# や VB でも <param id="仮引数名"></param> という記法が使われています。

なお、Gist に上げているサブルーチン群は今のところ Small Basic デスクトップ用なので、Small Basic オンラインでは動かないものもあります。

関連項目

| | コメント (0)

プログラミング講座 (200) 3次ベジエ曲線

2次ベジエ曲線は n = 0.5 のスーパー楕円や放物線が描けることが判りました。3次ベジエ曲線は両端と2つの制御点で描く曲線ですが、どんな曲線が描けるのでしょうか。

3次ベジエ曲線で描ける曲線

まず y = x3 - x が描けるかやってみました。

Cubicbezier_20200913235701

プログラムはこちらに公開しました。y = ax3 + bx2 + cx + d という形の3次曲線は描けそうです。その他に3次曲線の仲間がいろいろあるのですが、試してみたところ |x/a|1/3 + |y/b|1/3 = 1 という式のスーパー楕円、y2 = ax3 という式の半3次放物線、y2 = x3 +3x2 という式のチルンハウス3次曲線は描けることが判りました。

3次ベジエ曲線は2次ベジエ曲線を含む

なお、3次ベジエ曲線は2次ベジエ曲線を含んでいるので、制御点をうまく配置すれば2次ベジエ曲線と同じ曲線が描けます。

3次ベジエ曲線で描けない曲線

こちらも色々試しました。n = 1, n = 1/2, n = 1/3 以外のスーパー楕円は描けません。n = 2 のとき楕円(円)も近似するしかありません。双曲線 y = x-1 も描けません。デカルトの葉曲線 (folium of Descartes) x3 + y3 = 3axy も描けません。サイクロイド (cycloid) x = a(θ - sinθ), y = a(1 - cosθ) も描けませんでした。

あと、試していないのですが、描けなさそうなのが、シッソイド (cissoid of Diocles) (x2 + y2)x = 2ay2 や アーネシの曲線 (witch of Agnesi) (x2 +c2)y - c3 = 0 です。xy の項があると双曲線 (xy = 1) と同様描けないんだと思います。

関連項目

| | コメント (0)

2020/09/02

プログラミング講座 (199) スーパー三角関数?

円を一般化したのが楕円、楕円を一般化したのがスーパー楕円なので、円もスーパー楕円の一種です。半径1の円をパラメーターθで表した式が、

x = cos θ

y = sin θ

です。三角関数のコサインとサインです。スーパー楕円をパラメーターθで表した式、

x = sgn(cos θ) a |cos θ|2/n

y = sgn(sin θ) b |sin θ|2/n

はスーパー三角関数と呼んでもいいかもしれません。今回はこれをグラフにしてみましょう。当然ながら a = 1, b = 1, n = 2 のときは半径1の円と同じ式になります。a, b は振幅を表しているだけなので今回は 1 に固定して n を変化させながらグラフを描いていきます。スーパーコサイン (?) の n = 0.5 のときが下図。

Supercosine05

スーパーサイン (?) の n = 1.0 のときが下図になります。

Supersine10

プログラムはこちらに公開しました。

関連項目

| | コメント (0)

2020/09/01

プログラミング講座 (198) スーパー楕円

前回、2次ベジエ曲線はスーパー楕円の n = 0.5 のときの形という話をしました。今回はそのスーパー楕円を描くプログラムを作りました。プログラムはこちらです。下図は n = 0.5 のときのスーパー楕円で星形に凹んだ形になります。

Superellipse05

今回は DrawGrid を変更し、方眼線の座標系を数学でおなじみの原点が中心にあって、y 座標が上向きにしました。また、スーパー楕円が見やすいように方眼線の色も変更しました。

追記:n = 2/3 のときのスーパー楕円 x2/3 + y2/3 = 1 は星芒形 (astroid) と呼ばれています。ちなみに小惑星 (asteroid) とは綴りが違うそうです。また、芒(ぼう)はススキや草木のトゲを表す字で草かんむりの下は亡でなはく、左上が付き出ないようです。

関連項目

| | コメント (0)

2020/08/31

プログラミング講座 (197) 2次ベジエ曲線

今回は、前回の応用で2次ベジエ曲線を描いてみようと思います。意外と簡単です。前回のように直線を表す緑の点を両端とする中間の点を赤い点で表し、軌跡を赤い線で表しました。下図が2次ベジエ曲線です。

Beziercurve

プログラムと解説はこちら。この2次ベジエ曲線はどのような曲線なのか解説で述べていますが、スーパー楕円と呼ばれるものの一種と判りました。

追記:その後、3次ベジエ曲線について調べていたら、@HMMNRSTさんの「ベジェ曲線を用いて正確に描ける曲線」という投稿を見つけ、3次ベジエ曲線で3次曲線を表せることを知りました。ということは、2次ベジエ曲線で2次曲線も表せそうです。確かめてみたところ、v1=(0, 0)、v2=(0.5, 0)、v3=(1, 1) と置けば放物線 y = x2 が描けます。その後も x を 0.5 ずつ増やしながら y に適切な値を設定すれば放物線を伸ばしていけることも確認しました。つまり、2次ベジエ曲線は、制御点の置き方次第で一部のスーパー楕円や放物線も表せるというのが正確なところです。

追記その2:放物線 y = x2 の区間をいろいろ変えてみた結果、v1=(-0.5, 0.25), v2=(0, -0.25), v3=(0.5, 0.25)のときにスーパー楕円と同じ曲線が描けることが判りました。一部のスーパー楕円が描けると思っていたのは、それ自身が放物線だったからのようです。したがって、2次ベジエ曲線で描けるのは放物線のより一般的な形(たとえば y2 = x や45°回転したスーパー楕円などを含む)ということらしいです。

関連項目

| | コメント (0)

2020/08/27

プログラミング講座 (196) 直線の方程式

Small Basic オンラインでのプログラミングで絵を動かすところまで進みました。今回からは、プログラミングと数学の関係を探っていきたいと思います。

今回は直線の方程式で直線上の点を計算します。方程式はベクトルを使って2点を通る式を立てます。2点 v1v2 を通る直線を v で表し、

v = (1 - k) v1 + k v2

とします。k はパラメーターで変化します。例として、v1 = (100, 100)、v2 = (500, 300) としてプログラムを作成しました。

Lineanime

プログラムはこちらに公開しました。この式はプログラミングでよく使う式だと思います。このプログラムのように図形を直線上に移動させるときにはもちろん、2色 v1v2 のグラデーション v を計算するときも同じ式が使えます。これも r, g, b を軸とするカラーキューブの中の直線上の色を取り出していることになるわけです。また、ベジエ曲線の計算にも応用できます。

一つの式をいろいろ応用することで何か本質的なイメージがつかめるようになるのではないかと思います。抽象的な数式をプログラミングによってさまざまな具体的な例としてシミュレーションができることはコンピューターの重要な機能といえそうです。

関連項目

| | コメント (0)

2020/08/26

プログラミング講座 (195) 絵を動かしてみた

前回作ったレーシングカーの絵を動かしてみました。絵を動かすには Shapes オブジェクトを使います。

Classicf1_0_2_0

プログラムをこちらに公開しました。レーシングカーはたくさんの楕円や長方形などでできているので、これらを全て動かす必要があります。動かすタイミングにはイベントを使うと便利です。キー入力のイベントでもいいですが、タイマーのイベントを使いました。

関連項目

| | コメント (0)

2020/08/23

プログラミング講座 (194) 絵を描いてみた

Small Basic オンラインのプログラムでレーシングカーの絵を描いてみました。

Classicf1

プログラムをこちらに公開しました。ドライバーの絵が細かいので別途大きく作成してから縮小しました。

関連項目

| | コメント (0)

2020/08/21

プログラミング講座 (193) タートルグラフィックス

今回はタートル(カメ)を動かしてみましょう。Small Basic のマスコットもカメですね。今回基本的に使うのは Turtle.Move() と Turtle.Turn() だけです。タートルの座標がどう変わるのか表示するために、Turtle.X と Turtle.Y も参照します。

Turtle.X と Turtle.Y の値は始め 320 と 240.0(なぜか Y だけ小数点あり)ですが、動くにしたがって端数が発生するのが分かります。

Turtlesample

今回のプログラムはこちらに公開しました。タートルグラフィックスはタートルの動きを自分に置き換えることで、理解できるようになります。簡単なプログラムでも意外な図形が描けたりするのが面白いところかもしれません。

関連項目

| | コメント (0)

より以前の記事一覧