« 2020年6月 | トップページ | 2020年9月 »

2020年8月

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)

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

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

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

Points

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

関連項目

| | コメント (0)

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

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

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

Gridsample

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

関連項目

| | コメント (0)

2020/08/19

プログラミング講座 (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

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

関連項目

| | コメント (0)

プログラミング講座 (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 向けにたくさんプログラムを書いていこうと思うので、今回の記事は必要に応じて更新していこうと思います。

関連項目

追加リソース

| | コメント (0)

2020/08/14

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 としてレポートしています。

(つづく)

関連項目

| | コメント (0)

2020/08/12

C# (14) サンプルによる SBO のテスト

Small Basic オンライン (SBO) の開発も結構進んできたのですが、まだまだ デスクトップ版ほどには仕上がっていません。きちんとテストをして、不具合についてはレポートしていく必要があります。

Small Basic の書籍に掲載されているプログラムを走らせるということもやってみたのですが、結局、起きた問題に限定したコードを作り直すことになるので、なかなか手間がかかります。

そこで、今度はオブジェクトの操作やプロパティ毎のサンプルプログラムを走らせてみようと思います。Small Basic のサンプルプログラムは TechNet Wiki にまとめている最中で、File オブジェクト、Math オブジェクト、Sound オブジェクトの一部がまだ完成はしていません。これを進めることで、サンプルプログラムも充実しながら、テストも並行して進められると思います。

今日は 14 のキーワードに関するサンプルを走らせてみました。

(1) If Then ElseIf Else EndIf (WKV187) PASS

(2) For To Step EndFor (MPP890) FAILED

GraphisWindow.Title = "Pinstripe" で次のエラー: #69 として報告しましたが、仕様としてクローズしています。

The library menber 'GraphicsWindow.Title' was available in older versions only, and has not been made available to this version yet.

(3) While EndWhile (VXQ678) FAILED

以下の4つのエラー: これらも SBO の仕様と考えたほうが良さそうです。

  1. Property 'GraphicsWindow.Height' cannot be assigned to. It is ready only.

  2. Property 'GraphicsWindow.Width' cannot be assigned to. It is ready only.

  3. The library member 'GraphicsWindow.Top' was available in older versions only, and has not been made available to this version yet.

  4. The library member 'GraphicsWindow.Left' was available in older versions only, and has not been made available to this version yet.

上記の行を削除すると動作しますが、タートルの動きがとても遅いのも気になります。While のサンプルとしてはもうちょっとシンプルなものにしたほうがいいかもしれません。

(4) Sub EndSub (DPB919) PASS

(5) Goto (WWV874) PASS

この調子で演算子や20個全てのオブジェクトの全メンバについての動作を確認したいと思います。

関連項目

| | コメント (0)

2020/08/10

C# (13) SBO 既知の留意点3

最近、Small Basic Online (SBO) の一部の留意点が解決されました。前回から新たに追加された留意点もありますが、それも含めてまとめました。

2020-03-06 以降、解決した留意点

以下の12件の留意点が解決されました。ただし #57 に関しては仕様が変更され従来の "#aarrggbb" ではなく "#rrggbbaa" の形式になりました。

  • #134 レベル 2 チュートリアルが動かない(#106や#112と同じ問題)
  • #129 文字リテラルの一部が消える
  • #127 Mac+Safari で SBO のエディタ画面が表示されない
  • #126 GraphicsWindow.FontBold のデフォルトが "False"
  • #122 TextWindow.ReadNumber で負の数や小数が入力できない
  • #112 GraphicsWindow.KeyDown イベントが呼び出されない
  • #107 ブラウザ Chrome と Edge でタートルが軌跡の上に現れない
  • #106 GraphicsWindow.LastKey が常に空を返す
  • #88 ブラウザ Edge で Shapes.Zoom() が図形の中心から拡大・縮小しない
  • #87 ブラウザ Edge で Shapes.Rotate() が図形の中心で回転しない
  • #58 GraphicsWindow.DrawImage が画像を表示しない
  • #57 "- #12345678" のような透明な色は無視される

2020-08-10現在、残っている留意点

以下の25件が残っている留意点です。#139~#135 は新たに追加された留意点です。

  • #139 名前付き定数を Small Basic に導入(仕様変更)
  • #138 数値計算でオーバーフローでもアンダーフローでも例外を発生させる(仕様変更)
  • #137 数値の Small Basic 内部での型を IEEE decimal64 に統一(仕様変更)
  • #136 右ボタンで表示されるメニュー(Cut/Copy/Paste/Find/Format Program)がない
  • #135 レベル 3 チュートリアルが動かない(プログラムにループがあると Controls.MouseMoved イベントが呼び出されない)
  • #125 プログラムにループがあると Controls.ButtonClicked イベントが呼び出されない
  • #124 テキストボックスとマルチラインテキストボックスのフォント属性が変更できない
  • #119 配列の初期化がされない(a = “1=One;2=Two;”のような初期化ができない)
  • #118 引用符で閉じない文字リテラルが文法エラーになる
  • #117 Sound.Play と Stop が文法エラーになる
  • #116 Sound.PlayMusic が文法エラーになる
  • #115 GraphicsWindow.Left と Top が文法エラーになる
  • #114 GraphicsWindow.CanResize が文法エラーになる
  • #113 GraphicsWindow.Width と Height への代入が文法エラーになる(リードオンリー)
  • #110 GraphicsWindow.DrawImage でローカルファイルが使用できない
  • #108 オンスクリーン キーボードが自動的に有効にならない
  • #74 GraphicsWindow.GetPixel がサポートされていない
  • #69 GraphicsWindow.Title がサポートされていない
  • #60 オブジェクトを切り替えたとき、ライブラリ サブメニューがスクロールしたままとなる
  • #27 ビルド中に monaco を最小化から除外する
  • #13 インポートと発行機能(発行とインポートが未サポート)
  • #12 長い初期ロード時間(起動に時間がかかる)
  • #4 ライブラリ エクスプローラにバッジを付ける
  • #3 ブリッジプロジェクトを Electron.NET に置き換える
  • #2 開発サイクルの改善

関連項目

| | コメント (0)

2020/08/09

プログラミング講座(188) もう一つのピクショナリー

今日は Anime のスプライトの機能を使った「ピクショナリー」というプロジェクトについて書きます。

もう一つのピクショナリー

ピクショナリーは元々描いた絵が何かを当てるアメリカのゲームです。今日紹介するのは、Small Basic に出てくる英単語を Small Basic で絵にするというオープンなプロジェクトについてです。

英語が避けられない

Small Basic は子ども向けのプログラミング入門用の言語ですが、英語がベースになっています。変数名やサブルーチン名には日本語も使えるのですが、オブジェクト、プロパティ、操作、イベントなど全て英語です。ほとんどのプログラミング言語は英語がベースで、これは避けて通れない状況です。

そこで、英語が非ネイティブな国の子どもたちのために、Small Basic に出てくる英単語を絵で表すプロジェクトを始めました。ピクショナリー プロジェクトです。

こんなプログラム

Pictionary.sb がメインで単語をクリックするとその単語を表示するプログラムが起動するようになっています。LitDev 拡張機能を使ってプログラムの呼び出しや英単語の発音などができるようになっています。

Pictionary173

Count

やっかいなお題が進まない

Small Basic のプログラムを記述する際に出てくる英単語は 172 個ありますが、現在、118 個まで公開済みです。残り 54 個ですが、だんだん手強くなってきています。たとえば、Definition, Elapse, Resume などです。

いっしょに描いてみませんか

このプロジェクトはオープンソースなので、協力者を募集中です。参加の方法についてはこちらをご覧ください。すでにクロアチアのトライヘストさん、中国のテルマン-ピオニエールさんの協力を得ています。Small Basic フォーラムの[スレッド](英語)で情報を交換しています。

| | コメント (0)

« 2020年6月 | トップページ | 2020年9月 »