refluster's blog

水を触る体験をWebアプリで実現してみました。 http://lab.schememono.net/code/js/062/ 3種類のプリセットを用意しています。個別にスライダを調整して、重力の強さや、水の量、背景画像などを切り替え可能です。 過去に実装した 粒子シミュレーションのアプリ に対し、水の表現と、フリック（ドラッグ）で動かす機能を追加しました。 水の表現は、具体的には、光の反射、屈折をシミュレーションしています。Javascriptでは処理量過多でコマ落ちするため、反射・屈折処理はWebGLを利用しています。

ディープラーニングを使ったサンプルアプリを作りました。 http://lab.schememono.net/code/js/057/ 使い方：スマホで上記URLを開き、枠内に1個の数字を書くだけです。 書いた数字が0～9のいずれの確立が高いか、各々の結果が示されます。学習アルゴリズムの違いを見るために、簡単なsimpleと、少し高度なconvolutionの2種類表示します。 手っ取り早いため、学習データが揃いやすい数字を扱いました。学習の構造は数字に特化してないため、物体認識など応用はやりやすいです。 工夫した点は、tensorflowのチュートリアルを参考に予測部分を改良したのと、Webアプリ化してUIを設置したことです。

VRのコンテンツのサンプルを作ってみました。とりあえず以前作った魚を泳がせてます。 http://lab.schememono.net/code/js/051/ スマートフォンで表示させて、専用ゴーグルでVR体験できます。専用ゴーグルの過去記事はこちら。 http://refluster.blogspot.jp/2015/11/vrdiy.html

友人のアドバイスをもらい、魚と一緒に遊泳する様子を描いてみました。ダイビング時の光景になってますかね。そもそも魚と分かりにくいですが。。リロードすると魚の位置や色が変わります。 http://lab.schememono.net/code/js/049/

アルゴリズムで木などを生成するwebアプリを作ってみました。 http://lab.schememono.net/code/js/047/ アルゴリズムの名称は Bracketed OL-systems と呼ばれます。数式をちょっと変えるだけで色々遊べて、結構おもしろいです。 Bracketed OL-systems: http://algorithmicbotany.org/papers/abop/abop.pdf 1.6.3 節

フラクタルを作ってみました。テキトーに作ればそれなりに綺麗になるかと思ってたけど、そうでもなく。 http://lab.schememono.net/code/js/046/ いくつかパラメタを変更できるようにしてみました。ただ、動作がモッサリしていくので、そのときはリロードしてください。(たぶんメモリリーク。。) フラクタル：ある形状の相似形を再帰的に生成したもの

夏休み中に作っていた写真管理サーバとWebアプリを一通り作り込みました。デジカメで撮った写真を、スマホ操作で保存・閲覧します。 せっかくなので、操作の流れを撮影してみました。なんやかんやで全11テイクかかりました。

写真の取り込み、サムネイル作成、DB登録まで自動化しました。しかし、元々の予定に全然達していない。。 この2日間でやったこと - RPiに外付けHDD認識確認 　→電流不足で使えず、代替案検討中 - 写真ビューアを作成(AngularJS) - 写真サムネイル自動生成(ImageMagick) - データベース登録(sqlite3/node-sqlite3) - nginx + fastcgiのテスト 　http://qiita.com/jey0taka/items/b961110a95d6edc2d870 　→面倒なのでnodeに変更 - nodejsでcgiクエリ取得 　http://stackoverflow.com/questions/6912584/how-to-get-get-query-string-variables-in-express-js-on-node-js ホワイトボードと化した冷蔵庫

写真管理サーバのスマホのI/Fを作りました。写真保存用の外付けHDDが、電流不足によりRPiで利用できず断念。解決策検討中。。 http://lab.schememono.net/code/js/045/

WebRTCでビデオ通話アプリを作りました。Mac PC Windows PC で通信させてみました。(iPhoneはブラウザ未対応とのことで断念) http://lab.schememono.net/code/js/044/ WindowsではUSBカメラ(画面左下のテーブルの上)、Macは標準の付属カメラ(Mac画面の中央上)を使用しています。 左ディスプレイがWindows画面、右がMac画面です。Windows画面には、Windows映像(左)、Mac映像(右)が表示されています。Mac画面には、Mac映像(左)、Windows映像(右)が表示されています。 傘を動している様子が4個の映像で見れますので、Windows - Mac 間で映像が通信されていることが分かります。動画で表れてませんが、音声も通信されていました。分かりにくいデモでごめんなさい。

AngularJS とチュートリアルを参考に、todoアプリを作りました。 http://lab.schememono.net/code/js/043/ 感想 Webアプリで多用するjavascriptの泥臭い実装をAngularJSが肩代りしてくれています。開発が効率的、コード保守性が良いといったメリットがある印象を受けました。

夏休み中の自由研究の計画を決めました（決めたのは昨日）。

Famo.us を使ってみました。 クリックすると次のスライドを描画します。 http://183.181.8.119/test/js/038/ ソースコード https://github.com/refluster/test/tree/master/js/038

「1/fゆらぎ」のシミュレーション http://183.181.8.119/test/js/031/ ソースコードはこちら。 https://github.com/refluster/test/tree/master/js/031

Google Earth APIを試してみました。 (視聴するにはプラグインのインストールが必要です) http://183.181.8.119/test/js/030/ ソースコード https://github.com/refluster/test/tree/master/js/030

流体シミュレーションをJavascriptのcanvasを用いて実装してみた。 http://183.181.8.119/test/js/027/ 流体シミュレーションの手法は複数存在する。今回はJavascriptで動作することを考慮し、計算量の観点で SPH（Smoothing Particle Hydrodynamics）を採用した。SPH は一定量の粒子の集合を点に置き換え、点に働く力(重力、反発力、など)をシミュレーションする。 参考文献 SPH Simulation of River Ice Dynamics https://graphics.ethz.ch/~sobarbar/papers/Sol10b/Sol10b.pdf Interactive SPH Simulation and Rendering on the GPU https://graphics.ethz.ch/~sobarbar/papers/Sol10b/Sol10b.pdf Two-way coupled SPH and particle level set fluid simulation http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.220.8275&rep=rep1&type=pdf Smoothed particle hydrodynamics (SPH): an overview and recent developments http://www.ase.uc.edu/~liugr/Publications/Journal%20Papers/2010/JA_2010_05.pdf

ブレストキャンプということで、Scheme Mono メンバで合宿しました。 USのメンバはskypeで参戦。 場所は京都の宇多野ユースホステルでした。 かなり綺麗なところで、宿泊客も多数いました。 今後の活動の方向性についてブレストしました。 結論は自然とテクノロジーを融合したモノを作りましょうということに。 手始めにサイトを作ってみました。 幼い頃に、しとしとと降り注ぐ雨をじっと見てしまった経験が私にはあります。 この情景をwebで表現してみました。 http://183.181.8.119/test/js/013/ コードはこちら。 https://github.com/refluster/test/tree/master/js/013

Three.js を使って、ブラウザ上で 3D アニメーションを試してみました。 サンプルはこちら。 回転box http://183.181.8.119/test/js/010/ 地球(球とサーフェイス) http://183.181.8.119/test/js/011/ 任意形状(3Dモデルデータの読み込み) http://183.181.8.119/test/js/012/ ソースコードはこちら。 https://github.com/refluster/test/tree/master/js/010 https://github.com/refluster/test/tree/master/js/011 https://github.com/refluster/test/tree/master/js/012