Two.js

Two.js

patatapの作者、元Google Creative Labのjonobr1作のSVG,Canvas,WebGLライブラリ。 ベクターグラフィックスに特化するために文字や画像は扱うための機能はついてない。 (two.rendererのなかをいじればできるけど) 名前の由来はThree.js

しかしJustin Windle ってやっぱりGoogle Creative Labの人も Sketch.jsっていうライブラリをつくってるし、ここのチームはみんなそれぞれ最強のライブラリ持ってるのだろうか…

現在はあんまりアクティブに開発されていない感じだし、この手のだとCreate.jsPixi.jsの方がメジャーなんだろうけど、以前からこの作者が作るものが面白いなあ、とおもっていたので試してみた。

まあ、とりあえず丸だ。丸を書かないと。

two = new Two(
  type:       Two.Types["canvas"]
  fullscreen: true
  autostart:  true
).appendTo(document.body)

circle = two.makeCircle(two.width/2 + 100, two.height/2 + 100, 100)
c.fill = "red"
c.noStroke()

(coffee scriptで書いてます)

という感じでbodyにフルスクリーンのcanvasができて。中心に丸。

typeを指定しないとSVGになるのだけど、さすがに多数のオブジェクトを動かしたい場合はcanvasやwebglの方がパフォーマンスがでる。

あとはまあ、この辺はドキュメント読みましょうねって話なんだけど、Two.jsの特徴は頂点とアンカーポイントをコントロールできるところなので、その辺をさわってみる。

このcircleをみてみると、これはTwo.Polygonオブジェクトで、こいつがTwo.Anchorをもってる。このTwo.Anchorたちをいじるとウニョウニョとうごかしたりできるわけか。

かわいい。

Flashとかさわっていたのがもう10年以上前なので、こういう動きのあるコードを書くのは久しぶりで楽しい。