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 ではまだ発行ができないので、こちらにソースとその結果のスクリーンショットを公開しました。

関連項目

| | コメント (1)

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)

プログラミング講座(181) 図形グループの拡大縮小

図形グループの拡大縮小を行う Group_Zoom を書いてみました。また、サンプルプログラムを GitHub に公開しました。どちらもコピーする場合はリンク先で [Raw] ボタンを押してからコピー&ペーストしてください。

Zoom

【図181 Zoom】

このプログラムは以前から行っているピクショナリプロジェクトの一環として作成しました。ピクショナリとは元々は絵で表現した言葉を当てるゲームですが、このプロジェクトは、Small Basic で使う英単語を絵で表し、英語圏以外の子供たちがプログラミングに取り組みやすくする目的で始めました。Pictionary.sb では LitDev 拡張機能を使って、各単語のプログラムを呼び出したり、英単語を発音したりしています。

次回は図形グループの回転について書こうと思います。(つづく)

関連項目

| | コメント (0)

2019/04/20

プログラミング講座(180) 左右反転の改善

以前、図形の左右反転について書きました。この時点では Group_Flip というサブルーチンが単に図形を左右反転するだけでした。その後、角度をパラメータとして与える方式に変更しました。変更前後の違いを GitHub Gist に公開しました。新しい Group_Flip を使ったサンプルとして、水族館 0.6 を TKW252-9 として発行しました。

Aquarium05

【図180 水族館 0.6】

Group_Flip は角度を指定して内部では Shapes.Zoom() を呼び出しています。このサブルーチンを変形し図形グループ全体を拡大縮小するものを作ってみたいと思います。(つづく)

関連項目

 

| | コメント (0)

2019/04/10

プログラミング講座(179) 図形シリーズ

今年の正月の記事にもちょっと書いたのですが、Small Basic の日本のファンのための Facebook ページのノートに「図形シリーズ」を載せています。

Shapes(図形)オブジェクトを組み合わせていろいろな図形を描く方法を公開しています。現在作ったのは以下の8種類です。

  • 円をつなぐ
  • 角丸三角形
  • 葉っぱ
  • 台形
  • 平行四辺形
  • 六角形
  • 円弧
  • 角丸四角形

この他にも以下の図形を検討中です。

  • 円形吹き出し
  • パイ
  • 上矢印
  • しっぽ

これらのいくつかは Microsoft Office の図形を元にしています。図形シリーズで用意した図形を、拡大したり回転したりして組み合わせて図形グループを作り、その図形グループをアニメーションのスプライトとして使えるようにしたいと考えています。ここで作っているサブルーチンはいずれ、GitHubGist に登録する予定です。

ちなみに図形シリーズの英語版は TechNet Gallery に公開しています。
 

| | コメント (0)

2019/03/18

プログラミング講座(178) Small Basic Online ハッカソン

アニメーションからまた外れますが、本日より開催している Small Basic Online のコミュニティ バーチャル ハッカソンについてお伝えします。

今回の Small Basic Online とは現在公開されている v0.91 ではなく、開発中の v1.0 のことです。

ハッカソンとはある問題を創造的に開発するイベントのことで、今回は開発中の Small Basic Online v1.0 (SBO 1.0) のテストを行って問題点をレポートすることが目的です。

コミュニティとは Small Basic のオンラインコミュニティを指しています。FacebookSmall Basic Forum で交流しているコミュニティです。

開催期間は 2019年3月18日~3月31日(ただし UTC 協定世界時間)です。日本時間のほうが9時間進んでいるので、日本では4月1日の朝9時までです。

使用言語は英語です。

案内はオフィシャルの Small Basic Blog に出しました。

トレーニングセッションで前提となる知識を学び、ハッキングセッションで実際に SBO 1.0 のテストを行い結果を共有します。

Hackathon

| | コメント (0) | トラックバック (0)

2019/02/20

C# (4) ここからどう進めるか

リポジトリの最新版をローカルでビルドできるようになりました。

ここからどう進めていけばいいでしょうか。しばらく Small Basic Online をいろいろと動かしてみるのがいいかもしれません。どの程度動いているのか肌で感じるところから始めるのがいいかもしれません。それで見つかった問題点は Issues に登録していけば貢献になります。

テスト用のプログラムを作ったり、過去の Small Basic Desktop 用のプログラムを動かしてみたり、いろいろやり方はあると思います。そこで、私の場合は日本で出版された Small Basic の市販本を順番に試してみようかと思います。まず、最も最近発売された『カンタン。タノシイ。カッコイイ。小学生からのプログラミング Small Basicで遊ぼう!!』からチャレンジしてみます。

この本は4つのミッションで構成されているのですが、2つのミッションを終えたところで、以下の問題点が見つかり Issues にレポートしました。

・#44 GraphicsWindow.DrawEllipse が黒く塗りつぶされる
・#45 テキストのY座標が上部ではなくベースラインになっている
・#46 漢字などの文字列が文法エラーになる
・#47 漢字などの変数名、サブルーチン名、ラベル名が文法エラーになる

他にもブラウザやOSによって微妙に動きが違ってくるようです。まだ現象がはっきりしていないのでレポートできていないのですが、TextWindow での入力で Enter が効かなくなったり、出力の文字が重なったりするのを見ました。Small Basic Online は macOS でも動きます。まだ試していないですが、Visual Studio も macOS で動かせばビルドもできそうです。スマホでも動くのですが、入力がうまくいかない印象です。

Small Basic Online はブラウザ上で動くので、動作確認範囲も広く、より多くの方の協力が必要だと思いました。

一方でリポジトリのソースを少しずつ眺めるようにし始めたところです。全く知らないものにチャレンジするとき、まず慣れていくことが第一歩になると思います。全体の構成を把握したり、すでに修正された部分の差分を読んでみるのも理解につながっていきます。

それから、この連載の目次を作りましたのでご活用ください。

(つづく)

 

| | コメント (0) | トラックバック (0)

より以前の記事一覧