日記
研究室決まってから色々な先生と話す機会が増えて来た.
一緒に色々やれそうなこともあるので今後が楽しみです.
今やってる共同研究とかも年明けには公表できる,かも.
あと
ドメインを,再取得しました.
http://www.itsukichang.com/
ブログ,ワードプレスに移行するかも.
ポートフォリオページみたいなのを作りたい.
HaxeではじめるCreateJS
とりあえずJSでFlashっぽいことすれば喜ばれる世の中なので,CreateJSをつかってFlashのようなものを作ろう!!
Haxeを使えばAS3っぽいCreateJSを更にAS3っぽく書けます!
というわけで,FDTを使ったHaxe&CreateJSをはじめるまでのまとめ.
必要なもの
- FDT
- CreateJSなhaxelib
FDTの準備
インストールしましょう.
http://www.fdt.jp/
FDTはデフォルトでHaxeをサポートしています.便利!
インストーラでHaxeを入れるかどうか聞かれるので入れましょう.
HaxeでCreateJSを使う準備
HaxeでCreateJSを使う為にライブラリを導入します.
CreateJSはHaxeのリポジトリHaxelib - the Haxe package manager に用意されているのでコマンドで簡単に導入可能です.
ターミナルで
haxelib install createjs
と入力して実行しましょう.
FDTで開発してみる
FDTを開いて,File->New->New FDT Projectを選択.
以下のような画面になるので,ProjectNameと作業ディレクトリを入力して,templateで Haxe->BasicJSを選択してFinish!
プロジェクト階層は,
ProjectName |- bin | |- index.html | |- js | |- App.js |- src | |- Main.hx | |- ProjectName.hxml
となってます.
bin/js/App.jsがhaxeからコンパイルされた後のjsファイルとなります.またそれを実行してくれるのが bin/index.html
開発は src/ 以下に.hxファイルを作って行います.
また,ProjectName.hxmlというのはHaxeの設定ファイルで,MainClass(Flashで言うドキュメントクラス)の設定やアウトプット先(デフォルトはbin/js/App.js)の設定ができます.
ここでCreateJSを使うために,ProjectName.hxml内のArgumentに一文追加する必要があります.
以下の画像のように,[ -lib createjs ]を追加しましょう.
これはHaxeをコンパイルするときに使うコマンドライン引数です.他にも色々あるので必要に応じて追加しましょう.
http://haxe.org/doc/compiler?lang=jp
コードを書く.
src/Main.hxを開きましょう.デフォルトではこれがMain class (ドキュメントクラス)です.要は実行時に一番はじめに呼ばれます.
Haxeのコンストラクタは new()関数です.が,Main classだけmain()関数がコンストラクタより先に呼ばれます.
とりあえず何もいじらずに実行すると,[Hello From FDT HaXe!] みたいな表示がでます.
それだけじゃつまらないので,何かAS3っぽいことをしてみましょう.Main.hxとindex.htmlを書き換えてCreateJSなコードを書いてみます.
- Main.hx
package; import createjs.easeljs.Shape; import createjs.easeljs.Stage; import createjs.easeljs.Ticker; import js.Lib; class Main { private var stage:Stage; private var _sp:Shape; public static function main():Void { new Main(); } public function new() { Lib.window.onload = init; } private function init(_):Void { Ticker.useRAF = true; Ticker.setFPS(60); Ticker.addListener(onTick); stage = new Stage(cast js.Lib.document.getElementById("canvas")); _sp = new Shape(); stage.addChild(_sp); drawBall("#FF0000"); _sp.onClick = onClick; } private function onClick(e):Void { var col:String = "#" + StringTools.hex(Std.int((Math.random()*0xFFFFFF)),6); drawBall(col); } private function drawBall(s:String):Void { _sp.graphics.clear(); _sp.graphics.beginFill(s); _sp.graphics.drawCircle(100, 100, 100); _sp.graphics.endFill(); } private function onTick():Void { stage.update(); } }
- index.html
<!DOCTYPE html> <html> <head> <title>HelloCreateJS</title> <script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script> <script type="text/javascript" src="js/App.js"></script> </head> <body> <div id="content"> <div id="head"></div> <div id="body"></div> <div id="footer"> <div id="haxe:trace"></div> </div> </div> <canvas id="canvas" width="500" height="500"></canvas> </body> </html>
クリックすると!色が!!変わる!!!
コード解説
ほぼAS3っぽいですね.
TickerはENTER_FRAMEみたいなものです.上記コードだと60fpsでonTick()が呼ばれます.
graphicsとか完全にAS3ですが,色指定だけ何故かStringになっています.
そのため,単純に Math.random()*0xffffff では駄目で,これを文字列に変換してやる必要が.
それをやっているのが,
var col:String = "#" + StringTools.hex(Std.int((Math.random()*0xFFFFFF)),6);
これ.めんどいね.
index.htmlでは,createjsを使う為に,
<script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script> <canvas id="canvas" width="500" height="500"></canvas>
の追加を行いました.
まとめ
Haxe&CreateJSを使えば,ほぼAS3っぽいコーディングでJSアニメーションやゲームが作れる!
DOMもいじれるので結構応用効きます.
Haxeの文法は若干クセがある気がするので以下のページを見つつ慣れましょう!
http://haxe.org/ref
最近はまってきたので,jsdo.itによく投稿すると思います.
itsukichang - jsdo.it - Share JavaScript, HTML5 and CSS
jsdo.itのHaxe対応を期待してます!!!
参考
参考にしたページ&&&参考にすると勉強になるページ.
http://blog.romatica.com/2012/01/19/haxe_js_flash_memo/
http://www40.atwiki.jp/spellbound/pages/1905.html
createjsはじめました
とりあえず.
[06/11 22:53, たっち対応したった]
- Main.hx
package; import createjs.easeljs.Shape; import createjs.easeljs.Stage; import createjs.easeljs.Ticker; import createjs.easeljs.BoxBlurFilter; import createjs.easeljs.Touch; import js.Lib; class Main { private var stage:Stage; private var _shape:Shape; private var _rad:Float; private var _ball:Ball; private var _arr:Array<Ball>; public static function main():Void { new Main(); } public function new() { Lib.window.onload = init; } private function init(_):Void { _arr = new Array(); _rad = 20; Ticker.useRAF = true; Ticker.setFPS(60); Ticker.addListener(onTick); stage = new Stage(cast js.Lib.document.getElementById("canvas")); stage.compositeOperation = "lighter"; if (Touch.isSupported()) { Touch.enable(stage); } var i = 0; while(i < 10) { _ball = new Ball(10 + Math.floor(Math.random()*30)); stage.addChild(_ball); _ball.x = Math.random() * stage.canvas.width; _ball.y = Math.random() * stage.canvas.height; _ball.alpha = Math.random(); _arr.push(_ball); _ball.name = Std.string(i); var blurStrong = 0.5+_ball.get_Radius()/5; var blurFilter = new BoxBlurFilter(blurStrong, blurStrong, 2); _ball.filters = [blurFilter]; var margins = blurFilter.getBounds(); _ball.cache(-_ball.get_Radius()+margins.x-7, -_ball.get_Radius()+margins.y-7, _ball.get_Radius()*2+margins.width+14, _ball.get_Radius()*2+margins.height+14); i++; } } private function onTick():Void { var i = 0; while(i < _arr.length) { _arr[i].x += ((stage.mouseX) - _arr[i].x) / _arr[i].get_Speed(); _arr[i].y += ((stage.mouseY) - _arr[i].y) / _arr[i].get_Speed(); i++; } stage.update(); //だいじ } }
- Ball.hx
package; import createjs.easeljs.Shape; class Ball extends Shape { private var _rad:Float; private var _speed:Int; public function new(s:Int) { super(); _speed = s; _rad = 10 + Math.random() * 100; init(); } private function init():Void { var col = "#" + StringTools.hex(Std.int((Math.random()*0xFFFFFF)),6); graphics.beginFill(col); graphics.drawCircle(0, 0, _rad); graphics.endFill(); } public function get_Speed():Int { return _speed; } public function get_Radius():Float { return _rad; } }
あ,haxeで書いてます.
Haxeでcreatejs使ってなんか作るまでの導入記事をそのうち書きたいと思っていますです.
ANEを使ってAIRアプリ単体でArduinoと通信する
久々にFlash×Arduinoネタ.
as3-arduino-connector というANEを使います.
introduction
flashとarduinoを連携させる方法は今までも色々ありましたが,flashはシリアル通信が出来ないので別途プロキシサーバを用意する必要がありました.
(代表的な方法としてFunnelというプロキシサーバ&apiを使うやり方があります.以前blogでも取り上げました;) Flashを使用したフィジカルコンピューティング - いつきの技的日記 )
つまりAIRでarduinoと連携したアプリを作って配布しても,各ユーザにプロキシサーバをインストールしてもらい,アプリを使う際に毎回起動してもらわなければなりませんでした.
これは大変な手間ですし現実的ではないです.
が,as3-arduino-connectorというANEの登場で状況が一変しました.
Google Code Archive - Long-term storage for Google Code Project Hosting.
このANEを使うことで,別途プロキシサーバを用意すること無くAIRアプリ単体でarduinoと通信ができるのです!
使ってみる
感覚的にはprocessingとarduinoを通信させる時に似ています.
準備
とりあえずas3-arduino-connectorをダウンロードして,プロジェクトに入れましょう.
Flash cs6なら,スクリプトの設定→ライブラリパスの画面でaneファイルを追加することで,apiが使用できるようになります.
コード
準備ができたらコードを書いていきましょう
まずarduino側でシリアル通信の準備.
試しに以下のようなコードを書いてarduinoに送ってみます.
void setup() { Serial.begin(9600); } void loop() { Serial.write("hello"); delay(1000); }
これで1秒感覚で"hello"という文字を投げるようになります.
そして,flash側では次のようなコードを書いてみます.
package { import flash.display.Sprite; import flash.text.TextField; import flash.events.Event; import com.quetwo.Arduino.ArduinoConnector; import com.quetwo.Arduino.ArduinoConnectorEvent; public class Main extends Sprite{ private var _arduino:ArduinoConnector; private var _txt:TextField; public function Main() { init(); } private function init():void { _txt = new TextField(); addChild(_txt); _arduino = new ArduinoConnector(); if (_arduino.isSupported()) { comm(); } } private function comm():void { _arduino.connect("/dev/tty.usbserial-A6008kUC",9600); _arduino.addEventListener("socketData",onSock); } private function onSock(e:Event):void { _txt.text += _arduino.readBytesAsString(); _txt.text += "\r"; } } }
as3側ではarduinoが発信している内容を取得して,テキストフィールドに書き込んでいますね.
コードをもう少し詳しく見てみましょう.
as3コード解説
まず必要ライブラリのインポート.
ArduinoConnectorがarduinoと通信をする本体で,ArduinoConncetorEventが通信に関するイベントを扱うものです.
ArduinoConnectorをnewして,isSupported()でこのANEが使えるかをチェックします.
無事使用できるようなら,connect()でarduinoと接続を行います.
第一引数がシリアルポート,第二引数がarduino側で設定した通信速度です.
ちなみにシリアルポートは _arduino.getComPorts(); で取得することも出来ます.(戻り値型はarray)
接続設定を行ったら,"socketData" イベントをaddします.これでarduino側から新しいデータが送られたときにイベントリスナーが呼ばれます.
あとはreadBytesAsString()で,データを読み取ります.
まとめ
as3-arduino-connectorというANEで,AIRアプリ単体でarduinoと通信が出来るようになりました.
Google Code Archive - Long-term storage for Google Code Project Hosting.
今回はarduino->flashでしたが,その逆も同じ要領で可能です.
様々なセンサと組み合わせて,楽しげなものが作れる気がしますね;)
おまけ ~AIRのメリット
個人的な感想だと,processingやopenFrameworksを使うよりAIRの方がUIとか作りやすいしいいなーと思ってます.
arduinoを使ったフィジカルコンピューティングの入門用としてなら,processingが手軽で良いですが,作り込みが必要な本格的な作品となるとAIRとかoFがいいのかなーと.
結局適材適所ですね;)
でもFlasherが今までの資産を生かすにはこの方法が間違いなくベストです!
最近パーソナルファブリケーションとか流行ってますし,少しずつハードウェアも使いこなしていくと世界が広がるんじゃないかなーと思ってます.
FlashでArduinoを操作する記事まとめ
FlashでArduinoを操作する日本語サイトのまとめ - NAVER まとめ
ありがたいことに昔の記事が紹介されていたので,他の関連記事も載せておきます.
MarkdownエディタのMouが良い
25.io | Mou - Markdown editor for developers, on Mac OS X.
大学の講義のメモをmbpで取ることがあるのですが,ノートをまとめるいい感じのアプリ無いかなーと探していたところ,Mouに行き着きました.
Markdownを使って文章を作成するエディタなのですが,
- プレビューのリアルタイム表示
- cssの自由な変更
- ショートカットの充実
- フルスクリーン対応
- pdf, htmlでの書き出しが可能
といった感じで,かなり高機能です.
dropboxとかevernoteとかgoogle driveとかでファイル管理するとモバイル端末でも見れて便利です.
markdownの文法とかはここでMarkdown記法 チートシート - Qiita
大学とかの講義だけではなく,セミナーとかのメモにも使えそうですね;)