Washroom of the day project / 今日のトイレ

トイレのサインが好きで、1年半ほど前から面白いものを見つけると iPhone で撮って Instagram にアップしています。今日はそのことについて書きたいと思います。

きっかけ

旅行に行くと変わったトイレに出会うので昔からトイレに行くのが好きだったのですが、他人のおしりが並んで見えるトイレや前の人のうんこが流れてくるトイレなどに出会う機会も最近では無く、トイレに対する熱意が薄れていた頃にこんなトイレのサインに出会いました。

見慣れた男女のサインと少し異なり、左は足が三本あるようにも見えるし、右は男性がスカートを履いているようにも見え男性用、女性用という分け方でもなくそもそも1枚です。これを見たのは Western Front というアートセンターなのですが、同性婚が認められていたり多彩な出自を持つ人々が集まるバンクーバーを象徴するものではないかと興味を持ちました。それまであまりトイレのサインを気にしたことは無かったのですが、これがきっかけで初めての場所に行ったら必ずトイレのサインを確認しに行くことにしています。Vancouver では東京のように駅やコンビニでトイレが使えないので行ける時に行っとかないかんという面もありますが。

予断ですがプロジェクトと聞くと「ごめんな、このプロジェクトが終わったら時間取れるから」「あなたっていつもそう」なんて会話が聞こえてきそうですが、友人に「お前のトイレの写真なかなかいいじゃん。このプロジェクトいつから始めたの?」と聞かれたのでなるほどこれはプロジェクトなのかと納得しこの一連のトイレ写真をタイトルにあるように「Washroom of the day Project / 今日のトイレ」と呼んでいます。ちなみにトイレのことをイギリスでは toilet、アメリカでは bathroom、カナダでは washroom などと言います。

今日のトイレたち

以下、出会ったトイレの一例を紹介していきます。

新宿 Flags。サーファーなおっさんのイラストでお店のテイストが感じられます。

Vancouver の刀削麺で有名な中華料理屋さん。パコる方って言葉を思い出しました。

Toronto のタイ料理屋さん。割とよく見るおしっこ我慢してる系サインを初めてここで見ました。暗くて見えないですが女子ももらしそうになっています。適当に入ったのですが料理も雰囲気もとても好かったです。

Seattle の Pike Market。赤ちゃんのおむつ替えか家族総出でてんやわんやです。

これも Seattle の Pike Market。モザイクでピクトグラムと文字を表紙しています。染色体の xy がナイス。

カナダとアメリカの国境にありました。世界を股にかけるデキる男感ありますね。

Vancouver のスペイン料理屋さん。この幻想的なランタンの先にトイレがあるとはとても思えません。

Vancouver で最初に出来たイタリアンカフェだそうです。このダビデ像の他、店内にはローマの彫刻やら鎧やら置いてあってゴテゴテして楽しいです。

岩手の結婚式場。シャアが青いのが少し不思議なものの日本人のガンダム好きがここにも。

Vancouver の空港。モザイクのタイルが綺麗ですね〜。

Vancouver から近いスキーリゾート。普通の部屋みたいなトイレですね。

Vancouver の飲み屋のトイレ。男性用なのにマリリンモンローです。

トイレくんは Vancouver の肉屋さんにいました。ここのサンドウィッチはなかなか美味しいです。

Vancouver のメキシコ料理屋さん。女の子がお尻を触られています。店長のおっさんが日本語で下ネタを耳元で囁いて来たので、おっさんの性格が出ているかのようです。

Vancouver のカフェのトイレ。我慢してる系。

番外編。札幌の駅で見つけた泌尿器科の看板。トイレじゃないけど表情にヤラれました。

プロジェクト進捗

トイレのサインも内装の一部なので、面白いサインは個性的なお店にあることが多く、友達の家に行って本棚とCD、レコード棚を見るような感覚でトイレに行っています。しかしながらきっかけとなった Western Front を越えるインパクトを持つものが無く、それに出会えるまでは細々と続けたいなと思っています。また、こんな写真ばかり撮っていたら友達がトイレのサインの写真を送ってくれることもあり、今までニカラグア、タイ、台湾から写真を送ってもらいました。「あんまりあんたがトイレの写真ばっかりあげるからトイレを気にして見るようになったよー」という声もあって楽しい限りです。

トイレじゃなくたっていい

トイレのサインが面白いと思えたのは俺が海外にいるからかもしれないですが、当たり前のようにあるものに注目して観察を続けていくと、似たようなものの中でも傾向や特徴が見えてきて新たな発見があるかもしれません。Vancouver は雨ばかり降っているのでイルな気分に持っていかれて自殺防止ライトが必要になったりしてしまいがちですが、小さいことでも面白がれると人生より楽しくなるんじゃないかなーと思っている次第です。

面白いトイレの話などありましたら Twitter とかで教えてください。

WebGLで遊ぼう!コードを書かなくてもわりと楽しめるオンラインエディタまとめ

Graphical Web Advent Calendar 2013 – Adventar 24日目の記事です。

オンラインでコードを書いて実行できるエディタは沢山あります。例えば JavaScript、CSS、HTML を書けるものだと jsdo.itJS BinJSFiddleCodePen などが有名だと思いますが、今日は WebGL が楽しくなる愉快なオンラインエディタたちをご紹介したいと思います。

ここ2、3ヶ月 three.js を使って WebGL で遊んでいる( chimana.co )のですが、WebGL を使うには何かと準備が必要なため俺みたいな根性無しは three.js のような便利ライブラリを使ったとしても分かりやすく気持ちイイところに辿り着く前にめげてしまいかねません。今日ご紹介するエディタたちは WebGL 興味あるけど何したらいいか分からへんという方でも GUI のパラメータを変更したり数値を少し変えるだけで劇的に変化を起こすこともできるし、見ているだけでも十分楽しめるものも多いので取っ掛かりとして最適だと思います。とっつきにくい初期設定などについて考えるのは楽しくなっちゃってもっと深く勉強してみたいと思えた後でも遅くありません。

以下、リンク先のサイトを参照する場合は WebGL をサポートしているブラウザを使用してください。IE11 でも WebGL をサポートし始めたようですが信用していないので、最新の Chrome か Firefox 推奨です。

WebGL & three.js ことはじめ

1. _playGnd

http://threejsplaygnd.brangerbriz.net/

_playGnd-1

WebGL で3Dやってみたいけど3Dの世界を構築するのって色々面倒くさいんでしょって人向けです。three.js に予め実装されている幾可学形状を用いて three.js の基本的な機能を試すことができます。3Dに関しては Flash で Papervision3d を少し齧った程度だった俺はこれのおかげで three.js を続けることができました。今でも折に触れこれを使って機能を確認しています。

_playGnd-2

GUI で幾可学形状をカスタムして生成されたコードを editor にコピペして表示の確認ができます。アニメーションもスニペットとして用意されているので、これもコピペで実装できます。ちょっと見難いですが archive でこのアプリを使用して作られたギャラリーを見ることもできます。以下は The Creators Project での紹介動画です。

three.js wiki を参考にしながら _playGnd で動かしてみるのが一番分かりやすい three.js の始め方だと今のところ思っています。

ジェネレーター

2. GEO Editor

http://marcinignac.com/projects/geo-editor/

three.js でデフォルトで用意されているものより複雑な幾何学形状を GUI を使って作ることができます。obj データとして出力できるので生成したものを 3D ソフトに取り込むことができます(three.js でも使えます)。触っているとこんな感じ↓のができます。

geo-1

Box でも話題のインタラクティブアーティスト GMUNK さんがこのアプリを使用して生成したオブジェクトを MAYA で加工したシリーズを残しています。以下の動画で作成の過程を見ることができます。

3. InParticular

http://lawriecape.co.uk/threejs/

inparticular-1

WebGL versionWebGL ShaderLab version がおすすめです。生成したイメージを画像として保存することができます。パラメータを弄るだけで多彩なビジュアルを作り出せるという好例。CLEAR DOWN でイメージを消去、REDRAW TO THESE でイメージを生成します。消去せずに REDRAW すると塗り重ねられるので、また違ったイメージが生成できるかもしれません。RANDOMISE と RANDOMISE SHADERS をポチポチ押していくだけでも十分楽しめます。Flickr に作者の方が生成したイメージがアップされています。
InParticular – Three JS WebGL test – a set on Flickr

余談ですが、これを見つける前に俺もこういうジェネレータ作りたいと思って作ったのが Sphere Particles | WebGL Experiments です。ディティールが甘く今イチ拡張性の高くないものができてしまいました。精進したいものです。

4. sparkseditor

http://jeromeetienne.github.io/sparkseditor/

プログラミングでアニメーションと言ったらとりあえずパーティクルという人もおられると思います。これは sparks.js というパーティクル作成用のライブラリを使ったエディタで、数値を変えることでメガ粒子砲のようなものから火炎放射器のようなのまで作ることができます。適当に弄ってみるとこんなの↓が作れます。

sparks

以下は解説動画です。

パーティクルエディタなら探せば色々ありそうですね。こんな機能を使っていずれ鼻血ブーシミュレータを作りたいなーと考えています。

シェーダー(GLSL)

WebGL では全ての描画にシェーダー (vertex shader, fragment shader) が必要となります。three.js に用意されているものだけでも幅広い表現は可能ですが、より凝った表現をしたり最適化が必要になったりすると、自らシェーダーを書くことは避けられません。World Wide Maze では CPU が物理演算でビジーになりがちなので、CPU (JavaScript) で書くほうが簡単な処理でも、極力シェーダー (GLSL) で書くことで、GPU を使うようにしました。海の波の表現はもちろん、ボールが登場するときのメッシュや、ゴールの花火もほぼシェーダーで表現されています。

さくーしゃさんも仰っておられるように、シェーダーを自分でガリガリ書いていくことが WebGL の一番美味しいところと心得ました。シェーダーは ProcessingopenFrameworks、Objective-C でも使えるということなのでここで覚えておくと可能性は広がりますね。Instagram のフィルターもシェーダーで実装されているそうです。シェーダーって何やねんって方は WebGLの能力を引き出すプログラマブルシェーダー (1/5)が参考になるかもしれません。

5. GLSL Sandbox

http://glslsandbox.com/

GLSL Sandbox Gallery

俺は参考として紹介したサイトを一読しただけではさっぱり分からなかったし、この手のプログラミング経験の無い方にはいきなりシェーダーを書くのって結構大変だと思いますので、まずは作例に触れてみましょう。このサイトは更新頻度も高く作品数が多い(軽く触っただけで保存されちゃったようなものも多いけど)ので、暫くこのサイトを見て過ごせると思います。俺は初めてこのサイトを見つけた時は楽しすぎて次から次へとずーーーーっと何時間も見続けたためゲロ吐きそうになりました。iTunes のビジュアライザが好き人なんかはかなり面白いのではないでしょうか?慣れてきたら既存のコードをカスタムしたり新しく自分のシェーダーを作ったりしてみましょう。

以下にお気に入りをいくつか(趣味が偏っていますご了承ください)。

http://glslsandbox.com/e#12897.0

GLSL Sandbox-8

http://glslsandbox.com/e#12456.0

GLSL Sandbox-4

http://glslsandbox.com/e#7140.6

GLSL Sandbox-5

http://glslsandbox.com/e#10591.0

GLSL Sandbox-7

http://glslsandbox.com/e#12054.0

GLSL Sandbox-9

6. Shadertoy

https://www.shadertoy.com/

Shadertoy BETA-1

これも見ているだけでも最高に楽しい系。ただ最近のマシンじゃないと見るのしんどいかもしれません。俺の MacBook Late 2008 だと時々フリーズしちゃいます…。シェーダーの入力パラメータとして音、映像,マウス座標,Web カメラなども利用できかなり凝った作品が作れるため、凄腕アーティストたちが圧倒的クオリティの作品をアップしています。

YouTube にも ShaderToy のみで作成された映像がアップされています。

お気に入りをいくつか。マシンによっては表示が遅くなるかもしれないので注意です。

Buoy

Buoy-1

Flame

Flame

Main Sequence Star

Main Sequence Star-1

参考:[SIGGRAPH]リアルタイムレンダリングの最先端が集結するイベント「Real-time Live!」レポート(前編) – 4Gamer.net

7. Pixel Shaders

http://pixelshaders.com/

pixel-shaders

使えるサンプル多数!自分でシェーダーを書いてみたくなったあなた、入門用に最適なサイトです。ちょっとしたエフェクトの作り方が紹介されています。↓のようなウェブカメラを利用したサンプルも面白いので色々弄ってみましょう。

pixel-shaders-examples

8. Yet.Another.Shader.Editor.

http://yase.chnk.us/

yase

シェーダーを使用したパーティクルジェネレーター。こういう風に自分仕様のエディタ作ってリアルタイムコーディングやるのいいなぁ。以下は作者の Ryan Alexander さんのプレゼン。このエディタを使って生成した作品も紹介されています。

グラフィカルプログラミング

9. ThreeNodes.js

http://idflood.github.io/ThreeNodes.js/

three-node-editor

これも面白そう、なんだけどグラフィカルプログラミングは MaxPure Data を少し齧った程度なので使い方わかんない…。Pure Data 慣れたら帰ってきます。上が編集画面で、下が再生画面。

three-node-player

開発ツール

10. Shader Editor – Firefox Developer Tools

https://developer.mozilla.org/en-US/docs/Tools/Shader_Editor

ff-shader-editor

Firefox 27 からの新機能。ブラウザでシェーダーがデバッグできるようになりました。普段 grunt を使ってコードを修正するとブラウザが更新されるようにして作業しているのですが、これも便利ですね。2013年12月25日現在、Firefox Nightly Buildsからダウンロードした Aurora で利用できます。以下は解説動画です。

VJ やりたい

11. Sliider

http://www.udart.dk/2013/11/01/introducing-sliider-vjing-with-a-web-browser/

slider

オンラインエディタとは言えないのですが、来年は WebGL で VJ やるでーと思ってうろうろしていたら Mac の VJ 用アプリを見つけました。ウェブサイトをミックスできてデモを見る限り自分のやりたいことはある程度できてしまいそう。プレビュー版ではクロスフェーダーなどのコントロールがまだできないみたいです(OS10.8.5で試用)が、期待期待。以下は紹介動画です。

その他

他にも色々あります。殆ど使ったことが無いのですが軽く紹介していきます。

12. WebGL playground

http://webglplayground.net/

こちらもシェーダーエディタ。

13. Shdr Editor

http://shdr.bkcore.com/

他のシェーダーエディタは fragment shader のみ対応しているものが多いですが、3D モデルに対して fragment shader も vertex shader も両方書くことができます。

14. Kick.js | Shader editor | Particle shader

http://www.kickjs.org/example/shader_editor/shader_editor.html

WebGL ライブラリ kick.js のエディタ。

15. RADIATOR

http://radiator.ahoi.in/

電波ビジュアライゼーションジェネレータ。

16. Frame.js

http://mrdoob.github.io/frame.js/editor/

Mr.Doob 氏の three.js リアルタイムタイムライン式エディタ。超楽しそう、なんだけど使い方がよく分からん…。

以上です。眺めているだけでもちょっと数値を変えるだけでも十分楽しくないですか?基礎から始められるに越したことはないですが続かなくては元も子も無いので、まずは楽しければ全て好しだと思っています。他にもおすすめのエディタなどありましたら Twitter とかで教えて頂けると嬉しいです。Happy WebGL!

Update: 2013/12/26
three.js r64 リリースに伴い本家からエディタが出ていることにこれ書いた後に気づきました!
http://threejs.org/editor/