JavaScript

ChromeウェブアプリでIRCクライアント作ってみた

Google I/Oで発表されたChrome拡張の機能追加で一見するとネイティブアプリっぽく見えるChrome拡張を作れるようになりました。分かりやすく言えばAdobe AIRのChrome版みたいな。結構よさそうな気がするけど、実際どんなもんかなと思ったので試しにIRCクライ…

HTML5巨乳の作り方

あんまり新しいこともやってないんだけど、一応HTML5巨乳の作り方メモ。主だった部分はこちら。http://html5kyonyu.appspot.com/js/html5_kyonyu.js基本的な流れは次のような感じです。 カメラから映像を読み取ってcanvasに表示(getUserMedia) canvasの内…

影を付ける

THREE.jsは3Dの敷居を劇的に下げてくれる素晴らしいライブラリなんだけど、影だけは面倒臭い。といっても、そもそもWebGLで影をつけるというのがとてもとても面倒くさい処理という話なので、これでもずいぶんと楽させてもらってるそうだけど。とりあえず、ど…

フラクタル地形

先日THREE.jsでのポリゴンとテクスチャの使い方を覚えたので、なんか面白い使い道ないかなと検索して「フラクタル地形」というのを見つけました。Wikipediaによると 正方形を4つの同じ大きさの小さい正方形に分割し、その中心の点を無作為な値で垂直方向に変…

ポリゴンとテクスチャ

THREE.jsにはデフォルトのジオメトリが豊富で、いろいろなモデラーからのインポートも容易なようですが、プログラマ的にはポチポチと座標を指定した図形も表示してみたい。ということでやってみます。 HTML 前回と一緒。 <html lang="en"> <head> <title>Polygon and Texture</title> <meta charset="utf-8"> <style>body { bac</style></meta></head></html>…

ライフゲーム3Dの作り方

three.jsを使った3Dのライフゲームを作ったので、次に進むためにその中身について書き残しておきます。http://ando-yasushi.appspot.com/conways-game-of-life/gameoflife.html HTML とりあえずHTML部分はこんな感じ。Three.jsは言わずと知れたWebGLをいい感…

ライフゲーム3D

Google I/O 2012に参加して*1ウェブ系のプログラマにも今後3Dの知識は必要だろうとしみじみ確信したので少しずつ真面目にthree.jsをやってみることにした。以前あれやこれやでthree.js使ってみたことはあるんだけど、勢い任せというか、動けばなんでもいいや…

Face in face

さて、どうして前エントリで、まだちょっと完成とは言い辛いものを紹介したかというと実はどうしてもこちらのツールを紹介したかったからなのです。久しぶりに素晴らしいものを作ってしまった・・・。先ほどのスクリーンキャストではface.jsは完璧に私の顔を…

face.js + THREE.js

以前THREE.jsで作ったものをGoogleのエロい人に見せたら 「face.jsと組み合わせて顔の位置で視点が変わるともっと面白いんじゃないですか?」 というありがたいコメントを頂いたので、しばらくやってみてたんだけどなかなかうまく行かず。いや、動きはするけ…

インタネットベースのプログラミング言語HTML5

実行用のソースコードはこんな感じ。 window.log = function(msg) {console.log(msg)}; window.addEventListener('load', function() { var stack = [{vars:{}, funcs:{}}]; function topContext() { return stack[stack.length - 1]; } function readParam(…

photo-anvil.appspot.comの使い方

Photo Anvilがんばって作ったのに使い方が分からないと言われてしまったのでチュートリアルを作ってみました。画面右上にあるHELPボタンをクリックすると出てくるヘルプパネルの一番上にチュートリアルボタンがあります。クリックすれば後は見てるだけで説明…

THREE.jsのソース読みサポートサイト作りました

皆さんTHREE.jsは単なるWebGLのラッパーと思っているかもしれませんが、実際はそれだけではなくて、テクスチャローダーや視点管理用コントローラーなんかの補助クラスに加えて、スプライトやパーティクルシステムまで付いていて、たぶん見たことない人が考え…

photo-anvil.appspot.comの使い方

私ももう妻子持ちなので詳しくは語らないけど、SHARP-BLURをBLUR側の最大に、LOW-HIGHをHIGH側の最大に振って、一点でグリグリグリグリってやると次のようになります。これはちょうどおわんをひっくり返したような形になってるので、二つ作るとこんな感じの…

THREE.jsで3D入門してみた

先月Mr.doobに会えたので、せっかくだからTHREE.js使ってなんか作りたくなりました。ただ、3Dはほぼ未経験なのであんまりアグレッシブなものを作ろうとしても挫折必至。何か簡単かつ楽しそうなものないかな・・・と考えてて以前見たこれを思い出しました。こ…

Monkey Glitch

RubyKaigi2011のGlitchセッションで「モンキーグリッチ*1」って単語が出てきたんだけど、言葉の響きもやってることもどっちもおもしろくてなんか頭から離れない。この呪いから逃れるためには自分で実装するしかなさそうなので、とりあえずやってみた。http:/…

砂のマミ先輩

さて、さっきのはcanvasにfillTextしたのをgetImageDataで取ってきたわけだけど、fillTextの代わりにdrawImageを使えば任意の画像を砂にできるはず。試しにやってみたら面白かったのでサクッとAppEngineで公開してみた。http://sandfalljs.appspot.com/画像…

砂のアスキーアート

もう多分10年くらい前なんだけど「砂」というアプリケーションが好きで、よく遊んでた・・・というか眺めてた。その「砂」のiPhone版が出たとか言うのをたまたま目にして説明文読んでたら、あれって実はすごく簡単なアルゴリズムで動いてたらしい。 http://c…

シンプルなJS用の多言語化ライブラリ作りました

http://github.com/technohippy/M17N.js ガジェットの多言語化用に簡単なJSライブラリを作ったのでちょっと整理して公開します。まぁ探せばきっとあるんだろうけど、別に複雑な機能がほしいわけでもなかったので手作り。動作確認はMacのFireFoxとSafariでし…

あ・・・ありのまま、今起こった事を話すぜ!

,. -‐'''''""¨¨¨ヽ (.___,,,... -ァァフ| |i i| }! }} //| |l、{ j} /,,ィ//| i|:!ヾ、_ノ/ u {:}//ヘ |リ u' } ,ノ _,!V,ハ | /´fト、_{ル{,ィ'eラ , タ人 /' ヾ|宀| {´,)⌒`/ |<ヽトiゝ ,゙ / )ヽ iLレ u' | | ヾlトハ〉 |/_/ ハ !ニ⊇ '/:} V:::::ヽ // 二二二7'T'…

ProtoCommandからprototype.jsへの依存を除きました

って言われて、あらためて見てみると、確かにわざわざprototype.jsに依存するほどのことはないなと思ったのでちょっと修正。単体で動作するようになったはず。http://github.com/technohippy/ProtoCommand/ <html> <head> <script src="http://github.com/technohippy/ProtoCommand/raw/master/src/protocommand.js"></script> <script> (function() { var konami = new ProtoCommand</head></html>…

コナミコマンドとかをWebサイトに追加できるライブラリ

作ってみた。(要prototype.js) http://github.com/technohippy/ProtoCommand使い方はだいたいこんな感じ。 var sevenUp = new ProtoCommand('up up up up up up up'); sevenUp.action = function(){alert('7UP')}; ProtoCommand.observeAll(); 7回カーソル…

落書きアプリがChromeExperiments入り

ちょっと前に作ったこれ、ChromeExperimentsに投稿してたんだけど 本日、無事に採用されました。 一週間以上前にSubmitしたのに何も音沙汰ないから没かと思ってたけど、ちゃんと通ってよかったよかった。

Box2DJSを使った落書きアプリ作りました

以前Flashで作って絶賛放置中だったクレヨンフィジックスっぽい何かなんだけど、ぼけぼけしてるうちにドメイン名(physicsketch.com)まで期限切れ。あれをいまさらどうこうする気にもならないので、ここは一つBox2DJS使って作り直してChrome Experimentsにで…

Mr.doobがBox2DJSでなんか面白いもの作ってくれた

経緯としては、Mr.doobがどこかの会社?から「Google Chromeのパフォーマンスを好きなやり方で試してみてくれんか」と頼まれた・・・のかな? http://mrdoob.com/blog/post/644それでBox2DJSが選ばれるのは、パフォーマンスの悪さ故って感じもあってちょっと…

Box2DJSがajaxianで取り上げられました。

・・・なぜいまさら。昼ごろひさしぶりにセルクマ専用deliciousアカウント*1を見たら、Box2DJSのブクマ数が以前見たときよりいきなり250くらい増えててビビりまくり。何があったのかと思ってGoogleでブログ検索してみたところ、どうも昨日ここで紹介されたの…

PythonとJavaScriptはちょっと似てると思ってる

先週の金曜日にちょっとした集まりがあって、どういう流れでそうなったのか思い出せないんだけど、なぜかPythonistaがJavaScriptをDisって私がJSを弁護するという展開になった。まぁでもここではそれの場外乱闘をしたいわけではなくて、ただそんとき言い忘れ…

JavaScript版Protocol Buffers

「JavaScriptでバイナリファイルの中身にアクセスできた - k12uのアレ」って記事を見て、「したらProtocol BuffersだってJSで読めるんじゃね?」って思ったので作ってみた。http://code.google.com/p/protobuf-js/勢いに任せて一晩でやっただけの、まだ「時…

いつもポケットにおっぱいを

iPhone版おっぱいシミュレーター、その名も 「paiTouch」 できました。http://paitouch.appspot.com iPhoneじゃFlashが使えないので今回はJSで。うん、さすがに重い。PC版より制御点かなり減らしてるんだけど、まだだめか・・・。ちなみに今回は物理エンジン…

はてぶ

ですよねー。

Box2DJSをリリースしました。

http://box2d-js.sourceforge.net/重さ(読込・実行共)を気にしない剛毅なJavaScripterはこれ使ってばんばん物理シミュレーションするといいと思うよ。型を書かないでいいのと、コンパイルがいらないのとで、さらっと試すにはBox2DFlashAS3より楽。ホンキ用…