NARITA YUSUKE

ウェブの表現と数学

数学の知識をちょっと使ってウェブの表現を広げてみようよっていうお話し。でも途中から話しの着地点がわからなくなったので、最後にみなさんを褒めて終えておきました。

ウェブがすっかり生活に浸透してスマートフォンとかタブレットをろうにゃくにゃんにょ(噛んだ)が使うようになって久しい。

ウェブの表現力も豊かになって楽しい反面、新たに覚えることも検証する端末も増えて、もしかしてウェブって大変なお仕事かもしれないと気付き始めた人も多いと思う。いや、楽しいけど。

ウェブの表現手法 2015年1月

いまのところ使えるウェブの表現手法(動く系)は、CSS 3 Animation、 SVG、Canvas (2D)、 WebGL とかいろいろある。(それと jQuery の animate() とか?でもそれは使うのやめよう。)

これらを使ってウェブのコンテンツを作るとき、ちょっと数学を取り入れると表現の幅が広がる。というか動きのあるコンテンツなら数学必須。派手に動かさなくても数学を利用する価値はある。

そんなことわかっとるわ!っていう人はブラウザのタブをとっとと閉じて仕事に戻って欲しい。マサカリかついで読むような記事じゃない。

三平方の定理

ピタゴラスの定理

ちょっとかっこよく言うと「ピタゴラスの定理」。これはよく使う。ピタゴラスに感謝!でもピタゴラスが発見した定理かどうかはわからないらしい。

たとえば「ある地点 (x1, y1) からある地点 (x2, y2) までの距離」を求めたりとか。

var distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));

応用で幅広く使われてる定理だ。

こっちの記事↓でも Boids の移動距離を求めるのに使ってる。
コンピュータや人間の意識ではランダムは作れない | NARITA YUSUKE

三角関数

三角関数

これはもっと使う機会が多い。

たとえば「◯度の方向に △px 移動する」とき

var radian = ◯ * Math.PI / 180; // 度をラジアンに変換
x += △ * Math.cos(radian);
y += △ * Math.sin(radian);

とか。基本、ちょー基本。

WebGL を使える環境も増えてきたし三角関数の基本は頭にいれつつ 3D 空間の扱いもちゃんと勉強しとかないとフロントエンドの楽しいお仕事はできない。かもしれない。

ウェブのコンテンツだけじゃなくて、実際に写真を撮るときでも

「あの建物は幅が7メートルだから、ぼくの50mmのレンズ(水平画角40°)で全体を写すには・・・ 7 / 2 / Math.tan((40 / 2) * Math.PI / 180) ・・・約9.62メートル離れたところから撮れば大丈夫。」

とかデートで言えばモテる。

あと、このあたりは Canvas とか WebGL を使わなくても CSS にも有効に使えるからちゃんと抑えておきたい。そうすればこーんなおしゃれ CSS パーティクルも簡単にできちゃう↓

参考: SCSSとCompassでおしゃれなCSSパーティクルを作ってみた – ICS LAB

いやー、数学って便利ー!

数IIの入り口だけでもウェブの演出で役に立つからちゃんと理解しておきたい。

だけど、長い時間集中して考えてると「これをこう動かしたいんだー」って思った時に無理やり数学の難しい定理とかを使って力技で解決しようしちゃいがち。そういう時はちょっと時間をおいて考えると意外に簡単な算数だけでできちゃうこともあるから休憩とか気分転換はとっても大事。

それはさておき

数学を使ってウェブの表現の幅が広がるのは間違いない。けど動きの演出まで考えるのはデザイナーの仕事なんだろうか。プログラマーの仕事なんだろうか。演出家(ウェブで専業の演出家っているのかな)の仕事なんだろうか。

うーん、面倒だから数学的知識もあってデザインセンスと演出センスのあるプログラマーがいればそれでいいや。ていうか広告系のウェブでは全部兼ね揃えてるスーパーな人たちがキラキラしたコンテンツ作ってる。

すごい。みんなすごい。