行列でアニメーション

動きの設定

%段階
変換後の x
変換後の y
=
x
y
+
{{chara}}
{{chara}}

並べ直しました

現在の動きを URL にセットしました
  • ブラウザの「リロード」「進む」「戻る」ボタンなどでこの動きに戻れます
  • URL をブックマークなどに保存しておけば, 後日この動きを再生できます → 例

    • 結果

    {{chara}}

    FAQ

    これは何？

    線形代数の教材（兼 CSS アニメーション生成ツール）です. 行列は単なる「数字の表」ではありません. 2×2 行列には, 平面上の変換という意味があります. アニメーションを作りながらこの変換を観察して, 行列に親しんでください.

    まず何をすればいい？

    たとえば, 上の「動きの設定」の 2 段目, 「80%段階」の行列中の数値「0.5」を「-2」に変えて, 動きがどう変わるか確認しましょう. もっと他も変えてみると？

    気にいった動きができたら？

    「この動きをキープ」ボタンを押しておけば, 後からブラウザの「戻る」ボタンなどでその動きに戻れます.

    「この動きをキープ」ボタンを押したのにリロードしたら文字が初期値に戻ってしまう？

    仕様です. 文字や画像は保持されません.

    変形するのはわかったけど, だから何？

    この変形ぐあいをよく観察すると, 線形代数のいろいろな話が直観的に納得できます. GIFアニメで見る線形代数（改良版）を参照.

    なんのこっちゃ？

    『プログラミングのための線形代数』を参照.

    自分が習ったのと違うみたい？

    「y 座標は上向き」「変換は行列かける縦ベクトル」としています. CSS の解説などと混乱しないでください.

    おもしろい動きのサンプルはありませんか？

    たとえばAnimate.cssを参照.

    CSS アニメーション

    上で作った動きを CSS アニメーションにできます. たとえば「ほげ」という文字を動かしたければ……

    chotto.html 

    <!DOCTYPE HTML>
<html>
<head>
 <meta charset="UTF-8" />
 <link rel="stylesheet" href="chotto.css" />
</head>
<body>
 <div class="my-animation" style="display: inline-block;">ほげ</div>
</body>
</html>

    chotto.css

    アニメーション名 
    {{css}}

    更新履歴（抄）