動くサイトの謎を解く!中学の数学で作れるってホント? 【プロに学ぶ67WS通信】
先週の日曜日はSt.バレンタインデー。某チョコレートメーカーのWebサイトでは雪が降ったり、ストアサイトでは、世界のチョコレートがぐるぐるローテーション円陣を組んだり、ネットでの盛り上げも相当なものでした。
女子として、私も下調べをしていているうち、面白いアイディアのサイトのしくみに気を取られていました。
なかには、Flashアニメーションで、グラマラスな女性の写真をマウスで引っ張ると「ぶょーん」と延びたり縮んだりする、ちょっと恥ずかしくなるようなサイトもありました(笑)。
■動くサイトの謎を解く!
このような動きのあるサイトは、どれもしくみが難しそうに見えますが、ロクナナワークショップ講師の古堅先生によると、理屈さえわかれば、そう難しくもない表現だとか。
そこで、今日は、「この表現、どんなしくみで動いているの?」といった、素朴な疑問の回答を、ご紹介したいと思います。
質問に答えてくれるのは、ロクナナワークショップで、インタラクティブな動きのデザインの構造・しくみについての講座をご担当いただいている古堅先生です。
![]() |
3Dに回転するデジタル時計 |
■「3Dに回転するデジタル時計」
佐々木:オシャレなサイトで見かけそうな時計ですね。実際どんなしくみで動いているのですか?
古堅先生:ここでつかっているのは、サインコサインタンジェントです。「うわっ!数学?!」という人もいるかもしれませんが、確か中学生ぐらいですよね?習うの。
中学生のころは「なんのこっちゃ?」だった人も多いと思いますが、大人になってよくよく式を見たら、びっくりするぐらい簡単なことに気づきます。
このサンプルでは、簡単な式をつかってそれぞれの数字の角度を計算します。それに、サインコサインタンジェントすると、勝手に丸く並びます。
また、この時計は3次元ですよね。これも「えっ?3D?自分で計算するの?!」と思うでしょ。実は、3次元に見せるための式があり、「かけ算」と「割り算」1つずつで表現できるんです。式を見たら簡単すぎてびっくりしますよ。
![]() |
避ける、、、避けられる、、、 |
■「避ける、、、避けられる、、、」
佐々木:なんだか気持ち悪いですね。マウスを動かすと、それを避けるように玉がぶよぶよ動きます。いったいどんなしくみで動いているのですか?
古堅先生:これも、一瞬、「複雑だなぁ」と思うかもしれません。が、一個一個を分けて見てください。それぞれは単純にマウスを「避けて」動いてるだけでしょう。
全部の玉が、単純に「避ける」という同じ動きを行い、数が増えることで「複雑」に見えます。ま、トリックです。
この「避ける」動きを表現しているのが「物理法則」なんです。これも、「うわっ、物理!?」と思うかもしれません。だけど、式自体はとても簡単です。
基本的に+ー×÷の四則演算だけだし、普段の皆さんの生活で、早く行きたければ、早く歩きますよね?その考えを式にしたものなので、ちょっと覗いてみるとすぐに理屈がわかります。普段の生活にある理屈を表しただけの、とてもシンプルな式です。
■中学校では大事なこと勉強してたんだ!
佐々木:必要になってはじめて気づくんですが、中学時代の基礎は重要なんですね。基礎を理解して、それをもとにいかにアイデアや発想につなげるかがポイントとなるんでしょう。
まあ、もちろんサイトを作るためには、難しいプログラムを勉強するというハードルもあるんですが。
これから、Webで動きのあるサイトとか、インターラクディブなデザインを作ってみたいクリエイタさんは、中学の教科書を出してくるのもありなのではないでしょうか。
そんな古堅先生の「ActionScript 3.0によるインタラクティブデザイン講座」は、ロクナナワークショップで毎月開講しています。
講座では、古堅先生の書籍「Flash Math & Physics Design:ActionScript 3.0による数学・物理学表現[入門編]」をテキストに使用します。
今回例としてあげたようなサンプルをもとに、ActionScript 3.0と基本的な物理法則や数学的な公式をつかって、どんな表現ができるか実際に実習していきます。詳しくは講座詳細ページを見て下さい。
■関連リンク
・ロクナナワークショップ
・古堅真彦
・古堅真彦のActionScript 3.0によるインタラクティブデザイン講座
・Flash Math & Physics Design:ActionScript 3.0による数学・物理学表現[入門編]
・FuRuKaTics
■【プロに学ぶ67WS通信】の記事をもっとみる
・出来る人はオフィス不要!クラウドワークスタイル
・iPadで書籍革命!コメント付きデジタル本もあり?
・不況を乗り切れ、異業種からWeb業界へ!Web基礎知識入門
・知らなきゃ損する!3D映画の上映方法の違い
■ITライフハック Twitter