Entries of javascript

電磁波のスケッチ

電磁波というか磁界的な何かのスケッチ。シェーダーかましてリアルタイムに動くようになったら公開したいところ。

JavaScriptでゴリゴリ実験サイトを作ったよ



fladdict.netのトップをリニューアル。JavaScriptの実験場にしてみた。久しぶりにゴリゴリJS書くと、かなり楽しい。

古き良きゼロ年代のFlash実験サイトはほぼ絶滅してしまったわけだけど、それを現代のJSとHTMLでやり直してみたらどうなるか?そんな感じのスタディ。使用ライブラリはpaper.jsprocessing.js。時間があるときにcreate.jsも導入してみたいけど、ざっと見た感じcreate.jsは冗長すぎてスケッチには向かないと思う。スマホだと重すぎてだと動かないので、時間あるときに分岐するようにしたい。

最近はインターネットも成熟化したのか、グラフィック、インタラクション、プログラミングを三位一体でする人が減ってる気がする。分業化が進んでいるのだろう。インタラクション系がわかるエンジニアは需要があるわりに、新しい人が学ぶ機会が昔にくらべれば激減しているのではないかと思う。

こういうインタラクション系の実験は、実際に商用サイトに使うにはハイスペックすぎたり、ブラウザを選ぶ。ただこういった実験の本質は、単純に表現や技術を案件にいかせるかではない。むしろスケッチを通じて、適切な表現や動きを即座にコードに落とし込める力や目を養うことではないかと思う。

とりあえず、社内の若いエンジニアとデザイナに「どっち志望でも、2年ぐらいでこういうの出来るようになろう」というプレッシャーをかけたい。オフィスには厳選した教本、先人のコードとノウハウ、僕や北田さん、奥田さんみたいにレビューやフィードバックできる人間もいる。必要なものは全部そろった。これで出来るようにならなければ、あとは本人の問題のはず。

ヴィジュアルコーディング系に興味ある学生とかは、THE GUILDに遊びにとかインターンにくるといいよ。



いかもろもろ。新機軸というよりは、まずはJSを思い出すために書いたスケッチ系。


自力物理エンジンとスプリングで動く疑似クリーチャー。テオヤンセンラブ。昔、soda playという伝説のサイトがありまして的リバイバル。


実は人生で初ボロノイ。サイトリニューアルを期にボロノイ童貞を脱してみました的なスケッチ。


平面充塞のスケッチ。以外とカワイイので気に入ってる。


平面充塞の改良。最初に面積の総和を事前計算してから、nが∞になるΣで漸近していくと画面が溢れないって知った。


ぽよんぽよんしたくなったスケッチ。サバ男ではなく、シャボンと読む。


群衆プログラム的ななにか。以前つくったAmebaもそうだけど、最近のJSは群衆系とかまでで動くぐらいパワフルになったというのは感慨深い。

ビジュアルコーディングと波形

今日のスケッチ。
色々モニョっとしたモノを作るにあたって、とりあえず波形ライブラリを作るなど。色んな波形を合成して使える奴。

JSでアメーバのシミュレーション作ってみた (高速化編)

先日のJSアメーバのコードを、ブラッシュアップして超高速化してみた
ぬるぬる動いて、2〜3分後には自走して弱小アメーバを襲い始めるよ。

JSで蝶を飛ばしてみるなど

今日のスケッチ蝶蝶がいっぱい
processing.js だいたい理解した。

蝶の群れだけど、boidというよりは、perlin noiseによるフォースフィールドの復習。
定番ですがperlin noiseで作った雲状bitpmapのR値とG値を、XY方向の気流の力として適用する・・・ってアレです。
リハビリリハビリ。

JSでアメーバのシミュレーション作ってみた


jsでアメーバのシミュレーションを作ってみるなど。ブラウザで5分ほど放置しておくと自然淘汰でなんか生まれます。要HTML5環境(iPhoneだと重すぎる)。

スケッチの製作環境を、Flashからprocesing.jsに移動しようかなぁというテスト。「x‐DESIGN――未来をプロトタイピングするために」の一章を読んだら、なんか無性になにかを作りたくなったので、作ってみた。

HTMLで文字詰めするタイポグラフィー用JS

HTMLのテキストに対して、文字詰めを行えるスクリプト FLAutoKerningクラスを作ってみた。サンプルはこちらzipも

スクリプト内に任意のカーニングペアを定義することによって、ブログのタイトル等のテキストに字詰めを行ってくれるスクリプトです。なんか探しても見つからなかったので自分でやってみた。いちおう朗文堂の新宿私塾に行ったわけだし、僕もなんか成果物作らんとなぁ。。。的に。

実行はとても簡単。jQueryと一緒にhtmlにロードして、

FLAutoKerning.process($(‘h1′));
FLAutoKerning.process($(‘h2′));
FLAutoKerning.process($(‘h3′));

といった具合に、適用したhtml要素を一括していしてやるだけ。カーニング情報の定義も、FLAutoKerningクラスの頭に、下のようにem単位で定義するだけ。
これがあれば、行頭に括弧がこようが、トッキョキョカキョクが来ようが、もう何も怖くない。

iPhoneで青空文庫を読むブックマークレット

iPhoneで読めるデジタルブックがクソばっかなので、青空文庫を読むことにした。毎日3時間電車にゆられている僕にとって、電車の時間の有効活用は最優先事項なのである。

さすがにiPhoneでそのまま読むと読みにくいので、小説のページをiPhone用にジャストフィットさせるブックマークレットを作ってみた。青空文庫のXHTML作品ページで起動すればOK。

ブックマークレット

iPhoneへのブックマークレットの登録は、IEかsafariに登録してiTunesでシンクすることでできます。 しかしiPhoneで気が向いた時に世界の名作が読めるのは大変便利。 時間あるとき青空をスクレイピングして、iPhone文庫とか専用サイト作ってみたいなぁ。

ScriptGrapher

ニコニコでの実験が色々終わったので、次はScriptGrapherにでも挑戦してみようかと思う。

ScriptGrapherはイラレで、GenerativeArtを作るための拡張プラグイン。これを入れれば、JavaScriptでインタラクティブなペンツールやフィルタをオリジナルに作ることができる。

日本語CS環境だとインスコ失敗するのだけど、ProgramFiles以下のイラレのプラグインフォルダのかわりに、DocumentAndSetting以下のIllustratorの設定フォルダになるPlug-insフォルダに突っ込むと無事動くことを発見。

パーソナルではしばらくFlashよりも、これをイジって遊ぶ予定。

亜ジャックスのススメ

現実的な開発に即したAJAX

もうさ、(広義での)Ajaxの代替技術としてさ、フレームっていう技術を採用するってどうだろう?

枯れた技術だし、表示変えてもURL変わらないし、グーグル・アンフレンドリーだし、ブックマークしにくいし、HTMLよりちょっとハイテクっぽいし、Ajaxの特性を全てサポートしてね???

むしろ、フレームよりAjaxが優れてる点ってほとんどなくね??

フレームは、ブラウザ間の挙動安定してるし、「戻る」サポートしてるし、人材も育成しやすいし、開発期間も予算も低いっぽいし、これは絶対流行ると思う。