動くサイトの謎を解く!中学の数学で作れるってホント? 【プロに学ぶ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

共有する

関連記事

【気になるトレンド用語】増えるネット依存、子どもの闇の顔″学校裏サイト″って何だ?

インターネットが生活のさまざまなところに行き渡り、今や大人だけでなく、子どものインターネット利用も当たり前となっています。世界中にある膨大な知識に簡単に触れられることは、子どもたちにとって有意義な一方で、いくつもの弊害…

【気になるトレンド用語】″学校裏サイト″の次に危険なのはコレ?″プロフ″に潜む甘い罠と危険!

■プロフって何だろうプロフとは、"プロフィール"を略した言葉で、携帯サイト上に自己紹介ページを作成できるサービスの総称です。あらかじめ用意された数十の質問項目から、公表したいものを答えていくだけで、簡単かつ短時間に自分のプ…

【知っ得!虎の巻】Web達人になれるオートコンプリートってなに? 入力お助け機能で楽々ネット生活

Webページの利用で最も活用するものの1つは、検索ページではないだろうか。検索サイトでキーワードを入力し、目的のものを探す機会は多いだろう。そのほか、Webサービスの会員登録時に必要項目を入力するなど、文字を入力する機会は多い…

【気になるトレンド用語】WebページはFlashだらけ!Flashってなんだ

インターネットでWebページを閲覧していているとアニメーションや動きのある表示ページが随分増えてきました。ほとんどの大手企業のページは、Flashアニメーションであふれかえっているといっても過言ではないでしょう。そのぶん「Flash…

【知っ得!虎の巻】時計表示を午前/午後で表示したい

時間を知りたい時、PCのタスクバーの時計で確認している人は多いだろう。PCの時計は、インターネットで定期的に時間を合わせているので正確な時間を知るのに重宝する。タスクバーに表示されている時計は通常24時間の表示となっているが…