火曜日, 12月 11, 2018

2017と比べて2018はどれだけベストだったか

とにもかくにも数学

去年唐突に始まった数学熱は今年も冷めず、というか分からないことだらけで数ページ読んでは本を閉じる、を繰り返してたらいつの間にか1年経っていたというのが正直なところ。代数幾何学の講座は終わり、今はガロア理論の講座を受けている。それとは別に個別指導の塾や、機械学習の数学的な解説の授業、数学ゼミなど、数学にかなりの時間とお金を費やした。

それで何か目に見える成果が得られたのかというと、全くない。そういう視点からすると、とにかくコスパが悪い。が、ここまでコスパが悪いものもそうそうなく、時間を潰すという意味では逆にコスパが良いとも言える。延々悩み続けられる、全く消費されないコンテンツなのだ。

こんなに面白いのだから、誰かもっと早くに教えてくれれば良かったのに、と思うけれども、面白すぎて、他のことが手に付かなくなってしまう。数学を志す人間が心を病んでしまう話はよく耳にするが、それもちょっと分かる気がする。高校までで習っていた数学は氷山の一角に過ぎない。

今まで何度か数学を勉強し直そうとして挫折してたのは、単純に高校のやり直しをしようとしていたからだ。大学数学は全然飽きない。高校数学であんなに難しかったんだから、大学数学なんてできる訳ないんじゃないの、と思ってしまうが、全く歯が立たないということはなく、導入部分であれば中学校の知識でも理解できる。プログラミングの学び方と同じで、必要になった時に遡れば良い。ハンズオン形式のチュートリアルと同じように、証明や式の流れを写経して理解できることも多い。

ここまで夢中になったのは、個別指導でベクトル空間について解説してもらい、高校で習った「向き」と「大きさ」だけじゃない、もっと抽象的なものの集まりを教わったのがきっかけだと思う。さらに演算も、足したり引いたり掛けたり割ったりだけじゃなくて、「あみだくじを繋げる」とか「立方体を回転させる」とかも含んでいて、学生時代に勉強していたアルゴリズム作曲などにうまく接続できそうな予感がした。

数じゃないものを扱ったり、四則以外の演算も数学として扱うということは、個人的には便器がアートになったくらいの衝撃だった。その衝撃を思い出させてくれる解説がYouTubeで公開されているので、観て欲しい。

【代数学】群がどうしても分からない君へ(群論超入門)【特別講義】

数学イベントや大人向け数学塾、カルチャーセンターの充実だけでなく、このような動画も沢山公開されていて、とにかく今年は数学を学ぶのにベストな年となった。教育系YouTuberと呼ばれる人達の中には「ビッグになりたいから」数学の分かりやすい解説を作り続けている人もいて、全く意味が分からないけど感謝しかないしビッグになって欲しい。数学書を買うためにメルカリやヤフオク!を使い始めた(売るような人なので状態が良い)り、仕事で神保町へ行く機会が増えたりした結果、明倫館書店や書泉グランデなどの鉱脈も見つけた。完全に趣味なので、できなくても怒られないし、自分のペースで続けていきたい。

このエントリは 2018 Advent Calendar 2018 の11日目の記事として書かれました。昨日はlesson5さん、明日はxKxAxKxさんです。

水曜日, 5月 09, 2018

AndroidのVrVideoViewで大きな動画ファイルを再生したい時

展示用にVR動画を再生するアプリを作っていた。Android開発は初めてだったがストア配布しないしサンプルあるし楽勝と考えていたら、はまった。loadVideoFromAsset()は大きなファイルの場合ヒープエラーになる。メモリに全部入れてるのだろうか?

そもそもストア配布するAPKには100MBの制限があるので、大きなファイルを再生することは想定してなさそう。拡張ファイルを使う方法があるみたいだけど、今回はコンピュータから直接動画とアプリを入れられれば良い。という訳でloadVideo()を使う。

Android File Transferで端末のDOWNLOADSフォルダ以下に動画を置き、

File file = new File(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DOWNLOADS), "MOVIEFILENAME.mp4");
Uri fileUri = Uri.fromFile(file);

とする。loadVideoFromAsset()はassets以下に置いたファイル名を指定すれば良かったが、loadVideo()にはファイルのUriオブジェクトを渡す。

木曜日, 3月 01, 2018

Link list 2018-02

クレー以後のアメリカのアーティスト10人

http://www.phillipscollection.org/events/2018-02-03-exhibition-after-klee

Artsyのクレーのページ

https://www.artsy.net/artist/paul-klee

造形思考

http://www.webchikuma.jp/articles/-/148

バウハウスのメソッドやクレーの考えをプログラミングに応用できないか調べている

1989年から今日までのネット時代のアート

http://www.e-flux.com/announcements/145758/art-in-the-age-of-the-internet-1989-to-today/

ハロー・ワールド ポスト・ヒューマン時代に向けて

http://www.arttowermito.or.jp/gallery/gallery02.html?id=471

ラファエル・ローゼンダール:ジェネロシティ 寛容さの美学

http://towadaartcenter.com/exhibitions/rafael-rozendaal-generosity/

NTTヒューマンインタフェース研究所

http://www.ntticc.or.jp/ja/archive/participants/ntt-human-interface-labs/
Daily CodingのためにNon-Photorealistic Computer Graphicsを読んでいたら、この分野の初期に影響力のある論文を書いた人がここの人だった

NTT インターコミュニケーション’95「on the Web —ネットワークの中のミュージアム—」

http://www.ntticc.or.jp/ja/feature/1995/The_Museum_Inside_The_Network/index-j.html
スマートスピーカーとかIoTという言葉がなかった時代のグローバル・インテリア・プロジェクト #1

古堅先生の論文

http://www.furukatics.com/papers.html

火曜日, 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機能を再現し、エフェクトを作った。

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