火曜日, 1月 23, 2018

Pointer Pointerの仕組み

Jonathan Puckeyが作ったPointer Pointerというサイトがある。話題になったので見た人も多いと思うが、マウスを置くとそこを指差した写真が表示される作品だ。何となく彼のGithubを見ていたら、voronoi-gridというリポジトリがあり、そこにexampleとしてあのサイトの仕組みがわかるコードがあった。

マウスを置くとそこを指で差す写真が表示される、というのは一見単純でくだらないアイディアのようでいて、どう作るかを考えると途方に暮れてしまう。まず思いつくのは画面を等間隔のグリッドで分割し、それぞれに当てはまる写真を撮影する方法だ。しかし、あの質感も含め、無作為に選ばれたような雰囲気は、なかなか意図して出せないだろう。次に考えるのが検索だが、座標に合った位置を指差している写真を探すのはかなり難しい。クラウドソースでひとつひとつお願いして集めるのは可能かも知れないが、これも労力がかかる。

彼の賢さは、これを写真から出発して作り上げたところにある。直接聞いた訳ではないので推測にしかならないが、ソースコードを読み、フォルダ構成を見ればその思考の流れが分かる。

  1. まず人が指を差している写真を集め、全てのサイズを合わせる。
  2. Photoshopなどでカーソルを指の位置に合わせて座標を特定し、ファイル名の末尾に付け加える。
  3. 次に、それを頼りにX座標、Y座標、画像ファイル名をまとめたJavaScriptオブジェクトの配列としてpoints.jsに記録する。
  4. points.jsからデータを読み出し、X座標とY座標の集合からボロノイ分割を作る。ボロノイ分割は、ある点と点の距離が等しくなる線で領域を分割するアルゴリズムだ。これで「写真の指が差している座標で」分割された領域を作ることができる。
  5. あとはマウスの位置が分割されたどの領域上にあるかを特定し、その母点の座標を元に該当のファイルを読み出して表示する。

さらに素晴らしいのは、点の増減が簡単にできることだ。新たな写真を追加し、座標を特定してファイル名をつけ、points.jsにオブジェクトを書き込むだけ。指がどこを差していようが関係なく、プログラムを変更することもなく、どんどん追加できる。削除する場合は、points.jsからオブジェクトを消せば良い。ある点が削除されたとしても、アルゴリズムによって再度領域が分割され、別の写真が割り当てられるので、マウスを合わせた時の自然さは保たれる。

これが最初に考えたような等間隔のグリッドだとどうだろう?1枚だけ追加するとか、1枚だけ削除することはできず、分割した行や列単位で増減させないといけない。プログラムの修正も必要になる。

アイディア自体の面白さだけでなく、仕組みもエレガントで、本当にすごい。

※ exampleのコードではpoints.jsは使ってなくて、おそらくgetPoints()の内部にコピー&ペーストしているが、保守性を考えるとpoints.jsを使うのが望ましい。

金曜日, 1月 05, 2018

Daily Codingをはじめよう

Zachary LiebermanのInstagramMediumに触発され、2017年は毎日スケッチを書こうとしたが8日分しか書けなかった。

高尾くんの記事John Resigの記事を読み直し、再度やってみようと思い年末から少しずつ準備していた。前回の反省はVanilla JavaScriptでやろうとしたことと、特に目標がなかったこと。それを踏まえて今回はp5.jsを使い、テーマ別に書いていくつもり。

ソースコードは全てGithubに上げているのだけど、Github Pagesでリポジトリからそのままホスティングできるのは非常に便利。

https://hysysk.github.io/dailycoding/

今まで自分がよく書いてきた処理をまとめたり、気になってた表現のアルゴリズムを調べたりして、あれってどうやるんだっけなと思った時にすぐ使えるようにしたい。ライブラリほど作り込まない、スニペットのようなもの…というところまで考えて、アドベントカレンダーに書いたメタ-デザインと繋がることに気付いた。ガイドラインを規則として言葉で定義するのではなく、実行可能なデザインシステムとして思想や手法をコードに落とし込むこと。

手始めに気持ちいい動きを作るべくeasingを調べていたら、flash時代のPenner Easingから洗練されてきた歴史があるという発見があった。それまではパラメータを4つほど渡していたのだが、さまざまな工夫の甲斐あって、0から1までの値を受け取って、何らかの式を通して0から1までの値を返せば良いということになっている。非常にシンプルなので再利用性が高く、他の言語にも簡単に移植できる。その上でどれだけ遊べるかというのは、日々のスケッチで挑戦していくことだ。

ひとまずこれまで書いたものを振り返る。

  • 20171230 とりあえず並べてみた。複数のオブジェクトに異なるアニメーションを適用。
  • 20171231 ローディングアニメーション的な動き。
  • 20180104 複数のアニメーションを続けて実行。定義部分と実行部分を分離できた。
  • 20180105 Tween系ライブラリにあるDelay機能を再現し、エフェクトを作った。

単にスキンを変えてバリエーションを作るのではなく、ロジック面でも変化がないと成長しないと思うので、そこを意識して振り返るようにしたい。

金曜日, 12月 08, 2017

2017年に勉強したこと

直接仕事に関わらない分野で、今年一番時間をかけたのは、数学。コンピュータを使った仕事をしているので、数学を「応用」する機会はあるが、応用ではなく純粋な数学がやりたくなった。高校時代は理系だったが、その後の人生で数学を深く学ぶことはなかった。プログラミングで数式を視覚化したり、幾何学的な図形を作りたいとは常々思っているけど、むしろ視覚化できない図形や空間を操作できる世界に可能性があるんじゃないかと思い始めた。こちら側に持ってくるのではなく、あちら側に飛び込もうという訳だ。

そのきっかけになったのは、高校数学のやり直しでもなく、雑学とも違うちょうどいい読み物を探していて、たまたま手に取った『数学する精神』だった。これを読んで、「自分みたいな人間でも数学をやっていいのだ」と思うことができた。

著者の加藤文元さんのことを調べていたら、新宿の朝日カルチャーセンターでの授業を見つけ、すぐに申し込んだ。カルチャーセンターって完全にノーマークだったけど、メディアで見かける人たちが思想的な講義を持ってたりして、新たな鉱脈を発見した感がある。

MATH POWER 2017」での宇宙際タイヒミューラー理論の解説も聴きに行った(宇宙際タイヒミューラー理論を理解しているのは世界で10人くらいで、加藤先生はその1人だそう)。この講義は観客も超満員で非常に熱気がこもっていて、新しい世界に触れることへの期待と知的興奮に満ちた、とても幸せな場だった。中高生でも分かるように解説するということで、数式もあまりでてこず、感覚的に掴めるようになっている。一部でバズった「たし算とかけ算の関係は複雑すぎてよくわからない!」「映像の中のパズルと現実世界のパズルのピースを合わせるイメージ」が気になった人は当日の動画をご覧いただきたい。とにかく整理されたプレゼンで、語り口も含めてその知性に惚れ惚れする。

いまは月に1回、先述のカルチャーセンターで加藤先生の代数幾何学の授業に出席している。途中で日程変更があり、全ての開講日が月の第4火曜になった際に「規則的になったという意味では、この変更は酷い変更ではないですよね?」と言ってて数学者っぽいと思った。生徒の平均年齢はおそらく60歳を超えているので、趣味としては早過ぎたかも知れない。

代数幾何学の本は「入門」と書かれていても数学科の学部卒くらいの知識が必要なので、うかつに買うと痛い目に遭うらしい。大まかなイメージが掴めて読み物としても楽しめるのは『デカルトの精神と代数幾何』とのこと。絶版なので先日オークションで落とした。そこには「数学の本の読み方(高校生のために)」という短いコラムが掲載されているのだが、「書を閉じてペンをとれ」とあった。

今まで自分は「間違ってもいいからとりあえず考えを進めてみる」ということができなくて、何も書かないか、解答を覚えるという方法でやり過ごしてきた。他の科目ではできてたし、プログラミングでも近いことをしているので、なぜ数学でそれができなかったのか今にしてみれば謎なのだけど、とにかくようやく変な呪縛から解放されて、「数学する」ことができるようになった。そんな2017年。

このpostは 2017 Advent Calendar 2017 第8日目の記事として書かれました。昨日は polygon_planet さんでした。明日は poochin さんです。お楽しみに。