2020/04/01

プログラミング講座(187) 開発方針の変更

アニメエディターの開発方針を若干変更しようと思います。

  • 入出力ファイルを SVG ファイルに絞ります。
  • これまで拡張機能を使わなかったのですが、コードをコンパクトにする目的で、LitDev Extension を導入します。SVG は XML の一種なので、LDxml オブジェクトが使えます。
  • これまで SVG の <g> にちなんで Group_ という名前で図形グループを扱っていましたが、スプライト Sprite_ という呼び名に変更します。

今回、この方針変更にともなって、GitHub リポジトリを若干変更しました。

  • アニメのサンプルを sample フォルダに移動
  • ツールプログラムを tools フォルダに追加
  • Group 配列仕様を Sprite 配列仕様に変更

追加したツールについて簡単に説明します。どちらもサンプルレベルですが...。

多角形エディター Polygon.sb

Polygoneditor01

簡単な多角形エディターで SVG を出力します。LDShape.AddPolygon() を使っています。2018年に作ったプログラムです。

SVG ビューアー SVGViewer.sb

Svgviewer01a

最近作り始めた新しい SVG ビューアーです。現時点ではウィキペディアにある国旗の SVG ファイルを表示できるようにと考えています。LDxml オブジェクトを使っています。<!DOCTYPE> を含む SVG ファイルは LDxml オブジェクトではうまく扱えないようです。

(つづく)

関連項目

| | コメント (0)

2020/03/15

プログラミング講座(186) アフィン変換

Anime の作成からちょっと脱線します。Shapes の移動・回転・拡大/縮小には Move, Rotate, Zoom といった操作が用意されていますが、自前で計算するにはアフィン変換という行列の掛け算が便利です。Small Basic には行列を扱うライブラリがないので、自分で作り始めました。

行列(matrix)を表現するのに Small Basic のジャグ配列(配列の配列)を利用しました。行列演算のサブルーチンに行列の名前を渡せるように以下のような構造にしました。

matrix[名前]["cols"]
matrix[名前]["rows"]
matrix[名前]["values"][行番号][列番号]

プログラム NGR465 で行列の足し算と掛け算を作りました。これをベースに3次元の回転を計算させたのがプログラム JXK757 です。

Ethanol

エタノールの分子をY軸回りに回転させています。このプログラムではベクトルもスカラもそれぞれ1列、1行1列の matrix として表すことで、同じ Matrix_Mul という掛け算のサブルーチンを使っています。計算できるのは、行列×行列、行列×ベクトルとベクトル×スカラです。順番が違うとエラーになります。(スカラ×スカラもやろうと思えばできます。)

関連項目

| | コメント (0)

2020/03/07

C# (12) ソリューションとプロジェクト

今回は .NET の C# や Visual Basic でプログラムを作成するときに出てくるソリューションとプロジェクトについて、実際に Small Basic オンライン (SBO) 1.0 でどうなっているのかを見ながら解説しようと思います。

Visual Studio にソリューション エクスプローラーというウィンドウがあります。これは smallbasic-editor リポジトリのルートにある SmallBasic.sln というファイルの中身を表しています。ソリューションは SBO 1.0 のように、システム全体を表しています。

Vs-solution-explorer-j

ソリューションの中は9つのプロジェクトに分かれています。例えば SmallBasic.Editor というプロジェクトの中をマウス右ボタンの「エクスプローラーでフォルダを開く」メニューで開いてみると、bin\Debug\netstandard2.0 というフォルダに SmallBasic.Editor.dll というダイナミックリンクライブラリ(実行形式のクラス ライブラリ)ができていることがわかります。プロジェクトは通常このように exe や dll などのビルド単位に作られます。

SBO 1.0 の場合、SmallBasic.Analyzers.dll, SmallBasic.Compiler.dll, SmallBasic.Client.dll, SmallBasic.Editor.dll, SmallBasic.Utilities.dll の5つの dll が作られていました。

SBO 1.0 の REAME.md によると、8つのプロジェクトについて説明があります。和訳すると、

  • SmallBasic.Compiler: プログラムを実行するために使われるコンパイラ/エンジン
  • SmallBasic.Utilities: 異なるプロジェクト間で共有されるヘルパーユーティリティ
  • SmallBasic.Analyzers: コードベースの品質管理を助ける C# アナライザー群
  • SmallBasic.Generators: コードベース全体で利用される C# や TypeScript のスニペットを自動生成するスクリプトのコレクション
  • SmallBasic.Client: クライアントの TypeScript, SASS や画像リソースをバンドルしたウェブパックプロジェクト
  • SmallBasic.Editor: エディターUIコンポーネントをレンダリングする Blazor アプリ
  • SmallBasic.Server: エディターのサービスを提供/デプロイ(展開)するのに使われる ASP サーバー
  • SmallBasic.Tests: コンパイラ/エンジンをテストする C# 単体テスト

となります。順番はソリューション エクスプローラーにある順に並べ替えました。

ソリューション エクスプローラーで見るとそれぞれのプロジェクトはフォルダが分けられていて、Backend, Build, Frontend, Tests の4つのフォルダのいずれかに格納されています。Backend はサーバー側のみで実行されるプロジェクト、Build は SBO 1.0 自体をビルドするときに使用されるプロジェクト、Frontend はクライアント側とやりとりしながら実行されるプロジェクト、Tests は(ビルド直後の)自動単体テストのためのプロジェクトと考えられます。

SmallBasic.Bridge というプロジェクトに関しては SBO 1.0 の README.md に説明がありませんでした。このプロジェクトは Small Basic デスクトップ (SBD) をこのソリューションで作成するときに使われるのではないかと思います。

以上のように、ソリューションはシステム全体、プロジェクトはビルド単位と覚えておくと理解しやすいと思います。

関連項目

 

| | コメント (0)

2020/03/05

C# (11) SBO 既知の留意点2

以前、Small Basic オンライン (SBO) の既知の留意点について書いてから約10カ月が過ぎました。直っているものも、新たに見つかったものもあるのでまとめ直してみました。#92, #89, #71, #14は修正されました。

GitHub Issues 掲載分

  • #125 プログラムにループがあると Controls.ButtonClicked イベントが呼び出されない
  • #124 テキストボックスとマルチラインテキストボックスのフォント属性が変更できない
  • #122 TextWindow.ReadNumber で負の数や小数が入力できない
  • #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 への代入が文法エラーになる(リードオンリー)
  • #112 GraphicsWindow.KeyDown イベントが呼び出されない
  • #110 GraphicsWindow.DrawImage でローカルファイルが使用できない
  • #108 オンスクリーン キーボードが自動的に有効にならない
  • #107 ブラウザ Chrome と Edge でタートルが軌跡の上に現れない
  • #106 GraphicsWindow.LastKey が常に空を返す
  • #88 ブラウザ Edge で Shapes.Zoom() が図形の中心から拡大・縮小しない
  • #87 ブラウザ Edge で Shapes.Rotate() が図形の中心で回転しない
  • #74 GraphicsWindow.GetPixel がサポートされていない
  • #69 GraphicsWindow.Title がサポートされていない
  • #60 オブジェクトを切り替えたとき、ライブラリ サブメニューがスクロールしたままとなる
  • #58 GraphicsWindow.DrawImage が画像を表示しない
  • #57 "#12345678" のような透明な色は無視される
  • #27 ビルド中に monaco を最小化から除外する
  • #13 インポートと発行機能(発行とインポートが未サポート)
  • #12 長い初期ロード時間(起動に時間がかかる)
  • #4 ライブラリ エクスプローラにバッジを付ける
  • #3 ブリッジプロジェクトを Electron.NET に置き換える
  • #2 開発サイクルの改善

SBO 1.0 アナウンス掲載分

  • ファイルの拡張子が .sb ではなく .txt になった

その他の留意点

以下の項目はまだ上記のどちらのリストにも載っていない SBD 1.2 との差分になります。

  • File.GetSettingPath() がサポートされていない
  • File.GetTempraryPath() がサポートされていない
  • GraphicsWindow.FontBold の既定値が "False"
  • Program.Directory がサポートされていない

SBO 1.0 でサポートされていない機能はまだ他にもありそうで、GitHub の Issues に登録していく必要があります。

関連項目

その他のリソース

 

| | コメント (0)

2020/02/11

おすすめ翻訳サイト

2020年になりました。今年は小学校でプログラミング教育が本格的に始まります。そこで、今まで書いてきた Small Basic の英語のドキュメントを和訳しようと思います。第一弾は Small Basic ポータルです。これは TechNet (テックネット)というマイクロソフトの ITプロフェッショナル(おもに情報システム管理者)向けの Wikipedia を目指した TechNet Wiki にある Small Basic に関する記事をまとめたページです。今後、基本的な記事について和訳を進めていこうと思います。

さて、コンピュータに関する用語、特にマイクロソフトの用語を翻訳するときに役立つサイトがあります。マイクロソフトのランゲージポータルというサイトです。Small Basic ポータルの和訳の際にも大いに使わせてもらいました。

Photo_20200211124501

和訳にも英訳にも役立ちます。英語からその他の言語(またその逆)にも利用できます。

ところで、TechNet ですが、マイクロソフトの開発者向けのサイト MSDN(エムエスディーエヌ)と同様、長い間活躍してきたのですが閉鎖することになりました。多くのコンテンツは Docs(ドックス)など、他のサイトへ移動中です。今和訳している TechNet Wiki も年内には移動すると思います。移動が完了した際にはまたお知らせします。

関連項目

| | コメント (0)

2019/10/24

プログラミング講座(185) Anime 配列の設計

アニメーションエディタ Anime の開発が少しだけ捗(はかど)りました。以前 SVG で作ったアニメーションで以下のようなコードを使いました。

<use x="208" y="154" xlink:href="#g2">
    <animate attributeName="y" begin="0s"
    dur="3s" from="154" to="78" />
    <animate attributeName="y" begin="3s"
    dur="9s" from="78" to="78" />
    <animate attributeName="y" begin="12s"
    dur="3s" from="78" to="154" />
    <animateTransform attributeName="transform" begin="3s"
    dur="3s" type="rotate" from="0 300 214" to="-90 300 214" />
    <animateTransform attributeName="transform" begin="6s"
    dur="3s" type="rotate" from="-90 300 214" to="-90 300 214" />
    <animateTransform attributeName="transform" begin="9s"
    dur="3s" type="rotate" from="-90 300 214" to="0 300 214" />
</use>

これはロケットの動きを記述したものです。これを Small Basic の配列で表してみました。こんな感じです。 

    anime[1] = "func=load;name=Stars1;x=0;y=0;path=stars.png;"
    anime[2] = "func=move;name=Stars1;x=0;y=428;at=0s;dur=3s;"
    anime[3] = "func=move;name=Stars1;x=-598;y=0;at=3s;"
    anime[4] = "func=move;name=Stars1;x=0;y=0;at=6s;dur=3s;"
    anime[5] = "func=move;name=Stars1;x=0;y=-428;at=12s;dur=3s;"
    anime[6] = "func=load;name=Stars2;x=0;y=-428;path=stars.png;"
    anime[7] = "func=move;name=Stars2;x=0;y=0;at=0s;dur=3s;"
    anime[8] = "func=move;name=Stars2;x=598;y=0;at=6s;dur=3s;"
    anime[9] = "func=move;name=Stars2;x=0;y=428;at=9s;"
    anime[10] = "func=move;name=Stars2;x=0;y=0;at=12s;dur=3s;"
    anime[11] = "func=load;name=Rocket;x=208;y=154;path=Rocket.sb;"
    anime[12] = "func=move;name=Rocket;x=208;y=10;at=0s;dur=3s;"
    anime[13] = "func=rotate;name=Rocket;angle=-90;at=3s;dur=3s;"
    anime[14] = "func=rotate;name=Rocket;angle=0;at=9s;dur=3s;"
    anime[15] = "func=move;name=Rocket;x=208;y=154;at=12s;dur=3s;"

11から15行目が同じくロケットの動きを表しています。プログラム全体は QXF519 として発行しました。このプログラムを実行する前に、まず File オブジェクトのコメントのマークを削除し、さらにプログラムと同じフォルダに、ロケットの図形 RQB683-6 と星空のイメージ stars.png を置いておきます。これらのファイルは GitHub にも公開しています。

今回はアニメーションの内部表現について書き進めることができました。アニメーションエディタ Anime は、この内部構造に加えどういった UI(ユーザインタフェース)にするかということを決めていくことで形ができていくと思います。できるだけ簡単で直感的な UI にしたいと思います。

Pilot-01

関連項目

| | コメント (0)

2019/05/09

C# (10) SBO 既知の留意点

Small Basic Online (SBO)の既知の留意点はオフィシャルブログの記事や GitHub の Issues にまとめられていますが、英語ということと載っていないものもあるので、ここにまとめ直しておきます。2019年5月9日現在の既知の留意点です。番号は GitHub Issues のものです。

  • #12 起動に時間がかかる。
  • #13 発行とインポートがサポートされていない。
  • #14 タートルが Edge ブラウザで表示されない。
  • #57 "#12345678" のような透明な色は無視される。
  • #58 GraphicsWindow.DrawImage() がイメージを表示しない。
  • #69 GraphicsWindow.Title がサポートされていない。
  • #71 サブルーチン名と変数名が同じだと文法エラーとなる。
  • #74 GraphicsWindow.GetPixel() がサポートされていない。
  • #87 Shapes.Rotate() が図形の中心で回転しない。
  • #88 Shapes.Zoom() が図形の中心から拡大・縮小しない。
  • #89 Shapes.Zoom() の倍率を1にするとプログラムが停止する。
  • #92 Shapes.Rotate() の角度を360にするとプログラムが停止する。
  • ファイルの拡張子が .sb ではなく .txt になった。
  • GraphicsWindow.WidthGraphicsWindow.Height がリードオンリー。
  • GraphicsWindow.FontBold の規定値が "False"
  • Program.Directory がサポートされていない。
  • File.GetSettingPath() がサポートされていない。
  • File.GetTemporaryPath() がサポートされていない。
  • 配列を a = "1=One;2=Two;" のような初期化ができない。

ある程度、動くようにはなったものの、まだ正式版とするにはそれなりの修正が必要となりそうです。どの程度動くのかということでは、サンプルとして鯉のぼりのプログラムを修正してみました。SBO 1.0 ではまだ発行ができないので、こちらにソースとその結果のスクリーンショットを公開しました。

関連項目

| | コメント (0)

2019/05/01

プログラミング講座(184) Small Basic の不具合

久しぶりに Small Basic 1.0 の不具合を発見したのでお知らせします。Shapes.Rotate() オペレーションで直線を回転させるとずれてしまうので再現プログラム MBL863 を作って試したところ、Small Basic 1.0 も 1.2 も同じく、ずれる問題を持っていました。下図でグリーンが元の位置、ブルーが長方形の回転、グレーが直線(縦長)の回転です。直線の幅に比例してずれることが判りました。90°では右に1/4、上に1/4。180°では右に1/2。270°では右に1/4、下に1/4ずれます。

Known-issue-wide-line-rotates

【図184 直線の回転の中心がずれる】

直線の幅が小さいときはずれがほとんどないのでこれまで気づきませんでした。この問題は TechNet Wiki の Small Basic 1.0 の既知の問題点として報告しました。

| | コメント (1)

2019/04/30

プログラミング講座(183) ロボットの制御

今回はアニメはちょっと小休止。タミヤの CAM-PROGRAM ROBOT というキットを買ったのでいろいろやってみました。最初はキットを説明書のとおりに作って動かしてみました。プログラムバーにカムを差し込むことで左右のステアリングレッグが出てきてキャタピラを浮かせる仕組みになっています。一連の写真や動画をインスタグラムにアップロードしました。

次に micro:bit 用モータードライバ拡張基板 DFROBOT-DFR0548 とタミヤの単三電池ボックス×2を購入し、CAM-PROGRAM ROBOT の一部を作り換えました。組み換えにはサヌキテックネットのこちらのサイトを参考にしました。

micro:bit 互換の chibi:bit と micro:bit を1台ずつ持っていたので、chibi:bit を CAM-PROGRAM ROBOT の制御用、micro:bit を無線制御用に使いました。受信(chibi:bit)側のプログラムをこちらに、送信(micro:bit)側のプログラムをこちらに公開しました。どちらも Microsoft MakeCode エディターを使いました。

Small Basic のプログラムは WMF008-1 として発行しました。20cm x 20cm の正方形を描くように進みます。その後マニュアルで操作できます。

受信側のプログラムでは配列を入出力バッファとして無制限に使う仕様になっているためか、chibi:bit がエラー表示をすることがあります。改良版ができたらまたコメント欄にお知らせします。

ちなみに下図はロボットとは関係ないですが最近書き直した micro:bit の絵を表示するプログラム GMT047-1 です。

Microbit03

【図183 micro:bit

| | コメント (0)

2019/04/21

プログラミング講座(182) 図形グループの回転

図形グループの回転 Group_Rotate を書いたのはずいぶん前になります。PowerShell のコマンドで調べてみました。

get-childitem *.sb -Recur | select-string Group_Rotate

で一覧を出したあとそのファイルを修正して get-children <見つけたファイル名>.sb を実行する files.ps1 を作り

.\files

と打って一番古いものを見つけました。それは2017年5月の今月のチャレンジの出題に答えるために作った運転ゲームでした。

Trafficgame07b

【図182 運転ゲーム】

それから2年のうちに Group_Rotate は若干改善されて現在の形になっています。この運転ゲームのために図形グループを扱うサブルーチンをいくつか書いていたことを思い出しました。図形グループの仕様については GitHub の Wiki にまとめてあります。

関連項目

 

| | コメント (0)

より以前の記事一覧