タグ

物理に関するmasakuma0812のブックマーク (3)

  • p2.js·JavaScript製の物理エンジン MOONGIFT

    物理エンジンは様々なケースで利用されています。ゲームはもちろんのこと、オブジェクトが動く際に、それがよりリアルに感じられるためには物理エンジンが欠かせません。複数のオブジェクトが関係し合う場合も同様です。 有名どころとしてはBox2dが知られていますが、今回はp2.jsを紹介します。Web上で動作するJavaScript製の物理エンジンです。 p2.jsの使い方 p2.jsは多数のデモを用意していますが、今回はその一部を紹介します。 二つくっついたオブジェクト同士が衝突するデモ。 一つの物質が横に飛んでいくもの。 多数のオブジェクトが衝突するデモ。 車のデモ。矢印キーで動かせます。 実際に車を動かしてみたところ。バネもあって、ショックを吸収しながら進んでいるのが分かります。 p2.jsは衝突検出、コンタクト、摩擦、反発、モーター、スプリングなどの機能が備わっています。サンプルコードは次のよ

    p2.js·JavaScript製の物理エンジン MOONGIFT
  • Dynamics.js - 物理系アニメーションライブラリ MOONGIFT

    アニメーションは何の意味もなく動かしても面白くありません。一回転させたり、ひっくり返ったりと現実世界を投影するような動きは目を引きやすく、表現としても分かりやすいです。 そこで使ってみたいのがDynamics.jsです。物理系の動きを再現するJavaScript/CSSアニメーションライブラリになります。 Dynamics.jsの使い方 Dynamics.jsには多数のパターンで動きが作られています。 スプリングという名前のアニメーションです。 バウンド。 強い重力。 この他にもいくつものパターンでアニメーションが作られています。さらにパラメータを変更することで動きを調整できるようになっています。Dynamics.jsを使ってリアルな物体感を感じさせるアニメーションを実現してください。 Dynamics.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです

    Dynamics.js - 物理系アニメーションライブラリ MOONGIFT
  • [JS]物理法則に基づいたさまざまなアニメーションを実装できるスクリプト -Dynamics.js

    デモページ 物理法則に基づいたさまざまな動きは、ブルーのプルダウンからいろいろ試すこともできます。 Dynamics.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="dynamics.js"></script> </body> Step 2: JavaScript 適用するエレメントを指定し、アニメーションを設定します。 elは要素、el内のプロパティはアニメーションさせるプロパティと値、typeはアニメーションの種類、frequency, frictionはアニメーションの細かい設定、durationはタイミングです。 var el = document.getElementById("logo") dynamics.animate(el, { translateX: 350,

    [JS]物理法則に基づいたさまざまなアニメーションを実装できるスクリプト -Dynamics.js
  • 1