いつきの技的日記 RSSフィード

2013-12-05

日記

研究室決まってから色々な先生と話す機会が増えて来た.

一緒に色々やれそうなこともあるので今後が楽しみです.

今やってる共同研究とかも年明けには公表できる,かも.

あと

ドメインを,再取得しました.

http://www.itsukichang.com/

ブログワードプレスに移行するかも.

ポートフォリオページみたいなのを作りたい.

2013-11-25

日記

ブログ放置から5ヶ月.

大学の前期が終わり後期になり,研究室が決まり,歳を取りました.

学類の影響か,データマイニングとかに興味が出て細々とやっているけど,やっぱり研究はHCI系の方へ進む事にしました.

最近生産性も低いのでまた少しずつ再開していきます.

勝負はこれからだ.

2013-06-12

HaxeではじめるCreateJS

とりあえずJSFlashっぽいことすれば喜ばれる世の中なので,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!

f:id:itsuki_kosen:20130611232627p:image

プロジェクト階層は,

ProjectName
|- bin
|    |- index.html
|    |- js
|        |- App.js
|- src
|    |- Main.hx
|
|- ProjectName.hxml

となってます.

bin/js/App.jshaxeからコンパイルされた後のjsファイルとなります.またそれを実行してくれるのが bin/index.html

開発は src/ 以下に.hxファイルを作って行います.

また,ProjectName.hxmlというのはHaxeの設定ファイルで,MainClass(Flashで言うドキュメントクラス)の設定やアウトプット先(デフォルトはbin/js/App.js)の設定ができます.

ここでCreateJSを使うために,ProjectName.hxml内のArgumentに一文追加する必要があります.

以下の画像のように,[ -lib createjs ]を追加しましょう.

f:id:itsuki_kosen:20130611233505p:image

これはHaxeコンパイルするときに使うコマンドライン引数です.他にも色々あるので必要に応じて追加しましょう.

Haxe コンパイラ - Haxe

コードを書く.

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();
	}
}
<!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の文法は若干クセがある気がするので以下のページを見つつ慣れましょう!

Page Not Found - Haxe - The Cross-platform Toolkit


最近はまってきたので,jsdo.itによく投稿すると思います.

itsukichang - jsdo.it - Share JavaScript, HTML5 and CSS

jsdo.itHaxe対応を期待してます!!!

参考

参考にしたページ&&&参考にすると勉強になるページ.

404 Not Found

404エラー

補足

なんか実行できないんだが!!?

FDTのRun->Run Configurations を開いて,FDT Haxe Viewerをダブルクリックしましょう.

New_Configurationってのが出来るので,そこで実行したいProjectと動かすhtmlファイルの指定を行ってください.

f:id:itsuki_kosen:20130612001655p:image

これでFDTのRunボタンを押したときにFDT内でプレビューされます.

別に設定しなくてもコンパイルはされてます.

2013-06-11

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使ってなんか作るまでの導入記事をそのうち書きたいと思っていますです.

2013-05-13

ANEを使ってAIRアプリ単体でArduinoと通信する

久々にFlash×Arduinoネタ.

as3-arduino-connector というANEを使います.

introduction

flasharduinoを連携させる方法は今までも色々ありましたが,flashシリアル通信が出来ないので別途プロキシサーバを用意する必要がありました.

(代表的な方法としてFunnelというプロキシサーバ&apiを使うやり方があります.以前blogでも取り上げました;) Flashを使用したフィジカルコンピューティング - いつきの技的日記 )

つまりAIRarduinoと連携したアプリを作って配布しても,各ユーザにプロキシサーバインストールしてもらい,アプリを使う際に毎回起動してもらわなければなりませんでした.

これは大変な手間ですし現実的ではないです.

が,as3-arduino-connectorというANEの登場で状況が一変しました.

Google Code Archive - Long-term storage for Google Code Project Hosting.

このANEを使うことで,別途プロキシサーバを用意すること無くAIRアプリ単体でarduinoと通信ができるのです!

使ってみる

感覚的にはprocessingarduinoを通信させる時に似ています.

準備

とりあえずas3-arduino-connectorをダウンロードして,プロジェクトに入れましょう.

Flash cs6なら,スクリプトの設定→ライブラリパスの画面でaneファイルを追加することで,apiが使用できるようになります.

f:id:itsuki_kosen:20130513233421p:image:w300

コード

準備ができたらコードを書いていきましょう

まず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コード解説

まず必要ライブラリインポート

  • import com.quetwo.Arduino.ArduinoConnector;
  • import com.quetwo.Arduino.ArduinoConnectorEvent;

ArduinoConnectorがarduinoと通信をする本体で,ArduinoConncetorEventが通信に関するイベントを扱うものです.

ArduinoConnectorをnewして,isSupported()でこのANEが使えるかをチェックします.

無事使用できるようなら,connect()でarduinoと接続を行います.

第一引数シリアルポート,第二引数arduino側で設定した通信速度です.

ちなみにシリアルポートは _arduino.getComPorts(); で取得することも出来ます.(戻り値型はarray)

接続設定を行ったら,"socketData" イベントをaddします.これでarduino側から新しいデータが送られたときにイベントリスナーが呼ばれます.

あとはreadBytesAsString()で,データを読み取ります.

パブリッシュ&アプリ起動

f:id:itsuki_kosen:20130513235646p:image:w300

地味ですが,無事通信できています!!!

まとめ

as3-arduino-connectorというANEで,AIRアプリ単体でarduinoと通信が出来るようになりました.

Google Code Archive - Long-term storage for Google Code Project Hosting.

今回はarduino->flashでしたが,その逆も同じ要領で可能です.

様々なセンサと組み合わせて,楽しげなものが作れる気がしますね;)


次はもう少し具体的な連携(AIRハードウェア制御やArduinoソフトウェア制御)を試した記事を書いてみます.

おまけ ~AIRのメリット

個人的な感想だと,processingやopenFrameworksを使うよりAIRの方がUIとか作りやすいしいいなーと思ってます.

arduinoを使ったフィジカルコンピューティングの入門用としてなら,processingが手軽で良いですが,作り込みが必要な本格的な作品となるとAIRとかoFがいいのかなーと.

結局適材適所ですね;)

でもFlasherが今までの資産を生かすにはこの方法が間違いなくベストです!

最近パーソナルファブリケーションとか流行ってますし,少しずつハードウェアも使いこなしていくと世界が広がるんじゃないかなーと思ってます.