[New] JavaScript ライブラリ tmlib.js で円同士の衝突プログラムを作ってみた

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

以前『JavaScript ライブラリ tmlib.js で円同士の衝突プログラムを作ってみた』 というエントリーを書いたのですが, tmlib.js の仕様が色々と変わってしまい動かない状態だったので, 修正しました.

よかったら参考にしてください.

自作ライブラリ tmlib.js を使って, 円同士の衝突プログラムを作ってみました.

やっているのは,

  • 円同士の衝突判定
  • めり込みの補正
  • 衝突後の反発

です.

ちゃんと計算するなら, 衝突時間を調べてその分ベクトルの長さを調整して… ってやんないといけないのですが, 速度的に問題があるってのと難易度が上がってしまう(ホントはめんどくさい)のでちょっと省略しています.

サンプルは jsdo.it の方に移植してあるので, 実際に 動かしたり, fork してイジったりして頂けると嬉しいです.

Read More

tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

tmlib.js のハッカソンイベントをやることになりました!! っということでそれまでにバンバン tmlib.js のエントリーを投稿していこうと思います.

今回はその第一弾! Graphics(HTML5 Canvas) 編です. このサイトでお馴染みの怒濤シリーズ. tmlib.js の Graphics 周りの機能についてのサンプルを作りまくってみました.

怒濤って何?って方はこちらをどうぞ

tmlib.js で定義されている tm.graphics.Canvas クラスは HTML5 Canvas を拡張したものなので HTML5 Canvas の機能は基本的にそのまま使えます. なので HTML5 Canvas の勉強にもなるかと思います.

また, それに加え星型や多角形といった複雑な図形を簡単に描画したり, モノクロフィルタやブラーフィルタを掛けて遊んだりってことができます. ゲームへの応用も簡単にできます.(ゲームへの応用は次回やる Application 編で詳しく説明します)

もちろんサンプルは jsdo.it に全て移植してあるので実際に実行したり, fork してイジッたりして遊んでもらえると嬉しいです.

Read More

【TechBuzz】第3回.js系開発技術勉強会 で tmlib.js について発表してきました!!

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

【TechBuzz】第3回.js系開発技術勉強会 で tmlib.js について発表してきました!!

ちなみに発表に使ったスライドはこちらです. Web 上で作ったのでリンクをクリックするだけで見れます.

セミナーの内容は

  • yeomanでフロントエンド開発を効率化する方法
  • CoffeeScriptとTypeScriptの比較
  • tmlib.js をよろしくお願いします
  • 懇親会

ってな感じでした.

もう1週間経っちゃいましたがざっくりとレポートを書きたいと思います.

Read More