blog.wonder-boys.net

[javascript]三角関数の基本

wonder — Wed, 01 Sep 2010 09:52:17 +0000

三角関数の基本部分を復習してみようと思います。

数学的な三角関数

さて、まずいわゆる学校で習う三角関数についての復習をしてみます。
高校で習っているはずですね！数学I・Aでやりましたね！

図のような「直角三角形」において、角度が分かると辺の比率の関係を表しているのが三角関数です。
公式は、

sinθ = a / c　//サイン
cosθ = b / c　//コサイン
tanθ = a / b　//タンジェント

となります。
例えば、角度が45°のときの辺cと辺aの比率は、

sin45° = 1 / √2 = a / c　※角度に対する比率というのは決まっています。

ですね、よって

a : c = 1 : √2

となるわけです。

つまり、三角関数の基本的な意味とは、

・角度と辺の比率の関係を表す。
・角度から辺の比率が分かる。
・辺の比率から角度が分かる。

ということです。

javascriptでの三角関数の書き方

まあ、これは書くまでもないですが、一応。
今回はjavascriptでの書き方。

javascriptではMathクラスが予め用意されています。
このMathクラスのメソッドを使います。

Math.sin( 角度 )
Math.cos( 角度 )
Math.tan（ 角度 ）

と書きます。
返り値は辺の比率が小数点で返ってきます。
このとき重要なのは、角度に入る部分が「度」ではなくて「ラジアン」だということです。

ラジアン　wikipedia

ラジアンの意味は上記を見てもらうとしまして、角度とラジアンの関係は

360度 = 2π（パイ）ラジアン

になります。
javascriptでいくと、

360度 = Math.PI * 2

です。
つまり、sin360°を求めたいときは

Math.sin( Math.PI * 2 )

と書きます。
ちょっとめんどくさいですね。

座標における三角関数：sinとcosの意味

ここからは実際にプログラミング中での使い方を見ていきます。
実際に使う箇所として一番多いのは、図形やいろんなオブジェクトを運動させる（アニメーション）ときではないかと思います。
つまり、ある座標上のx値とy値をもとに動かしていくわけです。

座標上における三角関数というのはどのようなものでしょうか。

上記の図を見てもらうと分かりますが、この三角形の「点Ｂ」において、x座標はb、y座標はaになります。
つまり、点Bの座標は（ b, a ）ということになりますね。
さらに、点Bの座標を知りたければ、辺bと辺aを知ればよいということになります。

さて、どうやるのか。
一番上の三角関数の基本に戻ると

sinθ = a / c
cosθ = b / c

この公式がありましたね。
この式を変形すると、

a = sinθ * c
b = cosθ * c

になります。
cは対辺と呼ぶので

cosに対辺をかけたものがx座標
sinに対辺をかけたものがy座標

になります。
また、

基準点からの角度と対辺の長さが分かれば座標を取得できる

ということにもなります。
ちなみにtanについてふれていませんが、実際あまりつかわないのでここではそっとしておきましょう。

三角関数を使って円運動

基準点からの角度と対辺の長さが分かれば座標を取得できる

と書きましたが、この方法を使って表現できる一番スタンダードなものは円運動です。
円運動させたい図形の座標を「点B」、円運動する円の中心点を「点Ａ」とみたてて三角形を書いてみます。

どうでしょうか。
半径と中心点の座標を決めて、角度だけ変えていけば点Bは図の円の上を移動することになりますね。
これを利用して円運動をさせます。

//基準点
var centerX = 200;
var centerY = 200;

//半径
var radius = 50;

としてみます。
これを使い座標を取得します。

var posX = Math.cos( angle ) * radius;
var posY = Math.sin( angle ) * radius;

angleには角度が入ります。
5度づつ動かしたい場合は、

//角度の初期値
var angle = 0;

//変化率（5度）
var per = Math.PI / 36;

としておきます。

それから、実際に動かすとわかりますが、このままでは原点（0,0）を中心に動いてしまいます。
設定した点を中心に周るように点をずらします。

var posX = Math.cos( angle ) * radius + centerX;
var posY = Math.sin( angle ) * radius + centerY;

これらをまとめて、定期的に動作させます。

円運動 - jsdo.it - share JavaScript, HTML5 and CSS これが円運動の基本です。

三角関数を使って円運動（2）

上記の座標算出方法は、

中心点を決める
円運動させる円の半径を決める。
角度を決め、角度を増やしていく。

という方法でした。「基準点を決めて半径がこのくらいで円運動させる」というように、あらかじめ全ての情報が分かっている場合は特に問題ないです。ただ、例えば座標上に一つ点があってそれをある基準点の周りを円運動させたいときなんかは少し面倒なことになります。

点が基準点からみて角度が何度あるのか。
点と基準点との距離（円運動させる円の半径）はいくつか。

という処理をはさまなければいけません。この処理は、

var targetX; //移動する点のx座標とする
var targetY; //移動する点のy座標とする

//角度を求める
var dx = targetX - centerX;
var dy = targetY - centerY;

var angle = Math.atan2( dy, dx ); //点と点の距離から角度を求める式

//距離を求める
var radius = Math.sqrt( dx*dx + dy*dy ); //ピタゴラスの定理

とやって初めて角度と距離を取得することが出来ます。ちなみに距離を求める方法はピタゴラスの定理です。覚えてますか？サンプルはこちら。

三角関数（2） - jsdo.it - share JavaScript, HTML5 and CSS

設定した位置から基準点に対して円運動します。

三角関数の数値を使った運動

ここまでは三角関数を使ってある点との角度を求めたり位置を求めたりしましたが、ちょっと視点を変えてみようと思います。
wikipediaさんからちょっと拝借させて頂きました。ごめんなさい。

これを見るとわかりますが、sinやcosというのは-1.0～1.0の値をいったりきたりしています。
これに注目してみましょう。。

Math.sin( angle );

angleを少しづつ増やしていくと、sinは

0　→　1.0　→　0　→　-1.0　→　0

となっていきます。
この値を例えば位置に加え続けてみます。

var vx = posX + Math.sin( angle );
angle += 0.1;

という感じですね。
これで、ある範囲を往復する運動になります。
しかもちょっとイージング（加速したり減速したりする）気味で。

三角関数（3） - jsdo.it - share JavaScript, HTML5 and CSS 同じように、図形の大きさに適用してみます。

三角関数（4） - jsdo.it - share JavaScript, HTML5 and CSS

なんか面白い動きになりましたね。

まとめ

以上で基本終わりです。
なかなか奥が深い三角関数ですので気になる方は色々と調べてみてください。

[javascript]JS + Canvas = 3D しました

wonder — Fri, 27 Aug 2010 09:46:03 +0000

javascriptとCanvasを使って3Dオブジェクトを作ってみました。

サンプル

こんな感じで。
四角い箱がぐるぐる回ります。
let’s play !!

3D Cube - jsdo.it - share JavaScript, HTML5 and CSS

簡単にコードの解説を。

座標の決定は遠近法を使う

3Dの描画を行う場合データとしては、x、y、zの座標を持たないといけません。
しかし、スクリーン上は2次元なのでx、yしかありません。
そこで遠近法を使って”3Dっぽく”見せる必要があります。
奥行きを感じる絵を描くのと同じ感覚でしょうかね。

遠近法 Wikipedia

具体的には、消失点（上記ページ参照）を作り、その座標点を考慮して点を配置します。

■106行目
var Point3D = function( posX, posY, posZ ){
    this.x = posX;
    this.y = posY;
    this.z = posZ;
    this.cx = posX;
    this.cy = posY;
    this.cz = posZ;
    this.centerX = 0;
    this.centerY = 0;
    this.centerZ = 0;

    this.fl = 250;
    this.vpX = 0;
    this.vpY = 0;
};

Point3D.prototype = {
    setVanishingPoint: function( vpX, vpY ){
        this.vpX = vpX;
        this.vpY = vpY;
    },
    setCenter: function( centerX, centerY, centerZ ){
        this.centerX = centerX;
        this.centerY = centerY;
        this.centerZ = centerZ;
    },
    screenX: function(){
        return this.vpX + this.centerX + this.x * this.getScale();
    },
    screenY: function(){
        return this.vpY + this.centerY + this.y * this.getScale();
    },
    getScale: function(){
  return this.fl / ( this.fl + this.z + this.centerZ );
    }
};

これが基本となるオブジェクト。
点の座標を管理します。

this.vpX = 0;
this.vpY = 0;

ここが消失点を持つプロパティです。
インスタンス化した後に外部から設定できるようにしてあります。

■277行目
for( var i = 0; i < points.length; i++ ){
    var point = points[i];
    point.setVanishingPoint( stage.stageWidth / 2, stage.stageHeight / 2 );
    point.setCenter( 0, 0, 50);
    stage.setPoint( point );
}

ステージのちょうど真ん中を消失点に設定しています。

■132行目
screenX: function(){
    return this.vpX + this.centerX + this.x * this.getScale();
},
screenY: function(){
    return this.vpY + this.centerY + this.y * this.getScale();
}

screenXとsccreenYというメソッドを使って、スクリーン上に配置する場所を計算しています。
x値とy値が同じでもz値が大きくなるとその分消失点に近づいていくというわけです。

3Dの回転

3Dの座標回転は三角関数を使います。

■51行目
rotateX: function( point, angle ){
    cosX = Math.cos( angle );
    sinX = Math.sin( angle );

    y1 = point.cy * cosX - point.cz * sinX;
    z1 = point.cz * cosX + point.cy * sinX;

    point.y = y1;
    point.z = z1;
}

この関数はx方向の軸を中心に回転させるメソッドです。 angleというのは角度。
原点を中心として現在の位置から何度回転させるか。で位置を決めています。
同じ原理で、y軸、z軸の回転もできます。

面の描画（ポリゴン）

上記にあったPoint3Dクラス（※正確にはクラスじゃないけど）の座標を元に面を描く場合三角形を使います。
Point3Dインスタンスを3つ集めて三角形を描きます。これがいわゆるポリゴンですね。

ポリゴン　Wikipedia

三角形というのはどうやらいろいろと使いやすいものだそうです。

■145行目
var Triangle = function( pointA, pointB, pointC, color ){
    this.a = pointA;
    this.b = pointB;
    this.c = pointC;
    this.color = color;
    this.light;
};

メソッド部分は割愛しますが、Triangleクラスを使っています。
引数に入るPoint3Dインスタンス3つを使って三角形を描くようにします。
実際に描くのはCanvasですが。

Triangleクラスは三角形データの保持です。

■86行目
this.canvas.moveTo( triangle.a.screenX(), triangle.a.screenY() );
this.canvas.lineTo( triangle.b.screenX(), triangle.b.screenY() );
this.canvas.lineTo( triangle.c.screenX(), triangle.c.screenY() );
this.canvas.lineTo( triangle.a.screenX(), triangle.a.screenY() );

こんな感じで。

陰面消去

ポリゴンを使って三角形を描画すると奥に配置されるべきポリゴンが手前に来てしまうことがあります。
これはちょっとよろしくないので、裏側になるポリゴンは描画しないようにします。
これが、陰面消去。

■159行目
isBackFace: function(){
    var cax = this.c.screenX() - this.a.screenX();
    var cay = this.c.screenY() - this.a.screenY();
    var bcx = this.b.screenX() - this.c.screenX();
    var bcy = this.b.screenY() - this.c.screenY();
    return cax * bcy > cay * bcx;
}

3つの点の配置順をチェックして面が裏面なのか表面なのかを判断します。

■77行目
if( triangle.isBackFace() ){ continue; };

こんな感じで裏面だったら描画しないようにします。

3D照明

ついでに、面の位置によって明るさを調整できるとリアルに感じますね。
光源データを持つクラスを作ります。

■204行目
var Light = function( posX, posY, posZ, brightness ){
    this.x = -100;
    this.y = -100;
    this.z = -100;
    this.brightness = 1;

    if( arguments[0] ) this.x = posX;
    if( arguments[1] ) this.y = posY;
    if( arguments[2] ) this.z = posZ;
    if( arguments[3] ) this.brightness = brightness;
};

Light.prototype = {
    setBrightness: function( num ){
  this.brightness = Math.max( num, 0 );
  this.brightness = Math.min( this.brightness, 1 );
    }
};

位置とか。明るさとか。
このクラスに対して面がどっちを向いているかを算出します。

■179行目
getLightFactor: function(){
    var ab = new Object();
    ab.x = this.a.x - this.b.x;
    ab.y = this.a.y - this.b.y;
    ab.z = this.a.z - this.b.z;

    var bc = new Object();
    bc.x = this.b.x - this.c.x;
    bc.y = this.b.y - this.c.y;
    bc.z = this.b.z - this.c.z;

    var norm = new Object();
    norm.x = ( ab.y * bc.z ) - ( ab.z * bc.y );
    norm.y = -(( ab.x * bc.z ) - ( ab.z * bc.x ));
    norm.z = ( ab.x * bc.y ) - ( ab.y * bc.x );

    var dotProd = norm.x * this.light.x + norm.y * this.light.y + norm.z * this.light.z;
    var normMag = Math.sqrt( norm.x * norm.x + norm.y * norm.y + norm.z * norm.z );
    var lightMag = Math.sqrt( this.light.x * this.light.x + this.light.y * this.light.y + this.light.z * this.light.z );
    return ( Math.acos(dotProd / (normMag * lightMag)) / Math.PI) * this.light.brightness;
}

とっても難しいので理解できません。
また、この結果をもとに色を調節します。

■166行目
getAdjustedColor: function(){
    var color = parseInt( '0x'+( this.color.charAt(0) == "#" ? this.color.substring(1) : this.color ) );
    var red = ( color & 0xff0000 ) >> 16;
    var green = ( color & 0x00ff00 ) >> 8;
    var blue = ( color & 0x0000ff );

    var lightFactor = this.getLightFactor();
    red *= lightFactor;
    green *= lightFactor;
    blue *= lightFactor;
    color = red << 16 | green << 8 | blue ;
    return "#" + color.toString(16);
}

一度、RGBに分けて各色ごとに調整して元に戻しています。ビット演算ですね。
まあこの辺もあんまり理解してないんですけど。

というわけで

簡単な解説でした。ここまでこればあとはどんなものでも描けそうです。
球体とかも。

3D Sphere - jsdo.it - share JavaScript, HTML5 and CSS

それから、この球体にテクスチャを貼り付けたりとかしたいです。
やりかたわからないけど。

参考サイト

こちらを読めばもっと理解が深まるかも。（actionscriptですけど！）

AS3.0 で 3D プログラミングを１から勉強する (1)　てっく煮ブログ

[svg]テキストの使用（text要素）

wonder — Sun, 01 Aug 2010 11:33:24 +0000

SVGではテキストを使用することもできます。

text

SVGでテキストを使用する場合はtext要素を使用します。
表示させたいテキストはtext要素で囲むことで表示されます。
色(fill)、境界線(stroke)、透明度(opacity)、座標(x、y)、等図形と同じ属性値を設定することができます。
フォントサイズはfont-size属性にて設定します。


    テキストを使用します。

デフォルト座標はテキストの左下になりますので、x座標y座標を指定しない場合はエリアから外にでてしまいます。


    テキストを使用します。　//デフォルト座標値は（0,0）なのでエリア外に配置されてしまう。

SVGサンプル - テキストの配置

テキスト要素の装飾

上記以外にも、テキストの装飾をすることができます。

・font-family
[serif, Verdana, Arial ....]

フォントの種類を指定します。

テキストを使用します。its text

・font-weight
[normal, bold ....]

フォントの太さを指定します。

テキストを使用します。its text

・font-style
[normal, italic, oblique ....]

フォントのスタイルを指定します。

テキストを使用します。its text

・text-decoration
[none, underline, overline, line-through]

下線や打消し線等フォントの装飾を指定します。

テキストを使用します。its text

・word-spacing
[数値]

単語と単語の間隔を指定します。

テキストを使用します。its text

・letter-spacing
[数値]

文字と文字の間隔を指定します。

テキストを使用します。its text

HTMLやCSSで指定する要素とほとんど同じなので分かりやすいと思います。

SVGサンプル - テキストの装飾

テキスト要素の部分的な装飾の指定

text要素の内部でtspan要素を追加することで、部分的に違う装飾を指定することができます。
tspanにはtextと同じ装飾を指定することができます。

テキストを使用します。its text

tspanには、xやy等の座標も独自に設定することができます。
ただし、親要素になるtext要素の座標は継承しません。原点からの絶対座標になります。
CSSでいうと、position: absoluto;を指定したようなものです。

テキストを使用します。its text

SVGサンプル - 部分的なテキストの装飾

テキストの配置（寄せ）

テキストは通常左寄せで表示されます。
テキストのセンタリングや右寄せをする場合はtext-anchorを指定します。
通常の寄せと少し違うのが、
指定していない場合はx=”0″がテキストの左端になりますが、middleやendを指定するとx=”0″がテキストの中央もしくは、右端になります。

・text-anchor
[start, middle, end]

指定する名称からして、どこからテキストを始めるかという感じで覚えるといいかと思います。
デフォルトはstartです。

テキストを使用します。左寄せです。
テキストを使用します。中央寄せです。
テキストを使用します。右寄せです。

SVGサンプル - テキストの配置（寄せ）

まとめ

テキスト要素の配置については、そんなに戸惑うことなくできました。
装飾についてもCSSと同じような指定でいけるので助かります。

あとは、SVGでテキストを配置するべきか、通常のHTML内に用意するべきかの判断を見極めたいですね。

[svg]要素のグループ化と参照

wonder — Tue, 27 Jul 2010 09:52:41 +0000

SVGの各要素をグループ化することで効率よく管理することが出来ます。

グループ化の方法

各要素をグループ化する方法は3つあります。

要素を単純にグループ化します。

各要素をグループ化しシンボルにします。

参照が想定される要素をグループ化するためのもの。

g要素

要素をグループ化して共通の装飾をすることができます。
また、id属性を指定しておくことで、グループ単位でのアニメーション等に使用できます。
g要素に指定された属性値は内部の要素に継承されます。
内部の要素では属性値を上書きすることもできます。

文書構造的には、HTMLのdiv要素のような意味合いに近いかもしれません。
title要素やdesc要素と一緒に使用することで的確な意味づけを行うことができます。

SVGサンプル - 図形のグループ化：g

symbol要素

各要素をグループ化することに関してはg要素と同じですが、symbolはグループ化した時点では描画されません。
use要素を使い参照することで描画されます。
use要素を使って描画されたものはsymbol要素でグループ化された図形のインスタンスになります。
Flashのシンボル機能に近いと思います。

※下記にも記載しますが、use要素のhrefを使うときは、xlinkの名前空間が必要になります。

g要素と違うのは、

参照されなければ、描画されないこと
viewBox属性とpreserveAspectRatio属性を持つことができること

です。
HTML文書にsvgを読み込むような感じに近いです。

SVGサンプル - 図形のグループ化：symbol

defs要素

参照が想定される要素をグループ化するためのもの。
symbolと同じようにdefs要素内は参照されない限り描画されません。
gやsymbolと似ていますが仕様書によると、

‘defs’ 要素は被参照要素のためのコンテナ要素である。可読性とアクセシビリティの要求から、参照される可能性のある要素は可能ならこの要素内に定義することが推奨される。
http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/struct.html#DefsElement

とあるので、参照されるもの全体を包みこむように使うのが良いと思われます。
上記で書いた例でも、全体をdefsで囲むほうが良いですね。

また、id属性を付けることは出来ますが、どうやら参照してまとめて描画させることはできないようです。
個別にidを付けて参照します。


    
        
        
    


 //描画されない
 //描画される

SVGサンプル - 図形の参照

use要素

上記の挙げた、グループ化要素を参照することでインスタンス化して再利用できるようになります。
使いまわせるという事ですね。
参照は、idを使います。
use要素のhref属性値に「#hoge」のように参照先のidを指定します。


    
        
        
    


 //g要素を参照して描画

注意するべき点は、use要素のhref属性値に参照先を指定する際、xlinkという規格を用います。
xlinkはxmlの規格の一種なのでnamespaceを指定します。

use要素を使用するときには、忘れないようにします。
その他、a要素等でも使うので予め指定しておいてもいいかもしれません。

XMLリンク言語（xLink）

use要素ですが、座標を設定することで、位置をずらすこともできます。
また、いくつでも参照して描画できます。


    
        
        
    


 //g要素を参照して描画
 //いくつでも描画できる

参照できる要素としては、上記のグループ化要素をはじめ、svg、各図形要素（rect、circle等前回の記事参照）も参照することができます。
何回も使用する予定のあるものはuseで使いまわしたほうが良さそうです。

SVGサンプル - 図形の参照

まとめ

やろうと思えばどの要素を使ってもできるようなので、どの要素をいつ使うかっていう所が重要なのかなあと思います。
HTMLもdivの使いどころに迷うように、また迷いそうな気がします。

[svg]基本図形

wonder — Fri, 23 Jul 2010 22:48:08 +0000

SVGで描画できる基本的な図形について。

rect

長方形を描画することができます。
角が直角のものだけではなくて、角丸も描画できます。



x: x座標
y: y座標
width: 幅
height: 高さ
rx: 角丸のx軸方向の半径
ry: 角丸のy軸方向の半径。省略時はrxと同じ値になる。

SVGサンプル - 長方形の描画

circle

円を描画することができます。
正円のみの描画です。



cx: 中心のx座標
cy: 中心のy座標
r: 半径

SVGサンプル - 円の描画

ellipse

楕円を描画することができます。



cx: 中心のx座標
cy: 中心のy座標
rx: x軸方向の半径
ry: y軸方向の半径

SVGサンプル - 楕円の描画

line

直線を描画することができます。
2点の座標を指定することで、2点をつなぐ直線を描画します。
2点間のみの描画ですので、続けて線を描画したい場合は次に紹介するpolylineを使用します。



x1: 開始点のx座標
y1: 開始点のy座標
x2: 終了点のx座標
y2: 終了点のy座標

SVGサンプル - 線の描画

polyline

継続して線を描画することができます。
カンマで区切った座標を並べることで、制限なく線を描画できます。
fill属性値を指定しないと塗り色がついてしまうので、線だけの描画をしたい場合はfill=”none”を指定しておきます。

 SVGサンプル - 連続する線の描画 
polygon
多角形を描画することができます。

指定方法はpolylineと同じです。

polylineは線が閉じないのに対して、polygonは線が閉じて多角形になります。

 SVGサンプル - 多角形の描画

[その他]AR（拡張現実）あれこれ

wonder — Mon, 19 Jul 2010 04:18:40 +0000

ARってすごい技術。
調べてみるとすでにいろいろなところで使われています。
Flashではすでにライブラリもあるので比較的簡単に実現できるようです。

ARとは

拡張現実（かくちょうげんじつ）とは現実環境にコンピュータを用いて情報を付加提示する技術、および情報を付加提示された環境そのものを示す。英語表記はAugmented Reality 、省略形はAR。
拡張現実 - wikipedia

漫画でいうと、
「電脳コイル」のメガネ。
「ドラゴンボール」のスカウター。
みたいなものです。
すごい、未来の技術みたいでわくわくしますね。

バーチャルリアリティみたいもの？

バーチャルリアリティは仮想現実とも言われるように全てがバーチャルなのに対してARは現実とバーチャルな物体を組み合わせて表現します。

Webでの使われ方

主に、Webカメラを通してマーカーを認識し、3Dのバーチャルな物体を表示させることが多いようです。
また、マーカーだけではなくGPS情報を元に物体を表示させることもあります。「セカイカメラ」等。

ARはあくまでも現実にバーチャルな物体を付加し表示すること。
webカメラありき、マーカーありきという考え方はしないほうがいいかも。
ゆくゆくは、特別なマーカーではなくて実在するものがマーカーの代わりになったりするかもしれません。
とはいえ、今段階では一番実装が現実的です。

コンテンツ

・セカイカメラ
iphone app。
GPSデータをもとに登録されたデータを表示させる。
サンプル動画

・MONKEY MAJIK 「BEST」
アルバムのジャケットにマーカーをつけて販売。
サンプル動画

・アイアンマン2
公式サイトでARコンテンツを展開。
アイアンマンのマスクを表示。
サンプル動画

・エヴァンゲリオン
専用のiphoneアプリを箱根の特定の場所で使用すると実物大のエヴァンゲリオンが見られる。
惜しくも中止になったようです。

・鉄の工場、製鉄所へGO!
マーカーをダウンロードさせて、3Dコンテンツを見せる。
子供向け。
サンプル動画

・ARレイアウトシュミレーター - sony
sony製品のレイアウトをシュミレートできる。

2009年後半から2010年にかけて、エンターテイメントの分野ではもうかなり使われている印象。
技術的な壁はもうないのかも。
ARコンテンツ開発をうたっている会社もかなり増えている印象。

ARを実装するためのライブラリ

現在は様々な言語でライブラリが用意されています。

・ARToolKit
C言語。1998年にワシントン大学HIT研究室で加藤博一氏が開発。世界初のARライブラリ。

・NyARToolKit
Java。A虎@nyatla.jp氏によって、CからJavaに移植。
Sliverlightとか、processingとか。

・FLARToolKit
Actionscript3.0。Saqooshaさんが移植。

自分は、actionscript3.0しかだめなので以降FLARToolKitについて調べています。

ライブラリのライセンス

2種類のライセンスから選べます。

●GPL
無料で使用可能。
ただし、ソースの公開が条件。

●商用ライセンス
有料。ソースは公開しなくてもよい。
200,000円ぐらいから。

実際に案件で使用する場合には注意。
詳しくは以下。

http://www.libspark.org/wiki/saqoosha/FLARToolKit

ライブラリの仕事

マーカーを認識する
マーカーから座標を特定する。

マーカー認識と座標の特定が主な仕事。
その他のオブジェクトの表示等は別で行う。
FLARToolKitの場合は、Papervision3D等のライブラリを使って作成する。

マーカー

特定の決まりごとを守ればある程度自由がきく。

色のコントラストを一定の濃さにすること。
上下左右が判別できること。
内側と外側の比率が1:2:1になること。

基本的なマーカーの認識方法は以下。

ARマーカーの基本 - The Sixwish project

独自マーカーの作成

独自でマーカーを作成したい場合は、このサイトが便利。

ARToolKit Marker Generator

マーカー画像の解像度も選べる。
この場合、解像度が高いほど認識の制度は落ちるようですが。

まとめ

思ったよりかなり浸透しているなあという印象。
コンテンツとしてのインパクトはかなりあるし、視覚的に確認できるので一般消費者向けにはかなり効力を発揮するのだと思いました。
今後は、andoroid用、iphone用のライブラリも整備されてくるのでARのアプリケーションもかなり増えると思います。

BtoCの案件なら依頼されたり提案に使うような日が近いかもですね。

[svg]viewBox属性とpreserveAspectRatio属性

wonder — Sat, 17 Jul 2010 22:27:21 +0000

viewBox属性とpreserveAspectRatio属性についてです。

viewBox属性

svgの要素にはviewBox属性値を指定することができます。
viewBoxというのは簡単に言うと

svg要素を表示するエリアを決定する

ことです。
viewBoxの指定方法は以下のようにします。

viewBox="a b c d"

a　：　表示エリアのx座標原点の位置
b　：　表示エリアのy座標原点の位置
c　：　svg画像の表示幅
d　：　svg画像の表示高さ

です。単位は全てpxです。
分かりづらいので例をあげます。
まずは、前半について。

この場合、svg画像としては横100px、縦100pxの四角が描画されます。
viewBoxで原点の位置を指定していますが、これは原点をx軸に10px、y軸に10px移動させるということなので画像自体が左上に移動します。

SVGサンプル / viewBoxの設定（原点位置の変更）

画像を移動させるのではなくて、原点が移動するということなので注意が必要です。
次に表示エリアの指定部分を変更してみます。

こうすると、指定した原点から幅50px、高さ50px分だけ表示されます。
しかも、表示エリアの大きさは変わりませんので拡大したような形になります。

逆に大きい値を指定することで縮小したように見せることもできます。

SVGサンプル / viewBoxの設定（表示エリアの指定）

さてここで、もともと指定していた画像サイズ（width,height）とviewBoxのサイズの比率が違う場合はどうなるのでしょうか。

このような場合ですね。

SVGサンプル / viewBoxの設定（viewBoxと表示エリアで設定した比率が違う場合）

どうでしょうか。
viewBoxの比率を維持したまま表示されていますよね。
svgは画像でもあるので、比率が変わってしまったらおかしいからですよね。
では、比率が変わってもいいから幅、高さともに表示エリアいっぱいに表示させたい場合はどうするのか。

その場合は、preserveAspectRatio属性を指定します。

preserveAspectRatio属性

上記にも書いたとおり元々の画像サイズとviewBoxで指定したサイズの比率が違う場合にどうするかという指定です。

preserveAspectRatio="描画方法 [slice or meet]"

のように指定します。

■描画方法

元々の画像サイズとviewBoxで指定したサイズの比率が違う場合にどこに基準をおくかということ。
幅を優先するのは、高さを優先するのか。
はたまた、中央に揃えるのか。
主なものをあげると、

【none】
均等な伸縮を強制しない

【xMidyMid】（デフォルト）
要素の viewBox のＸの中央値をビューポートのＸの中央値に揃える。
要素の viewBox のＹの中央値をビューポートのＹの中央値に揃える。

他にもかなり種類があるので、詳しくは下記にて確認ください。

http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/coords.html#PreserveAspectRatioAttribute

デフォルトでは、比率を保って描画されます。
比率を保たずに描画する場合は、上記の通り「none」を指定します。

SVGサンプル / viewBoxの設定（比率の調整）

■[slice or meet]

これは、viewBoxの全体が収まるようにするか、はみだすようにするかの指定です。

slice　viewBox は他の条件を満たしつつ、出来るだけ小さく伸縮される。
meet　viewBox は他の条件を満たしつつ、出来るだけ大きく伸縮される。

と、ちょっと意味がわからないですね。
meetを指定するとviewBoxは表示エリアから出ることなく拡大・縮小されます。つまり確実に全体が表示されます。
一方、sliceを指定すると上記で指定した描画方法に則りはみでた部分は切ってしまいます。つまりは表示されない部分がでてきます。

まとめ

viewBox属性の指定は、全体の拡大縮小をいっぺんに指定できてしまうところがいいですね。
これはベクターならではの利点でしょうか。

また、原点の位置の移動も指定できるので、下記のような使い方もできます。

Example for viewbox control - carto:net

がんばって使いこなしましょう。

[actionscript3.0]緩急をつけた動き

wonder — Sat, 03 Jul 2010 13:18:18 +0000

緩急をつけた基本的な動きについて

基本

ballオブジェクトを作成して動かすことにします。

package {
    import flash.display.Sprite;
    import flash.events.Event;

    public class FlashTest extends Sprite {
        private var ball:Ball;

        public function FlashTest() {
            ball = new Ball(20);
            ball.x = 20;
            ball.y = stage.stageHeight / 2;
            addChild( ball );

            addEventListener(Event.ENTER_FRAME, onEnterFrame);
        }

        private function onEnterFrame(e:Event):void {
            //処理を書く
        }
    }
}

/* ボールオブジェクト */
import flash.display.Sprite;

class Ball extends Sprite {
    public var radius:Number;
    public var color:uint;

    public function Ball(radius:Number=40, color:uint=0Xff0000){
        this.radius = radius;
        this.color = color;
        init();
    }

    public function init():void {
        graphics.beginFill(color);
        graphics.drawCircle(0, 0, radius);
        graphics.endFill();
    }
}

等速運動

これは簡単。
単純にball.xをある一定の数増やしていくだけ。

ball.x += 5;

等速運動 - wonderfl build flash online

加速する運動

ballを加速させるには、一定の速度に「加速度」を加えます。
そうすることで、フレームが進むに従って速度が増えていきます。

vx += ax;　//速度に加速度を追加
ball.x += vx; //x座標を増やしていく

加速する運動 - wonderfl build flash online

減速する運動

上の2つとは少し変えて、目的座標との差の何割か進むようにします。
つまりは進んでいく距離がだんだんと短くなります。

var dx:Number = target - ball.x; //目的座標との差を取得
ball.x += dx * ax; //差の何割かだけ進む

減速する運動 - wonderfl build flash online

加速してから減速する運動

減速する運動で使った何割かの部分（ax）の値をだんだん増やしていきます。
最初は小さい値から始めることで、加速していくように見えそのうち上記と同じように減速していきます。

var dx:Number = target - ball.x; //目的座標との差を取得
ax += per; //何割かの部分を増やす
ball.x += dx * ax; //差の何割かだけ進む

加速してから減速する運動 - wonderfl build flash online

サインカーブを使った運動

サインカーブというのはMath.sin()が描くカーブ
検索してもらうといろんな画像がでると思いますが、値としてはどんな数値を入れても -1.0 ～ 1.0　が返ってきます。
この返ってくる値に変化を加えることでx座標に変換します。

ball.x = (Math.sin( fx ) + 1 ) * 200; //Math.sin()の値を取得
fx += 0.05; //サインカーブに入力する値を変化させる

サインカーブを使った運動 - wonderfl build flash online

曲線を描く運動

「加速してから減速する運動」を少し変更すると曲線を描くようになります。
まずは、x座標だけではなくy座標も変化するようにします。

var dx:Number = target - ball.x;
var dy:Number = target - ball.y;
ax += per;
ay += per;
ball.x += dx * ax;
ball.y += dy * ay;

この状態で目標を動くオブジェクトにします。
今回はもうひとつballインスタンスを作成します。

var dx:Number = target.x - ball.x;
var dy:Number = target.y - ball.y;
ax += per;
ay += per;
ball.x += dx * ax;
ball.y += dy * ay

曲線を描く運動 - wonderfl build flash online

まとめ

ちょっとしたコードでいろいろな動きを再現できるので覚えておいて損はないです。
ここに書いたことについてはロクナナのイベントで城戸さんがお話されていたものを参考にしています。
ぜひそちらもチェックしてみてください。

http://event.67.org/?p=2139#report

[actionscript3.0]インバースキネマティクス：リーチ

wonder — Tue, 29 Jun 2010 13:18:50 +0000

前回に引き続きインバースキネマティクスです。
今回は、インバースキネマティクスのリーチについてです。

基本的な考え方

前回のドラッグは、先端が目標値に固定され、他のセグメントがそれについていく動きでしたが、今回のリーチは基点が固定され先端が目標値に向かっていく動きです。
つまり、

先端　→　自由（目標値に向かおうとする）
基点　→　固定

となります。
目標値は引き続きマウス座標にします。

セグメントを描画・回転

ここまでは前回と同じです。
セグメントを生成して目標値に向かって回転させます。

セグメントをマウスに向ける：IK drag (2) - wonderfl build flash online

リーチの仕組み

ここからがちょっとややしい所です。
前回のドラッグのときは、マウスに近いほうから

・セグメントの回転
・セグメントの位置決定

↓

・次のセグメントの回転
・次のセグメントの位置決定

↓

つづく

というように、ひとつひとつについて回転と位置決定が同時に行われていました。
しかし今回のリーチについては違います。
基点が固定されているので目標点に近いほうから行っていくと基点がずれてしまいます。
そこで、回転と位置決定を分けて設定します。

※目標点から
・セグメントの回転
・次のセグメントの回転
　　・
　　・

↓

※基点から
・セグメントの位置決定
・セグメントの位置決定
　　・
　　・

というようにします。
重要なのは、設定していく順番が逆になっていることです。
注意しましょう。

仕組みがわかりやすいように作ってみました。
クリックすると設定が進んでいきます。

リーチの仕組み：IK reach (2) - wonderfl build flash online

ここでもうひとつ重要なのは、回転目標は先のセグメントの一方のポイントになることです。
コードを見てもらうとわかります。

/* seg0 */
var dx:Number = mouseX - seg0.x;
var dy:Number = mouseY - seg0.y;
var angle:Number = Math.atan2( dy, dx );
seg0.rotation = angle * 180 / Math.PI;

var w:Number = seg0.getPin().x - seg0.x;
var h:Number = seg0.getPin().y - seg0.y;
tx = mouseX - w;
ty = mouseY - h;

/* seg1 */
var dx:Number = tx - seg1.x;
var dy:Number = ty - seg1.y;
var angle:Number = Math.atan2( dy, dx );
seg1.rotation = angle * 180 / Math.PI;

var w:Number = seg1.getPin().x - seg1.x;
var h:Number = seg1.getPin().y - seg1.y;
tx = tx - w;
ty = ty - h;

tx、tyという値をとりそのポイントに向けて回転します。
また、上記のサンプルを見てもらうとわかるようにこの方法は位置についてはあまり正確ではありません。
ただ、毎フレーム実行されるので実際に実行した場合はあまり気になりません。

3つのセグメントをリーチさせる

上記のサンプルを整理して、3つのセグメントをリーチさせます。

3つのセグメントをリーチさせる：IK reach (3) - wonderfl build flash online

なんだか面白い動きですね。

複数のセグメントをリーチさせる

あとは、コードをまとめてセグメントを増やすだけです。

複数のセグメントをリーチさせる：IK reach (4) - wonderfl build flash online

ひもがいっぱい

さて、あとは好きにいじってみましょう。
ひもをいっぱい配置してみます。

ひもがいっぱい：IK reach (5) - wonderfl build flash online

[actionscript3.0]インバースキネマティクス：ドラッグ

wonder — Sun, 27 Jun 2010 05:19:40 +0000

インバースキネマティクスを勉強中です。
インバースキネマティクスの中でもわかりやすいドラッグについてです。

基本的な考え方

インバースキネマティクスは、関節を持つ複数のセグメント(要素)をつなぎ合わせたものを使います。
つなぎ合わせたものの端を一方を基点、もう一方を先端とすると先端部分の位置・角度から決めていき全体を描画します。

今回のドラッグについては、

先端　→　目標点
基点　→　自由

の場合に使用します。
今回は目標点はマウスにしますので、マウス追従するものを作ってみます。

※「先端」「基点」等の呼称は正式なものではないです。正式な呼称については調べてみてください。

セグメントを描画

まずは使用するセグメントを作ります。
セグメントとセグメントは関節で繋がるのでいつのセグメントにつき1つの関節を作ります。

1つはオブジェクトが元々持っている、基準点を使います。
つまり、obj.x、obj.yで参照できる点です。

もうひとつは、独自で作成します。
今回はgetPin()で参照できる点を一つ作りました。

2つの関節点はわかりやすいように色を変えてあります。

セグメントを描画：IK drag (1) - wonderfl build flash online

セグメントをマウスに向ける

セグメントの状態を決める中でまずは角度を決めてみます。
位置は中央に固定しておきます。

角度については基本的な三角関数を使っています。

セグメントをマウスに向ける：IK drag (2) - wonderfl build flash online

ここまではそんなに難しくないですね。

セグメントをドラッグする

それでは、一つのセグメントをドラッグしてみます。
角度の決定は上記と同じです。

角度の決定をした後に、もう一つ位置の指定をします。
今までは、基点（白い点）を固定して先端（赤い点）をマウスに向けました。
これを、先端をマウスに固定して、基点部分を自由にしています。

ちょっとややこしいですね。

セグメントをドラッグする：IK drag (3) - wonderfl build flash online

角度を決めた後に、位置を決めている部分です。

var w:Number = seg0.getPin().x - seg0.x;
var h:Number = seg0.getPin().y - seg0.y;
seg0.x = mouseX - w;
seg0.y = mouseY - h;

上の二行でセグメントの2点の距離を測ります。
下の二行でセグメントの基準点を距離分ずらします。

そうすることで、先端がマウスに合うようにしています。
ここが今回の一番のキモですね。

これができてしまえば、あとはつなげるだけですから。

2つのセグメントを連動させドラッグする

さて、それでは2つのセグメントをつなげてみます。
これはとても簡単。
最初のセグメントはマウスを目標点にして、2つ目は最初のセグメントの基準点を目標点にすればいいだけです。

2つのセグメントを連動させドラッグする：IK drag (4) - wonderfl build flash online

できましたね。

複数のセグメントを連動させドラッグする

あとは、セグメントを増やすだけ。
位置決定部分を使いまわせるように書き直します。

複数のセグメントを連動させドラッグする：IK drag (5) - wonderfl build flash online

これで完成。
以外に簡単にできましたね！

紐のようなものをドラッグする

セグメント部分の幅や高さ、色や個数などを変更することでいろんなものを作ることが出来ます。
幅と高さを小さくすると紐みたいになりました。

紐のようなものをドラッグする：IK drag (6) - wonderfl build flash online

あとは、アイデア次第ですよ！