Creators Meetup数学ネタまとめ [Edit]

投稿者：野中 文雄 | 投稿日：2015.06.05 | [CreateJS][HTML5][野中ゼミ]

クリエータがひとり15分の枠で知識や情報を発表し、互いに刺激し合う場の「Creators Meetup」は毎月第3土曜日に開かれています。制作の技術や知識にとどまらず、さまざまな分野の経験や興味にもとづく多彩な話題を採上げることが特長です。間もなく、第30回を迎えようとしています。

そのCreators Meetupの中で、隔月で数学ネタの一席を務めるようになり、数も重ねてきました。そこで、ビデオ録画とレジュメやサンプルのリンクを、分野ごとにまとめてみます。

01 三角関数

第22回Creators MeetUp「sinとcosは何する関数？」(2014.11.19)

三角関数のsinとcosは、直角三角形の辺の比率として初めに習います。それをプログラムのアニメーション表現で使うのは、おもに円運動です。「三角」がどうして「円」になるのか、疑問をもったとしても不思議はありません。sinとcosはどう定められ、どういう性質があるのかという基本を中心に、変わったアニメーションの応用表現も紹介します。

    【お品書き】
  1. 三角関数のsinとcosの求め方と性質
  2. 理解すれば覚えることは減る
  3. スピログラフを回してみる

サンプル

02 ベクトル

第12回Creators Meetup「珍味ベクトル外積3種盛り」(2014.01.18)

ベクトルの「外積」は、考え方のわかりにくい計算です。けれど、何に使えるのかを知れば、式そのものは簡単な四則演算です。今回は2次元のベクトルに絞って、3つのインタラクティブなサンプルを例に、外積がどう使われているのかをご紹介します。

    【お品書き】
  1. ベクトルの外積とは
  2. 面の向きが表か裏かを調べる
  3. ふたつの直線の交点を求める
  4. 回す力のかかりやすさを決める

サンプル

第26回Creators MeetUp「ベクトルふたたび − 外積と内積を使う」(2015.04.18)

「ベクトル」というのは、とっつきにくい印象が強いようです。とくに、「内積」とか「外積」とか、何の積なのか。いずれも、式そのものは単なる四則演算です。けれど、そもそもどんなときに使うのかわらないのが、近寄りがたい理由でしょう。

2014年1月の第12回Creators MeetUpでは、「珍味ベクトル外積3種盛り」と題して外積の使い道について一席務めました。今回は、その続編でもあります。内積も加えて、最近小学校の算数教材の制作で実際に使った例をご紹介します。式は前述のとおり四則演算ですので、考え方に重点を置いてご説明します。

    【お品書き】
  1. 座標でかたちを扱う
  2. 座標が面の中か外かを調べる
  3. 座標が線分に近いか遠いかを調べる

03 行列

第20回Creators MeetUp「行列？なにそれ？おいしいの？」(2014.09.20)

行列は、一定の計算規則にしたがう数値の集まりです。その数値の集まりともうひとつの行列を演算すると、もとの数値が変換されます。つまり、数値を変換するパラメータの集まりが行列だと捉えることもできます。

たとえば画像にかけるフィルタは、各ピクセルのRGBカラーという数値の集まりに行列演算してイメージを変換します。とくに行列を意識する意味があるのは、座標変換です。図形の座標を変換すると、かたちが変わります。2次元あるいは3次元空間における座標の伸縮・回転・移動は行列の乗算で表せるのです。

もっとも、これらの変形はそれぞれのプロパティを使ってもできる場合がほとんどです。あえて難しげな行列を使うと何がお得なのか、CreateJSを使ったサンプルコードでご紹介します。

行列の演算は、数値の集まり同士で行いますので、計算量は多くなります。けれど、決まった規則による大量の演算はコンピュータの仕事です。行列の計算そのものでなく、その意味と利点に焦点を当てて解説します。

    【お品書き】
  1. フィルタでカラーを変換する
  2. 行列で座標を変換する
  3. 矩形のビットマップを3頂点で変形する
  4. 変換行列を3次元表現に応用する

サンプル

04 物体の運動を表す

第18回Creators MeetUp「速度から位置を決めるアニメーション ー 微分により運動を考える」(2014.07.19)

物理的なアニメーションを表現しようとするとき、直接位置を計算しようとするより、速度から導いた方が複雑なアニメーションも簡潔に表せたりします。これは数学的には、微分により物体の運動を捉えていることになります。微分の計算そのものはしなくても、考え方を知るだけで見通しはよくなり、応用の幅も広がます。

    【お品書き】
  1. 等速直線運動
  2. 自由落下運動
  3. イーズアウト
  4. バネのように伸び縮みする動き
  5. バネの動きの加速度

サンプル

第28回Creators MeetUp「ベレの方法ってなんですの？」(2015.05.16)

「ベレの方法」というのは、互いの間に力が働く粒子の動きを表す物理の考え方(方法)です。

物体の運動は、速度から位置を求めるのが普通です(「速度から位置を決めるアニメーション ー 微分により運動を考える」参照)。ところが、ベレの方法では、速度でなく位置と粒子間の位置関係から運動を定めます。すると、つぎのサンプル(オブジェクトはドラッグできます)のような一見複雑そうな動きが、四則演算で表せます。数式やコードより、考え方に重点をおいてご説明します。

    【お品書き】
  1. ベレの方法とは
  2. 点を動かす
  3. 壁の制約を加える
  4. ふたつの点を棒でつなぐ
  5. 点と棒で三角形を組立てる
  6. 多角形のすべての頂点を棒で結ぶ
  7. 中心に点を加えてドラッグする

サンプル

05 その他

第24回Creators MeetUp「パスにこだわる」(2015.01.25)

与えられた座標から軌跡などのパスを描くとき、多くの場合間隔を小さくとれば直線で結んでしまえば差支えありません。けれど、座標の間隔が大きかったり、あるいは向きが激しく変わることもありえます。そのようなとき、滑らかなパスを描くにはどうしたらよいか。ベジエ曲線の描き方と、座標の結び方についてご説明します。

    【お品書き】
  1. ベジエ曲線とその描き方
  2. 座標から曲線のパスを描く
  3. 軌跡の座標を滑らかな曲線で表す

第30回Creators MeetUp「ネイピア数 〜美しきムダな数〜」(2015.07.18)

「ネイピア数」eは、自然対数の底として用いられ、多くのプログラミング言語に定数Math.Eとして備わります。けれど、ほとんどの人生にまったく必要のない数で、この定数を使わずに過ごすプログラマが大半でしょう。これほどまでに実用性のとぼしい定数が、数学や自然界のふとした端々に顔を現します。そんな「ネイピア数」の生態を追いました。

    【お品書き】
  1. 明日も使えないムダ知識
  2. ネイピア数の由来
  3. ネイピア数を求める
  4. 100分の1を100回やってみる
  5. ベルヌーイの螺旋
  6. オイラーの等式

第32回Creators MeetUp「マイナスと借金と、時々、複素平面」(2015.09.12)

マイナス×マイナスはなぜプラスになるのでしょう。小学生に説明しようとしたとき、借金にたとえる人が少なくありません。でも、借金はマイナスでしょうか。虚数単位i×iは-1になります。プラスマイナスの実数軸に虚数軸を組み合わせた複素平面にも少し触れます。

    【お品書き】
  1. 01 マイナス×マイナスはなぜプラスになるのか
  2. 02 借金はマイナスか
  3. 03 マイナスの掛け算は伸縮して180度回す
  4. 04 複素平面
  5. 05 オイラーの等式

その他の記事