タグ

ブックマーク / f-site.org (3)

  • 数学を使ったJavaScriptコーディング

    幾何学的な計算や物理運動を表すには、数学の知識が求められます。もっとも、計算は必ずしも難しい訳ではありません。考え方さえわかれば、応用できることが多いです。ここでは、一見難しそうなベクトルの外積と微分のふたつについて、その使い途と考え方をリンクでご紹介します。また、ビデオ映像やjsdo.itのサンプルも掲げました。 01 ベクトルの外積をどう使うか ベクトルの中でも「外積」は、考え方のわかりにくい計算です。いきなり概念を捉えようとすると難しいので、何に使えるのかを知ることから始めましょう。 01-01 珍味ベクトル外積3種盛り 2014年1月18日土曜日に催された第12回Creators MeetUpで、2次元のベクトルに絞ったインタラクティブなサンプルを例に、外積がどう使われているのかをご紹介しました。USTREAM録画も公開しています。 サンプル001■立方体をマウスポインタの位置に応

    数学を使ったJavaScriptコーディング
  • オブジェクトが動く速度と加速度と微分の考え方

    物理法則にしたがったオブジェクトのアニメーションをスクリプティングするとき、数学の「微分」の考え方で捉えられると応用の幅が広がります。微分と聞くと難しそうに響きます。けれど、大雑把にいってしまえば、オブジェクトの動きについて変化を見るということです。アニメーションがつぎのフレームでどう変わるかを考える、といってもよいでしょう。 01 等速直線運動 決まった速さで同じ向きに動き続ける「等速直線運動」なら、つぎのフレームに移るたびにオブジェクトの位置(xy座標)に定数を足します。この定数(xy平面で捉えるならベクトル)が速度です。つぎのフレームにおけるオブジェクトの位置は、今の位置に速度を加えて求めます。 位置 += 速度 時間(t)と位置(x)をそれぞれ横軸と縦軸にした等速直線運動のグラフは、下図001のように一次関数(x = vt + x0)で表されます(「直線の式(方程式)」参照)。一次

    オブジェクトが動く速度と加速度と微分の考え方
  • CreateJS発表

    Grant Skinner氏が、blog記事「Announcing CreateJS」でCreateJSを発表しました。公式サイトも間もなく公開されるようです。氏のblogから内容をかいつまんでご紹介します。 CreateJSは、いくつものライブラリモジュールとツールを統合したものです。HTML5にもとづくリッチなインタラクティブコンテンツがつくれます。これらのライブラリはそれぞれ独立して使えますし、ニーズに応じて組合わせることもできます。まずは、EaselJSとTweenJS,、SoundJS、PreloadJSが提供されます。 公式サイトcreatejs.comでは、デモやドキュメント、チュートリアル、コミュニティ、ショーケースなどが公開される予定です。 EaselJS EaselJSはHTML5のCanvasに表示リストやインタラクティブな仕組みを加えます。扱い方も、Flashのデベ

    CreateJS発表
  • 1