edo_m18

CSS-EBLOGの管理人やってます。

Works

自作ライブラリでデモを作ってみた

#自作ライブラリでデモ 自作した[Canvas context 2Dで座標変換を実装してみる](http://jsdo.it/edo_m18/9Xku)を元に、ちょっとしたデモを作ってみました。 ※動画の読み込みが途中で止まることがあるので、画面が真っ白な状態から進まない場合はリロードしてみてください。

  • 4222
  • 6

Canvas context 2Dで自作3Dエンジンを作る

# Canvas context 2Dでポリゴンを描く ------- 【更新履歴】 - 2013.04.13 Matrixのupdateを最適化しました。 - 2013.04.12 ライティングの計算処理が間違っていたのでそれを修正。 - 2013.04.11 テクスチャの指定にURLテキストを指定できるよう修正。 - 2013.04.09 Faceクラスに分割数を渡せるよう修正しました。 - 2013.04.08 フォグ、ライティング、ワイヤーフレームのON/OFFができるスイッチを追加しました。 - 2013.04.08 lookAtの固定・非固定を実装しました。 色テクスチャの最適化しました。 陰の処理を最適化しました。 - 2013.04.07 Particleクラスを実装。空間内にドットを配置できるようにしました。 さらに、マテリアルにテクスチャ以外に色を指定できるようにしました。 - 2013.04.07 クリップ空間外のものをレンダリングしないよう修正。 動画の再生を追加してみた。(Chromeのみで動作します) - 2013.04.07 画像生成時の最適化。 簡易的なライティング処理を追加 フォグの処理がミスっていたのでそれを修正。 頂点情報の持たせ方が間違っていたのでそれを修正。 またLineクラスを実装。 - 2013.04.06 簡易的なフォグを実装。遠くなるほど色が背景色に同化していきます。 - 2013.04.04 ビュー座標変換が右手系、左手系で逆になっていたのでそれを修正しました。 - 2013.04.04 Zソートでレンダリング順を制御するよう修正 - 2013.04.03 Cubeクラスを暫定で実装。これでやっと、ローカル座標からスクリーン座標までの変換が可能に。 - 2013.04.02 もろもろ修正。やっとちゃんと動くようになった・・・。 - 2013.04.01 Object3Dクラスを実装。Cameraはそれを継承するよう修正。 CameraクラスにlookAtメソッドを実装(でも多分、まだちゃんと動いてない) 上記修正で、若干perspectiveがなんか変に・・。 - 2013.03.24 新しく、Cameraクラス、Rendererクラスを実装 - 2013.03.23 perspectiveの計算式を別のモノに変更。(DirectXからOpenGL形式へ?) ---- ##操作 ドラッグで視点を動かすことができます。 Chrome限定ですが、スクロールでカメラを近づけたり遠ざけたりができます。 (iOSではピンチイン・アウトでカメラの位置を変更できるようになっています)

  • 13999
  • 6

簡易2D物理エンジンを作る

#簡易2D物理エンジンを作る 学習のために、[3Dエンジン](http://jsdo.it/edo_m18/9Xku)に引き続き、今度は簡単な2D向けの物理エンジンを作っていきます。 ------- #やっと動いた!!!! 何度も心折れかけて、「まぁ、ここまでできたしーいっかー(; ¬3¬)〜♪」みたいな心境でしたが、 やっと複数剛体でもしっかりと動くところまで作れました。 処理的にはいろいろ最適化してないのでだいぶ重いですが、 そもそも動作の勉強ってことがメインなので、負荷軽減はできる範囲でやってこうと思ってます。 ------- ##更新履歴 * **2013.12.12** Circleタイプのシェイプを追加。 * **2013.12.10** Boxタイプのシェイプを追加。 * **2013.12.09** 速度の許容値を設定し、接触時の微振動を解消。

  • 8711
  • 5

おっぱいがうごくJS inspire by damele0n

[damele0n](http://jsdo.it/damele0n)さんの[おっぱいがうごくJS](http://jsdo.it/damele0n/h8BW)を参考に、新しく作ってみた。 (あ、案件で使うときがあったので・・w) 主な実装内容は、胸のあたりに5x5程度のメッシュを作成し、テクスチャマッピングした各頂点を揺らす、ということで実装しています。 [History] * [2013/03/04] 常にレンダリングし続けるのを防ぎ、CPU使用率を下げるよう修正しました。

  • 14878
  • 13

360度の空を表現してみる

[Three.jsのデモであった空](http://mrdoob.github.io/three.js/examples/canvas_geometry_panorama.html)を表示するのを、独自ライブラリで作ってみました。 画像のロードに時間かかるので、しばらくしたら画面をドラッグしてみてください。

  • 2947
  • 3

Canvas2D contextで3DのSphereを描く

なんか点の位置が均等になっていなかったので修正。 またしても自作ライブラリでのデモ・・。 for文だけで3DのSphere上に点をプロット。 2重のfor文だけで出来る。

r = 50
for s in [0...360] by 5
    for t in [0...360] by 5
        x = r * cos(s) * sin(t)
        y = r * sin(s) * sin(t)
        z = r * cos(t)

  • 2476
  • 3

テスラコイル的ななにか

#球体の中にあるプラズマ的な感じのヤツ。テスラコイル。 マウス乗せるとそこに集まります。

  • 3968
  • 8

CSS RubikCube Game

#CSS+JSでルービックキューブを描いていきます。 * オートクリア機能を追加。 * 回転方向の履歴を保持するよう機能追加。 * ルービックキューブ完成時に完成のイベントを発火するよう修正。 * 初期状態をランダムな状態からスタートするよう修正 * パフォーマンス・チューニング。iPhone5でだいぶ快適に動作するように。 * ルービックキューブのキューブ間の間隔を指定できるよう修正。 * DEMOモードを追加。 * パフォーマンス・チューニングを若干。 * ルービックキューブ上でもgestureが正しく動くよう修正。 * ライティングを正常に動作するよう修正。 * 各面の色を実物を元に色設定しました。(公式の配色とかあるのかな・・) * いくつかの面でドラッグ方向と逆に回転するのを修正。 * ドラッグで直感的にキューブを回転できるよう実装。(でもまだたまに逆方向に回転したりします・・) * ボタン操作でそれぞれの面を回転できます。 * マウスホイールでズームできるように。 * Object3Dクラスを実装。

  • 19772
  • 21

Web Audio APIで音楽のビジュアライザを作る(2)

#Web Audio APIで音楽のビジュアライザを作る(2) **Google Chromeのみで動作します。** 抽出する周波数帯を限定、増幅してそれをビジュアライズしてみました。 なんとなくそれっぽくなったかな。 フルスクリーンで見たほうが迫力が出ます。

  • 4448
  • 5

Three.jsでトゥーンシェーダの実装の実験

#Three.jsでトゥーンシェーダの実装の実験をしていきます。 実装については以下の記事を参考にさせてもらいました。 [トゥーンレンダリング | wgld.org](http://wgld.org/d/webgl/w048.html) ##更新履歴 * 2013.08.06 - シェーダ切り替えスイッチを追加。 ##現状の問題点 なぜかカリングの設定がうまく動いていない・・。なにか勘違いしているのだろうか・・。 なにか知っている人いたら教えて下さい。 ↓どうもこれが想定通りに動いていない。 `renderer.setFaceCulling(THREE.CullFaceFront);` レンダリングについてはMaterial側で設定するのが正解でした↓ `material.side = THREE.BackSide;//or THREE.FrontSize or THREE.DoubleSide` これで意図通りにレンダリングされました。 今回のハマったポイントなどは[qiitaに解説記事](http://qiita.com/edo_m18/items/8b84e6318ee49713e40e)を投稿しているので、興味ある人は見てみてください。

  • 8468
  • 10

デプスバッファシャドウ

# [WebGL] デプスバッファシャドウ(影のレンダリング)をやってみる [前回](http://jsdo.it/edo_m18/wAYa)に引き続き、デプスバッファシャドウに挑戦。 ちなみに今回も[wgld](http://wgld.org/d/webgl/w051.html)さんを参考にさせて頂きました。 チェックボックスをチェックすると、使用しているデプスバッファを視覚的にレンダリングするようにしてみました。 仕組みが分かりやすくなると思います。 ちょっと分かりづらいですが、球体がライトの位置ですw

  • 2269
  • 2

射影テクスチャマッピング

# 射影テクスチャマッピング wgldさんの[こちらの記事(射影テクスチャマッピング)](http://wgld.org/d/webgl/w049.html)を参考にさせて頂きました。 [解説記事は書きました](http://qiita.com/edo_m18/private/74ec5832a07f11128f0e)。 [追記] マウスドラッグ、ホイールで視点を移動できるようにしてみた。

  • 2391
  • 2

WebGLをスクラッチで

WebGL再勉強中。 まずは色々スクラッチでやってみます。

  • 1368
  • 0

点光源の位置を視覚化してみる

  • 1614
  • 0

彗星パーティクル

## スプライン x 3Dをベースに作ってみた。

  • 3716
  • 4

スプライン曲線 x 3D

## 3次元Bスプライン曲線を視覚的に見れるように作ってみた スプライン曲線のコードは[こちらの記事](http://www5d.biglobe.ne.jp/stssk/maze/spline.html)を参考にさせていただきました。 また、3D部分については[簡易3D](http://qiita.com/edo_m18/items/f680f839a93023d2ecd3)で簡単に解説しています。 ### マウスで視点を動かせます

  • 2667
  • 3

ガウシアンブラー

## ガウシアンブラーを実装してみる ぼかしは様々な演出に使われている処理ですね。 とても一般的なものですが、どうやって実装するのか、それをCanvasでやってみました。 以下の記事を参考にしています。 ### 更新履歴 - 2014.09.16 少しだけ最適化 ### 参考記事 * [gaussian フィルタ | wgld.org](http://wgld.org/d/webgl/w057.html) * [ガウスフィルタ](http://t-pot.com/program/79_Gauss/index.html)

  • 2686
  • 0

コンボリューション(畳み込み処理)を実装してみる

# コンボリューションをなんとなく実装してみる 画像のフィルターは大抵コンボリューション(畳み込み処理)で行われているようです。 (こちらの記事を参考にしました:http://docs.gimp.org/2.8/ja/plug-in-convmatrix.html) やっていることは比較的単純です。 3x3行列や5x5行列をなんとなく作ればそれがフィルターになります。 上記サイトに記載されている行列をサンプルに実装してみました。 ちなみに下部のエリアにDrag & Dropすると別の画像にもフィルターを適用できます。 これの簡単な解説記事を書きました。 [コンボリューション(畳み込み処理)を実装してみる | Qiita](http://qiita.com/edo_m18/items/d9f5f4b6de7ff73075ed) -------------- ### 更新履歴 - 2014.09.04 -- カスタムフィルター用のマトリクスを追加。 - 2014.09.04 -- Drag & Dropでエラーが出ていたので修正。

  • 3433
  • 5

PerlinNoiseで雲模様を描く

#PerlinNoiseで雲模様を描く PerlinNoiseを調べ中。だいぶ形になった。 Perlin氏が書いたJava版をJSに移植しました。 ##Improved Noise reference implementation http://mrl.nyu.edu/~perlin/noise/ --- 下記のGithubに上がっているReputelessさんのものを参考に、octaveNoiseを移植しました。 https://github.com/Reputeless/PerlinNoise --- あと、PerlinNoiseを作ったPerlin氏のサイト。 ##MAKING NOISE by Ken Perlin http://www.noisemachine.com/talk1/

  • 3894
  • 2

パーリンノイズとThree.jsを使って波の表現

  • 1595
  • 0

Easing playground

#Easing playground イージングの仕方のチェックするためのツール。 イージング関数の中身を書き、現在の位置を返す関数を作ればイージングが実行されます。 渡される引数は初期位置(a)と終了位置(b)、そして現在の時間(0 〜 1)です。 簡易的ですが、SAVEボタンを付けました。 色々試して気に入ったものが出来たら保存できるようになっています。 保存先はlocalStorageなので、間違って保存してしまったらそれをクリアすれば消すことが出来ます。 (でもいずれ削除ボタンとかも付ける予定)

  • 2736
  • 3

[WebGL] オフスクリーンレンダリング

#オフスクリーンレンダリングに挑戦! フレームバッファを用いて、オフスクリーンレンダリングに挑戦してみました。 実装にはこちらの記事を参考にさせてもらいました [wgld.org | WebGL: フレームバッファ |](http://wgld.org/d/webgl/w040.html) 若干わかりづらいですが、一旦グラデーションのポリゴンをオフスクリーンでレンダリングし、 それをテクスチャとして黒いポリゴンに貼り付けています。 回転運動自体はどちらも同じものを使っています。

  • 2439
  • 0

Skills

  • Photoshop
  • Illustrator
  • iOS Browser
  • Android Browser
  • jQuery
  • PhoneGap
  • Sencha Touch
  • HTML5
  • XHTML
  • CSS
  • CSS3
  • JavaScript
  • CoffeeScript
  • SCSS
  • Objective-C
  • node.js

Hot tags

Categories

HTML / CSS / JavaScript