.naotaro

2Dと3D好きの闇落ちプログラマ。BlenderとWebGLが得意
http://twilog.org/naotaro0123
http://9leap.net/user/naotaro0123

Works

WebGL-ワイプエフェクト

WebGLのステンシルバッファを使ってワイプエフェクトを掛けています。 以下のことができます。 マウスの位置に合わせて円形ワイプが移動 マウスホイールで円形ワイプのサイズ変更

  • 982
  • 1

WebGL-オフスクリーン

テクスチャをオフスクリーン表示してみました。 imgの上下反転はgl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);でやってます

  • 660
  • 0

WebGL-ステンシルバッファ

テクスチャ2枚を使って、ステンシルバッファでマスクしてます。 1枚目にマスク用のテクスチャを描画し、その上に2枚目を重ねる事で目の部分だけくり抜くマスクができました。 マウスでぐりぐりできます

  • 939
  • 0

WebGL-ステンシルとフレームバッファ

フレームバッファにステンシルバッファをさせてみました。 マウスでぐりぐりできます ※ 追記  この方法だとステンシルバッファしたものをフレームバッファに表示してるだけなので フレームバッファのステンシルは使ってません。 → フレームバッファでステンシル使う場合はこちら(http://jsdo.it/.naotaro/2EIH)

  • 697
  • 0

まどまぎドット5 - tmlib.js 0.2.0

  • 2157
  • 1

まどまぎドット4 - tmlib.js 0.2.0

  • 1528
  • 0

まどまぎドット3 - tmlib.js 0.2.0

  • 2422
  • 1

まどまぎドット2 - tmlib.js 0.2.0

  • 1419
  • 0

まどまぎドット - tmlib.js 0.2.0

  • 2172
  • 1

ファミコンにしてみた - tmlib.js 0.2.0

  • 1850
  • 0

忍者じゃじゃ○くんにしてみた - tmlib.js 0.2.0

  • 1962
  • 1

カービ○にしてみた - tmlib.js 0.2.0

  • 3109
  • 6

[tmlib.js]手裏剣を上中下から真ん中に飛ばす

三角関数(sin,cos)の復習も兼ねて、手裏剣を真ん中に飛ばすようにしてみました。 手裏剣も画像を使わず、canvasで描画してます。 避けゲーのサンプル用です /* 2013.09.08 */ ・避けゲーとして成立してないので、修正

  • 1712
  • 1

スロット的なもの

スロットゲーム的なものを作ろうと思い、enchant.jsでスロットの基本機能を作ってみました〜!

  • 5042
  • 0

Web Speech API with tmlib.js

音声認識の電工掲示板です。 2013/01/14公開のChrome25開発版でしか動きません。 試してみたい方は以下のサイトからBeta or Dev版をDLして下さいね。 http://www.chromium.org/getting-involved/dev-channel 【使い方】 (1)音声入力ボタン押下 (2)マイクアクセスを許可押下 (3)faviconが点滅している時にマイクに話かけると文字が変わります 【ポイント】 ・音声入力後、少し待って下さい。 ・faviconが点滅している間は何回も入力可能です ・faviconが点滅しない場合は、もう1度ボタンを押して見て下さい ・Webサーバ上でしか動かないです 味見部でWeb Speech APIの勉強会をやっていたので影響受けて作ってみました〜!

  • 3787
  • 1

【enchant.js】スマホクラッシュ

android1.x〜2.x系の携帯をひたすら殴ります。 HTML5開発者がかかえている不満を少し解消! 【操作方法】 マウスクリックのみ <素材> ・android携帯画像 http://www.matcheck.cz/androidguipsd/ http://www.marlinmobile.com/blog?page_id=285 ・割れた画像(Photoshopプラグイン) http://design-develop.net/design/high-res-photoshop-brushes-for-creating-broken-glass-effect.html ・効果音源 http://koukaongen.com/cgi/se_search/herodb.cgi?table=sound&view=L&recpoint=0

  • 2208
  • 0

隕石墜落ゲーム的な何か

ゲームライブラリを使わずに書いたレトロゲーム サウンド素材:魔王魂の爆発06、銃05

  • 2311
  • 1

【tmlib.js】Survival Land

襲ってくるモンスターからプレイヤーを守って下さい 【操作方法】 マウスキードラッグ上下:プレイヤーの移動 スペースキー:弾を発射します [サウンド素材・絵素材] びたちー素材館 http://www.vita-chi.net/sec/voi/hora/voivoi1.htm マッチメイカーズ http://osabisi.sakura.ne.jp/m2/material3.html [絵素材] ドット絵素材 http://park2.wakwak.com/~kuribo/dot/dot1.htm ※ 2013/1/27のGGJに投稿したゲームです! tmlib.jsを使えば1日もかからずにこれぐらいのゲームができます♪   若干操作性が悪いのでそのうち修正

  • 1655
  • 2

[tmlib.js]32x32画像で敷き詰める

スプライト画像を画面いっぱいに敷き詰めるテストコード

  • 2105
  • 1

[tmlib.js]3種類の畳を敷き詰める

畳が大好きなので、javascriptで敷き詰めてみました♪

  • 1083
  • 0

テトリス的な何か

HTML5純正なテストリス的なゲーム

  • 1869
  • 0

ゲームランキング

ゲームによくあるランキング機能がほしかったので作りました。 【機能】 ・localStorageから読込・保存 ・点数の大きい順に入れ替え表示 ・セットした値をCSSアニメーションで強調

  • 2400
  • 0

避けゲー(tmlib.js)

tmlib.jsを使ってゲームを作る

  • 1975
  • 1

forked: Fire Effect - tmlib.js version

炎を円運動させてみた! animation.move(x, y, m);でうまくできなかったので とりあえずjS実装

  • 2140
  • 1

forked: 2011-03-30 3rd Canvasで円グラフアニメサンプル

requestAnimationFrameとsetIntervalの検証 参考: requestAnimationFrameでフレームと再描画更新を制御する http://yomotsu.net/blog/2013/01/05/fps.html

  • 1053
  • 0

CANVASでダウンローダー

CANVASでよく動画読み込みなどで使用されるダウンローダー画像作ってみました

  • 836
  • 0

WebGL-乗算済みアルファテスト

プリマルチプライド(乗算済みアルファ)画像の場合、透明部分のふちが黒くなる その解決法のテスト。 HTMLのコメント部分を解除すれば正しく動く。 このサンプルはわかりやすくバグったままにしてある(顔のふちが黒くなるのが、乗算を2重にかけてる証拠) 乗算済みでない画像に切り替えると綺麗になる ・参考URL [コンポジターに必要なアルファチャンネルの知識(前編)](http://compojigoku.blog.fc2.com/blog-entry-4.html) [コンポジターに必要なアルファチャンネルの知識(後編)](http://compojigoku.blog.fc2.com/blog-entry-5.html) [乗算済みアルファとは? その1:補間アルファの問題点](https://blogs.msdn.microsoft.com/ito/2010/07/10/423/)

  • 472
  • 1

Skills

  • Photoshop
  • Dreamweaver
  • Illustrator
  • iOS Browser
  • Android Browser
  • jQuery
  • Titanium Mobile
  • jQuery mobile
  • HTML5
  • CSS
  • CSS3
  • JavaScript
  • PHP
  • Visual Basic
  • C#
  • Objective-C
  • Java
  • SQL
  • Shell Script
  • node.js

Hot tags

Categories

HTML / CSS / JavaScript