プログラミング講座 (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°回転したスーパー楕円などを含む)ということらしいです。

関連項目

プログラミング講座 (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 を軸とするカラーキューブの中の直線上の色を取り出していることになるわけです。また、ベジエ曲線の計算にも応用できます。

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

関連項目

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

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

Classicf1_0_2_0

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

関連項目

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

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

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

Turtlesample

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

関連項目

プログラミング講座 (192) 点を打つ

今度は方眼線の交点に点を打ってみたいと思います。座標 (100, 100) と (200, 100) にぞれぞれ ● と × を描画してみます。例えば ● の場合、GraphicsWidth.FillEllipse(100, 100, 10, 10) としてしまうと、● が座標 (100, 100) の右下に来てしまいます。なので、サイズの半分だけ左上にずらして GraphicsWidth.FillEllipse(95, 95, 10, 10) とするとちょうど交点の上に ● が乗ります。

● なのか × なのか見にくいですが、下図をクリックすると拡大されます。

Points

プログラムはこちらに公開しました。点を打ってそれを線でつなげれば絵になりそうです。

関連項目

プログラミング講座 (191) 方眼線を引く

今回は方眼線(方眼罫)を描くプログラムを書いてみました。プログラムはこちらに公開しました。Small Basic オンラインではまだ発行 (Publish) の機能ができていないので、しばらくはこのように自前のホームページ上にプログラムを公開しようと思います。

10 ピクセルおきに線を引いています。100 ピクセル毎の線は濃い色にしています。線の色だけだと交点のところは後に描いたほうの色になってしまうので、透明色を使いました。Small Basic オンライン (SBO) では “#rrggbbaa” で指定します。下図は実行結果ですが、幅が 1300 ピクセル弱、高さが 400 ピクセル強あるのが分かります。

Gridsample

座標は x 座標が左から右へ増加、y 座標が上から下へ増加します。y 座標は数学で習うのと上下が逆になります。左上が原点 (0, 0) です。次回以降はこの方眼線の上に絵を描いていきたいと思います。

関連項目

プログラミング講座 (190) Small Basic オンライン

Small Basic(スモールベーシック)の公式サイト http://smallbasic.com にはマスコットのシェルダン(左)とシェリー(右)がいます。その右側(画面サイズによっては上)に [Download Small Basic](上)というボタンと [Start Conding Online](下)というボタンがあります。上が Small Basic デスクトップをダウンロードするボタンで、下が Small Basic オンラインをブラウザ上で開始するボタンです。今回は下のボタンを押して進めていきます。

Smallbasicweb

次に現れるのが Small Basic オンラインのエディター画面です。ここには予めサンプルのプログラムが表示されています。このプログラムを動かしてみましょう。メニューの一番右にある [Run] ボタンを押します。

Sboeditor

このサンプルプログラムは名前を聞いてそれを表示するようになっています。名前を入力し [Enter] キーを押してみましょう。

Sbosample

[Back] ボタンを押して、エディター画面に戻ります。このサンプルはテキストを表示するプログラムでしたが、今度はグラフィックスを表示するプログラムを書いてみましょう。メニュー左端の [New] ボタン、[OK] ボタンを押し、以下のプログラムを打ち込んで [Run] ボタンを押してみます。

GraphicsWindow.BrushColor = “Orange”
GraphicsWindow.FillEllipse(10, 10, 200, 200)

Circle

[Back] でエディターに戻ります。左サイドにある Small Basic の3つの立方体のアイコンをクリックしてリファレンスを表示してみます。現在、Small Basic デスクトップと同じリファレンスが表示されますが、前回お伝えしたように、実装されていない機能もかなりあります。

Sboreference

今回は本当に簡単な説明でしたが、次回に続きます。

関連項目

プログラミング講座 (189) ブラウザではじめよう

アニメ開発の途中ですが、Small Basic オンラインが仕上がってきました。そこで、ブラウザ上でプログラミングができる Small Basic オンラインを使ったプログラミングについて書いていこうと思います。最初だけちょっと難しい話をしたいと思います。これは従来の Small Basic ユーザーのために、Small Basic オンラインでどこがどう変わったかという話です。次回以降は純粋に Small Basic オンラインでのプログラミングを楽しんでいこうと思います。

この記事では Small Basic v1.2 を SBD、Small Basic オンライン v1.0 を SBO と表記します。SBO ベースの Small Basic デスクトップ が計画されていますので、将来はそれが SBD と呼ばれるかもしれないのですが、この記事では従来の SBD を表します。

SBO での変更点

■ エディターの変更点

キーワード、リテラル、オブジェクト、変数名などで色を変えて表示していますが、SBD とは違う色になりました。タブは SBD では 2 文字分でしたが 4 文字分になりました。検索だけでなく、SBO では置換ができるようになりました。

メニューの [Save](保存) / [Open](開く) で読み書きするファイルの拡張子が .txt になりました。メモ帳などでも編集しやすくなりました。[Save] ではダウンロードフォルダに保存されます。

メニューの [New](新規)を押すと “This will clear the existing program. Are you sure?” という確認のポップアップが出ます。SBO では一度に編集できるプログラムは1つになりました。ただし、他のタブや他のブラウザで SBO を起動することが可能です。

以下の機能は SBO v1.0 ではまだ実装されていません。ボタンが押せません。
– Publish(発行)
– Inport(インポート)

メニューに [Debug](デバッグ)ボタンが追加されました。1ステップずつの実行と、変数の内容も確認できるようになりました。

メニューの [Graduate](昇格する)ボタンの機能は SBO ではなくなりました。

エディター上で右ボタンを押すと表示される Cut(切り取り)、Copy(コピー)、Paste(貼り付け)、Find(検索)、Format Program(プログラムをフォーマットする)のメニューは今のところなくなりました。右ボタンを押すと、ブラウザのメニューが表示されます。

■ 拡張機能が使えない

Kinect for Small Basic や LitDev などの拡張機能が使えません。

■ 変数の初期値

変数の初期値は “” で、SBD では初期化せずに変数を参照するとコンパイルエラーが表示されましたが、SBO ではエラーがでません。

■ 配列の初期化

SBD では Not = “False=True;True=False;” で Not という配列の初期化ができましたが、SBO では単に Not という変数に上記の文字列が入るだけとなりました。

■ 透明色の指定

Small Basic v1.2 では不透明度を表すアルファ値の指定は “#aarrggbb” でしたが、SBO v1.0 では “#rrggbbaa” になりました。

■ 実装されない機能

以下の機能は SBO(オンライン)では実装できません。コードに書くと “The library member ‘ObjXXX.MbrXXX’ cannot be used in the online editor. Please download the desktop editor to use it.” という文法エラーになります。

– File.GetSettingsFilePath を除く全ての File オブジェクトのメンバー
– ImageList.LoadImage()

以下の機能は SBO v1.0 ではまだ実装されていません。コードに書くと “The library member ‘ObjXXX.MbrXXX’ was available in older versions only, and has not been made available to this version yet.” という文法エラーになります。
– 全ての Desktop オブジェクトのメンバー
– 全ての Dictionary オブジェクトのメンバー
– File.GetSettingsFilePath()
– 全ての Flickr オブジェクトのメンバー
– GraphicsWindow.CanResize
– GraphicsWindow.GetPixel()
– GraphicsWindow.Left
– GraphicsWindow.Title
– GraphicsWindow.Top
– Program.ArgumentCount
– Program.Directory
– Program.GetArgument()
– TextWindow.CursorLeft
– TextWindow.CursorTop
– TextWindow.Hide()
– TextWindow.Left
– TextWindow.Pause()
– TextWindow.PauseIfVisible()
– TextWindow.PauseWithoutMessage()
– TextWindow.Show()
– TextWindow.Title
– TextWindow.Top

■ 仕様変更

以下のプロパティは SBO v1.0 ではリードオンリーになりました。値を代入しようとすると文法エラー “Property ‘ObjXXX.PrpXXX’ cannot be assigned to. It is ready only.” になります。
– GraphicsWindow.Width
– GraphicsWindow.Height

プロパティの初期値は異なるものがあります。

GraphicsWindow.FontName で使えるフォントは限定されています。デフォルトのフォントは “Roboto” です。

Program.Pause() というデバッグ用のメソッドが追加されブレークポイントとして使用できます。ちなみメソッドは SBD では操作と呼ばれていました。

■ Shapes のサイズ

Shapes.AddRectangle(100, 100) で正方形を作ると、ペンの太さも含めて 100 x 100 ピクセルの大きさでした。一方、GraphicsWindow.DrawRectangle(10, 10, 100, 100) で作った場合はペンの太さの分だけ大きくなっていました。SBO では後者に統一され ペンの太さが 2 ピクセルだとどちらも 102 x 102 ピクセルの正方形が描かれるようになりました。

■ タートルのデザイン

タートルのデザインが変更になりました。特にサイズが大きくなりました。

■ タートルの軌跡

タートルの軌跡は SBD では Shapes と同じで、後に作られたほうが手前に表示されていましたが、SBO では Shapes よりタートルの軌跡が常に手前に来ます。

新しいプログラミングスタイル

上記変更点を踏まえて、新しい Small Basic のプログラミングについてポイントを説明しようと思います。

■ タイトルは自前で作る

GraphicsWindow.Title も TextWindow.Title も変更できなくなったので、タイトルを表示したいときは Shapes.AddText や TextWindow.WriteLine などを使ってウィンドウ内に表示します。あるいは作らないという選択もありでしょう。

■ ウィンドウサイズに依存しない工夫

ホームページがさまざまな大きさのデバイスにも対応できるようにレスポンシブデザインという考え方があります。SBO も GraphicsWindow.Width や GraphicsWindow.Height が指定できず、ブラウザのウィンドウサイズに影響されることから、レスポンシブデザインの考え方を取り入れるといいでしょう。具体的には GraphicsWindow.Width と GraphicsWindow.Height を監視して、変更されたときに、画面上の配置をやり直すようにします。

まとめ

今回、分かっている範囲で SBO の変更点と、それを踏まえた新しいプログラミングスタイルについて書きましたが、これから SBO 向けにたくさんプログラムを書いていこうと思うので、今回の記事は必要に応じて更新していこうと思います。

関連項目

追加リソース

C# (15) Array オブジェクトのテスト結果

今回のテスト結果

今回は演算子と Array オブジェクトについてテストしました。

(6) 演算子 (ZSP643) PASS

(7) Array オブジェクト (JSM615-1) FAILED

配列のテストが通らなかった点については次項で詳しく結果を見ていきます。

SBD の結果

以下が期待される結果になります。

shape=Rectangle;color=Lime;
Lime
shape=Rectangle;
200
Array param has value 100.
1=x;2=y;
Array param has 4 items.
Array param is an array.
5.7
300
Press any key to continue...

SBO の結果

こちらが実際の結果です。

shape=Rectangle;color=Lime;
Lime
shape=Rectangle;color=;
200
Array param has value 100.
1=200;2=100;
Array param has 4 items.
Array param is an array.
2.0

Program has ended.

まず、3行目の結果が違います。SBD では空文字列を代入することで配列のエントリーを削除できたのですが、SBO では値だけが空になっています。これは #150 としてレポートしました。

次に6行目ですが、Array.GetAllIndices の戻り値が、インデックスの配列ではなく、値の配列になっています。#151 としてレポートしました。

9行目は、インデックスは大文字と小文字を区別しないというテストですが、SBO では区別しています。これは #152 としてレポートしました。

10行目は、`param = “x=200;y=100;width=300;height=150;”` のように配列の複数のエントリーを一度に初期化する方法をテストしたものですが、SBO では配列として初期化されず何も表示されていません。これはすでに #119 としてレポートしています。

(つづく)

関連項目