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 たちをいじるとウニョウニョとうごかしたりできるわけか。

(ここに動く物があったけど coffee script のビルドが面倒なので削除しました…)

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