omonuinen

12/25に年末恒例のSmalltalk勉強会があり今年も参加してきた。昨年はビデオ参加で他の方の発表がちゃんと聞けなかったのだけど、今年はいろんな方の発表が聞けて多いに楽しんだ。
せっかくのチャンスなので自分も発表をしたけど、他の方の真面目な取り組みに対してかなり緊張感のない内容で申し訳なかった。
パワポなども一切持って行かずにその場でのぶっつけデモだったので、せめて発表内容についての簡単な説明をしてお詫びしたいと思う。

「オトナのためのVPL」

こんなタイトルの発表だったのだが、開始から２時間後の発表で、ビールですっかり酔っぱらってしまい１割も言えていなかったが趣旨としてはこんな感じだった。

Scratchびすけっとを始めとしてさまざまなビジュアルプログラミング言語（VPL）が流行している。テキスト系の言語に対してVPLを卑下する見方もあるけど、プロトタイピングなど使う場面によっては生産性を高める場合もあるだろう。
過去10年くらいグラフベースのVPLに取り組んできたが、2年前のSmalltalk勉強会の帰宅途中の会話にヒントを得て、Pharo Smalltalkの素晴らしい開発環境にシームレスにつながるVPLが作れないか試行錯誤した。
実用的な段階にはまだまだ遠いが、現状でどのような感じなのかを見てもらいたい。

Roassal3dの準備とFluoのインストール

デモではインストールから始めて格好よく見せようと思ったのだが、実は事前にRoassal3dのインストールを行っていた。

MetacelloConfigurationBrowser open.

でRoassal3dを選んでInstall Stable Versionを押し、インストールを済ませておく。
次に公開されているFluoの最新バージョンをインストールする。今回はデモでRoassalとLeapMotionを使ったのでそのパッケージを追加する。

Gofer new
  url: 'http://smalltalkhub.com/mc/oohito/Fluo/main';
  package: 'Grafeo';
  package: 'Fluo Core';
  package: 'Fluo Devices';
  package: 'Fluo UI';
  package: 'Fluo LeapMotion';
  package: 'Fluo Roassal3d';
  load.

上記をWorkspaceにコピペしてDo itすればよい。
なお、利用しているPharoのバージョンは3.0である。環境に合わせてダウンロードしておく。
小田さんの発表で「Jun」のPharo移植が述べられていたので、将来的には3D表示系としてそちらを採用する可能性が高いと思う。

Roassal3dのデモ

Fluo new openInWorld.

Workspaceで上記をDo itすると、以下のような画面が現れる。

ノードの説明

このデモには５つのノードがある。ノードの右下のプロパティボックスに小さな文字で書かれているのがノードの名前である。列挙すると以下の通り。

• Roassal3dProxy
• FluoR3AbsolutePosition
• MonitorBehavior
• JoystickBehavior
• TimerBehavior

ノードは３種類あり、円の中央の図形で区別する。中央の図形が正方形のものはプロキシといってFluoの外の世界をつなぐノードである（このデモだとRoassal3dProxy）。円のものはビヘイビアと言ってFluo内でさまざまなデータ処理を行うノードである。三角形のものはトピックといってプロキシとビヘイビアをつなぐノードである（このデモだとFluo3dAbsolutePosition）。ノード間は一方向のアークで結ばれ、その向きでデータが流れる。
Roassal3dProxyはその名の通り、Roassal3dを用いるためのノードである。このノードは接続されたトピックに従ってRoassal3dのエレメントを生成して表示する。
FluoR3AbsolutePositionは、プロパティで指定した形状のRoassal3dエレメントを操作するトピックである。入力として３次元座標を受け取ると、その位置にエレメントを配置する。
MonitorBehaviorは受け取ったデータをプロパティボックスに表示するだけのデバッグ用ノードである。他には何もしない。
JoystickBehaviorは、プロパティボックスに表示したジョイスティックの位置の２次元座標(-1から+1の範囲)を送信するノードである。ただし、tickメッセージが来た時だけデータを送信する。
TimerBehaviorは、指定した間隔でtickメッセージを送信するノードである。
これらのノード間でデータは、（デバッグ用ノードであるMonitorBehaviorを除くと）TimerBehavior -> JoystickBehavior -> FluoR3AbsolutePosition -> Roassal3dProxyのように流れる。つまり、TimerBehaviorで生成されたtickメッセージがJoystickBehaviorに送られると、ジョイスティックの位置データがFluoR3AbsolutePositionに送られ、それが形状データとともにRoassal3dProxyに送られて3Dビューが更新される。

動かしてみる

TimerBehaviorのプロパティボックスにあるチェックボックスをクリックすると、tickメッセージの送信が100ms間隔で始まる。データを受け取ったノードは中央が白くなるのがわかる。ジョイスティックを動かすと座標がMonitorBehaviorに表示されることがわかる。
Roassal3dProxyのプロパティボックスにあるチェックボックスをクリックすると、下図のようにRoassal3dの3Dビューが現れ、立方体が中央に表示される。

修正

このデモでは、上下の向きがジョイスティックと立方体の動きとで逆になってしまう。
発表時に南谷さんからその修正ができないかと問われたのだが、酔っぱらっていたためにその場で対応できなかった。
これに対応するにはデータを修正するノードを追加すれば良い。新しいノードを作るのは手間がかかるので、Smalltalk式を設定できるExpressionBehaviorを追加する。
Fluo画面の上部にあるnew behaviorというノードのプレースホルダをドラッグして、適当な場所でドロップすると、ポップアップメニューが現れる。
その中のdata convertサブメニューからExpressionBehaviorを選ぶとそのノードが追加される。

data at: #y put: (data at: #y) negated. data

受け取ったDicionaryデータ(data)のyキーの数値の正負を反転させるというものである。ExpressionBehaviorはこのようにインスタントにSmalltalk式を埋め込むことができる。
後は下図のようにアークを繋いでデータの流れを変える。

クリスマスの夜はコーディングに限りますね。
ちょっと思いついたプログラムを公開しました。
ネタはちょっと古くなった感の強いhttp://bijint.com/です。
参考にさせて頂いたのはhttps://d.hatena.ne.jp/Yamashiro0217/20090930/1254305886。
現在時刻から画像を入手して背景画像に設定します。コードはこんな感じ。

updateBackground
    | url |
    DateAndTime now
        in: [ :now |
            url := 'http://bijint.com/jp/img/clk/{h}{m}.jpg'
                format:
                    {(#h -> (now hour printPaddedWith: $0 to: 2)).
                    (#m -> (now minutes printPaddedWith: $0 to: 2))} asDictionary ].
    (PluginBasedJPEGReadWriter on: url asUrl retrieveContents readStream) nextImage setAsBackground.
    self currentWorld backgroundMorph layout: #scaledAspect

これを30秒おきに呼び出しています。もっと効率の良いコードはかけますが、どうせ使い捨てなのでこの程度で。
以下をWorkspaceでDo itすればインストールできます。

Gofer new
  url: 'http://smalltalkhub.com/mc/oohito/Fluo/main';
  package: 'BijinTokei';
  load.

起動は以下で。

BijinTokei start.

終了は以下で。

BijinTokei stop.

表示された方が美人かどうかはさておき、お楽しみください。
メリークリスマス！

これはSmalltalk Advent Calendar 2014の12/23の記事です。
以前からPharoで3D表示させたいと考えていた。NativeBoost経由でOpenGLを使うNBOpenGLを試してみたのだが、どうやらメンテされていないらしくうまく動作しない。
そんなところ、第67回Smalltalk勉強会でRoassalが取り上げられた。あいにく仕事で参加できなかったのだが、プレゼン資料でRoassal3dについても紹介されていたので、遊んでみることにした。

Roassal3dの導入

MetacelloConfigurationBrowser open.

上記をWorkspaceでDo itしてConfiguration Browserを起動する。一覧からRoassal3dを選んでInstall stable versionをクリックすると自動的にRoassal3dがインストールされる。

サンプルの実行

Roassal3dの機能をひととおり試してみるには以下をWorkspaceでDo itする。

R3RoassalExample new open.

いろんなアイコンが並んでいるのでマウスで左クリックするとそれぞれのデモウィンドウが現れる。右クリックをするとBrowserが現れ、対応するメソッドが表示される。
デモウィンドウの操作はキーおよびマウスで行う。キー操作では、Wは前進、Sは後退、Aは左移動、Dは右移動、Cが下移動、スペースが上移動できる。マウスではドラッグにより向きを変えることができる。
デモの中にはアニメーションを表示したり、マウスの動きに反応するものがある。

3Dビューの作成

R3Viewのインスタンスに対して、R3Elementのインスタンスを追加することで3Dビューを作成する。
R3Elementには形や位置、向きなどの様々な属性がある。立方体や球体など一般的な物体は、R3Elementを直接生成せず、R3Shapeの該当するサブクラスを経由して生成する。
以下は最も簡単なサンプルで3Dビューの中心に立方体を置くものである。

| view |
view := R3View new.
view add: R3CubeShape new element.
view open.

上記で生成した3Dビューをinspectしてelementsを調べると２個の要素がある一方は生成した立方体で、もう一方は照明である。
立方体の位置を変えるには、R3Vectorオブジェクトを引数としてposition:メッセージを送れば良い。

view elements last position: (R3Vector x: -1 y: -1 z: 0); signalUpdate

先ほどのコードに続けて上記をDo itすれば、立方体は中央から左下に移動する。
position:を送っただけでは3Dビューに変化は現れないので、signalUpdateを送って3Dビューを更新する。

アニメーション

3Dビュー上の物体を動かす手段としてアニメーションがある。R3ViewのインスタンスにR3Animationのインスタンスをアニメーションとして登録すると、3Dビューの更新にあわせてアニメーションが動作する。R3AnimationはR3Elementに作用して位置や向きを変えることができる。
以下のコードをDo itすると、立方体が中央から左下に移動する。

| view element animation |
view := R3View new.
element := R3CubeShape new.
view add: element element.
animation := R3LinearMove new on: element by: (R3Vector3 x: -1 y: -1 z: 0).
view addAnimation: animation.
view open.

複数のアニメーションを連結させて、連続したアニメーションを作ることもできる。
以下のコードでは、立方体が４隅を連続して移動する。

| view element a1 a2 a3 a4 |
view := R3View new.
element := R3CubeShape new element.
view add: element.
a1 := R3LinearMove new on: element by: (R3Vector3 x: -1 y: -1 z: 0).
a2 := R3LinearMove new on: element by: (R3Vector3 x: 1 y: -1 z: 0).
a3 := R3LinearMove new on: element by: (R3Vector3 x: 1 y: 1 z: 0).
a4 := R3LinearMove new on: element by: (R3Vector3 x: -1 y: 1 z: 0).
a1 followedBy: a2.
a2 followedBy: a3.
a3 followedBy: a4.
a4 followedBy: a1.
view addAnimation: a1.
view open.

インタラクション

今までの例では3Dビューは固定されたカメラからの画像しか得ることができなかったが、冒頭のサンプルのようにキーボードやマウスを用いてカメラの位置を変えることができる。
そのためには以下のコードを追加すればよい。

view addInteraction: R3MKControl.

以上概観したように、Roassal3dはPharo上で簡単に3D表示することのできる優れたパッケージである。
この記事では一つの物体のみ操作したが、少ない労力で多数の物体の操作を行うこともできる。
Roassal3dに関する情報はhttp://objectprofile.com/Roassal.htmlから得ることができる。

「なのぼーど」をつなげたPC上で、Fluoのプログラミングを行っているのだが、例によってSerialPortで悩まされている。
ずっとMac OS X上で開発していて特にトラブルがなかったので見過ごしていたが、Windowsで利用すると問題が生じることに気づいた。
現象としては一度オープンしたポートをクローズすると再オープンできなくなるということ。
コードで示すと、２番目のopenPort:でエラーになる。

s := SerialPort new openPort: 'COM3'.
s close.
s openPort: 'COM3'.

これについては既に議論がなされていた。
http://forum.world.st/Package-for-manage-USB-RS232-td4744124.html
SerialPortのソースを眺めてみると、primitiveClosePortByName:に問題があるようだ。

primClosePortByName: portName
	
	^ nil"(DNS)"
	"self primitiveFailed."

わざわざself primitiveFailedがコメントアウトされているのは、コードを書いた人がこの問題を認識していて放置したってことか。
SerialPortではあたかもcloseが成功したかのように見せかけているのだが、実際にはこのプリミティブを呼んだ後、primOpenPortByName:を呼ぶと失敗し、SerialPort>>#openPort:の中でエラーと判定される。
先ほどのメーリングリストのやり取りではSerialPort>>#openPort:内のエラー判定部分を削除すれば動くとあり、試してみたらちゃんと２度目もオープンできた。該当箇所はここ。

	"result isNil ifTrue:[ self error:'Cannot open ', portId printString. ]."

このようにコメントアウトしておけば冒頭のトラブルは回避できる。
これでいいのか甚だ疑問であるが。
プラグインに問題ありそうだから暇を見つけて原因究明してみよう。
とかいってプラグイン関係はいつも挫折してるけど。
（ここから追記）
https://github.com/pharo-project/pharo-vm/blob/master/platforms/win32/plugins/SerialPlugin/sqWin32SerialPort.cを眺めて見ると、プラグインの方でハンドルの管理を行っていた。ポートを名前でなく番号でも呼べるようになっていたのはそのせいか。
WindowsではCOM3に対応する番号は3なので、以下のコードを試してみたらオープンもクローズも問題なく動くではないか。

s := SerialPort new.
s openPort: 3.
s primClosePort: 3.
s openPort: 3.
s primClosePort: 3.

ということでWindows上では番号でポートを指定すれば大丈夫なようだ。