トップ > JavaScript

JavaScript

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

Products JavaScript Chrome

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

HTML5巨乳の作り方

Products JavaScript THREE.js

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

影を付ける

JavaScript THREE.js

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

フラクタル地形

JavaScript THREE.js

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

ポリゴンとテクスチャ

JavaScript THREE.js

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

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

JavaScript three.js

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

ライフゲーム3D

JavaScript three.js

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

Face in face

JavaScript

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

face.js + THREE.js

JavaScript three.js

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

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

JavaScript

実行用のソースコードはこんな感じ。 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の使い方

JavaScript

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

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

JavaScript three.js

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

photo-anvil.appspot.comの使い方

JavaScript

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

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

JavaScript three.js

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

Monkey Glitch

JavaScript

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

砂のマミ先輩

HTML5 JavaScript

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

砂のアスキーアート

HTML5 JavaScript

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

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

JavaScript

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

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

JavaScript

,. -‐'''''""¨¨¨ヽ (.＿＿_,,,... -ｧァﾌ| |i i| }! }} /／| |l､{ j} /,,ｨ//｜ i|:!ヾ､_ﾉ／ u {:}//ﾍ |ﾘ u' } ,ﾉ _,!V,ﾊ | ／´fト､_{ﾙ{,ィ'ｅﾗ , ﾀ人 /' ヾ|宀| {´,)⌒`/ |<ヽﾄiゝ ,ﾞ ／ )ヽ iLﾚ u' | | ヾｌﾄﾊ〉 |／_／ ﾊ !ニ⊇ '／:} V:::::ヽ /／ 二二二7'T'…

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

JavaScript

って言われて、あらためて見てみると、確かにわざわざ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サイトに追加できるライブラリ

JavaScript

作ってみた。（要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入り

JavaScript Box2D

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

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

JavaScript Box2D

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

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

JavaScript Box2D

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

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

JavaScript Box2D

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

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

Python JavaScript 徒然

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

JavaScript版Protocol Buffers

Google Products JavaScript

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

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

JavaScript Oppai iPhone Products

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

はてぶ

徒然 JavaScript box2d

ですよねー。

Box2DJSをリリースしました。

Box2D JavaScript

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