cx20

プログラマ(マイクロソフト系の言語を使用することが多いです。)
JavaScript のライブラリを色々と試して遊んでます。

最近は CodePen にも投稿してたりします。
http://codepen.io/cx20/

Works

無限大に変化するロゴ

無限大に変化するロゴ <対応した点> ・Three.js を用いて、立体的なロゴを作成。 ・Tween.js を用いて、ロゴを無限大∞の形に変形させるよう対応。 <追記(2013/08/30)> ・jQuery のバージョンを 2.0.2 → 2.0.3 に変更 (2.0.2 で IE 動作時に 別ドメインの iframe の jQuery を読み込めないバグがあった為) <参考> ■ 立体的なドット絵を変形してみるテスト - jsdo.it http://jsdo.it/cx20/uEj0 ■ Canvas Cube - jsdo.it http://jsdo.it/takuyas/7dA4 ■ Amazon_co_jp: HTML5 インタラクティブ表現ガイド "HTML5、CSS3、Canvas、CreateJS、JavaScript" 池田 泰延 本 http://www.amazon.co.jp/dp/477415766X > ■ 3-4 テキストエフェクト > 落下しながら現れるテキスト > サンプル 3_4_JS_TExtEffect/1_texteffect/index.html

  • 7177
  • 12

無限大に変化するロゴ(IE11ロゴ版)

無限大に変化するロゴ(IE11ロゴ版) Internet Explorer 11 for Windows 7 の RTM 版リリースを記念して作成。 PC の WebGL 対応ブラウザでの閲覧を推奨(iPhone 等では Canvas での表示になる為、とても重いです。) <対応した点> ・「IE11」のロゴっぽく変更 ・サイズを 460x460 に変更 <参考> ■ 立体的なドット絵を変形してみるテスト - jsdo.it http://jsdo.it/cx20/uEj0

  • 9163
  • 12

無限大に変化するロゴ(Edgeロゴ版)

無限大に変化するロゴ(Edgeロゴ版) Windows 10 のリリースを記念して、Microsoft Edge のロゴっぽいものを表示するよう対応。 <対応した点> ・立体ドット絵を IE11 → Microsoft Edge ロゴっぽくなるよう変更 ・回転をオイラー角からクォータニオンを用いるよう変更 ・使用ライブラリを Three.js r54→r71 に変更 ・TrackballControls.js → OrbitControls.js に変更 <参考> ■ 立体的なドット絵を変形してみるテスト - jsdo.it http://jsdo.it/cx20/uEj0

  • 1134
  • 2

Three.js の雲のサンプルに飛行石を追加してみるテスト

Three.js の雲のサンプルに飛行石を追加してみるテスト <対応した点> ・雲の中に飛行石っぽいやつを追加してみた。 <参考> ■ 某アニメで見かけた飛行石を描いてみるテスト - jsdo.it http://jsdo.it/cx20/4UU6

  • 5003
  • 11

海に某未確認飛行物体を追加してみるテスト

海に某未確認飛行物体を追加してみるテスト <対応した点> ・海のサンプルに、以前作成した某未確認飛行物体を追加してみた。 ・Tween.js で物体を変形させてみた。 <参考> ■ jbouny / ocean https://github.com/jbouny/ocean ■ Ocean - Jérémy BOUNY http://jeremybouny.fr/ocean/demo/ ■ Canvas Cube - jsdo.it http://jsdo.it/takuyas/7dA4 ■ 某未確認物体を変形してみるテスト http://jsdo.it/cx20/uoO9 ■ 雲に某未確認飛行物体を追加してみるテスト http://jsdo.it/cx20/cqlv

  • 1772
  • 0

Three.js の海のサンプルに飛行石を追加してみるテスト

Three.js の海のサンプルに飛行石を追加してみるテスト <対応した点> ・海上に飛行石を浮かべてみた <参考> ■ jbouny / ocean https://github.com/jbouny/ocean ■ Ocean - Jérémy BOUNY http://jeremybouny.fr/ocean/demo/ ■ Three.js の雲のサンプルに飛行石を追加してみるテスト http://jsdo.it/cx20/uMJj

  • 4509
  • 10

ダンボールを落下させてみるテスト

ダンボールを落下させてみるテスト <対応した点> ・テクスチャを変更

  • 4747
  • 10

Three.js + Oimo.js でドミノっぽくドット絵を作るテスト

Three.js + Oimo.js でドミノっぽくドット絵を作るテスト <対応した点> ・ドット絵になるようドミノを配置 <参考> ■ Oimo.js https://github.com/lo-th/Oimo.js ■ OimoPhysics https://github.com/saharan/OimoPhysics <○○でドミノっぽくドット絵を作るシリーズ> ■ PlayCanvas でドミノっぽくドット絵を作るテスト http://jsdo.it/cx20/emEI ■ Three.js + Oimo.js でドミノっぽくドット絵を作るテスト http://jsdo.it/cx20/8ReN ■ Babylon.js + Cannon.js でドミノっぽくドット絵を作るテスト http://jsdo.it/cx20/6Etw ■ CubicVR.js + ammo.js でドミノっぽくドット絵を作るテスト http://jsdo.it/cx20/iBox

  • 4151
  • 4

地理院地図3Dデータを使ってみるテスト(その11)

地理院地図3Dデータを使ってみるテスト(その11) <対応した点> ・Three.js + Oimo.js を用いて、芦ノ湖にオブジェクトを落下させるよう対応。 <参考> ■ Oimo.js Terrain http://lo-th.github.io/Oimo.js/test_terrain.html ■ 地理院地図3Dデータを使ってみるテスト(その9)(失敗) http://jsdo.it/cx20/d2KX

  • 3091
  • 2

地理院地図3Dデータを使ってみるテスト(その8)

地理院地図3Dデータを使ってみるテスト(その8) <対応した点> ・THREE.Line で地図を描画するよう対応。 <変更履歴> ・2014/09/03 芦ノ湖が上下逆さまだった為、修正。 ・2014/08/30 新規作成

  • 3869
  • 5

地理院地図3Dデータを使ってみるテスト(その8改)

地理院地図3Dデータを使ってみるテスト(その8改) <対応した点> ・vertexColors で標高に応じて色を付けるよう変更。 <変更履歴> ・2014/09/03 芦ノ湖が上下逆さまだった為、修正。 ・2014/08/30 新規作成

  • 1411
  • 0

地理院地図3Dデータを使ってみるテスト(その10改)

地理院地図3Dデータを使ってみるテスト(その10改) <対応した点> ・地図をVoxelっぽくなるよう加工してみた。 <参考> ■ 地理院地図3Dデータを使ってみるテスト(その8改) http://jsdo.it/cx20/bUGs ■ 地理院地図3Dデータを使ってみるテスト(その5) http://jsdo.it/cx20/qEka

  • 1835
  • 0

地理院地図3Dデータを使ってみるテスト(その10改3)

地理院地図3Dデータを使ってみるテスト(その10改3) <対応した点> ・地図データを富士山から黒部峡谷に変更 <参考> ■ 立体地図の表示例(黒部峡谷) http://cyberjapandata.gsi.go.jp/3d/picture/kurobekyoukoku/index.html ■ 地理院地図3Dデータを使ってみるテスト http://jsdo.it/cx20/l4shv ■ 地理院地図3Dデータを使ってみるテスト(その13) http://jsdo.it/cx20/4D7O

  • 1192
  • 0

Three.js + Oimo.js で坂道にボールを転がしてみるテスト(その8)

Three.js + Oimo.js で坂道にボールを転がしてみるテスト(その8) <対応した点> ・3D地図データをもとに作成したモデルにボールを落下させるよう対応 <参考> ■ 立体地図の表示例(黒部峡谷) http://cyberjapandata.gsi.go.jp/3d/picture/kurobekyoukoku/index.html ■ 地理院地図3Dデータを使ってみるテスト http://jsdo.it/cx20/l4shv ■ 地理院地図3Dデータを使ってみるテスト(その13) http://jsdo.it/cx20/4D7O

  • 1649
  • 1

Three.js + Oimo.js でポッキーを落下させてみるテスト(その2)

Three.js + Oimo.js でポッキーを落下させてみるテスト(その2) <対応した点> ・いちごポッキーとプリッツを追加。

  • 2581
  • 4

Three.js + Oimo.js でコインを落下させてみるテスト(その4)

Three.js + Oimo.js でコインを落下させてみるテスト(その4) <対応した点> ・コインの両面に別のテクスチャを貼るよう対応 <参考> ■ Three.js でコインを回転するテスト http://jsdo.it/cx20/fOLi ■ javascript - Texturing a Cylinder in Three.js - Stack Overflow http://stackoverflow.com/questions/8315546/texturing-a-cylinder-in-three-js

  • 2537
  • 1

Three.js + Oimo.js で消しゴムを落下させてみるテスト

Three.js + Oimo.js で消しゴムを落下させてみるテスト <対応した点> ・THREE.MeshFaceMaterial() を用いて、各面に異なるテクスチャを貼るよう対応。 ・THREE.BufferGeometry() を用いると、各面に異なるテクスチャを指定しても、  最初のテクスチャが適用されるようだったので、THREE.BoxGeometry() で構築するよう変更。 <参考> ■ Cubeの各面に異なるマテリアルを使うときはTHREE.jsのバージョンに注意! - not good but great http://naoyashiga.hatenablog.com/entry/2013/10/10/225740 ■ Three.jsを使って画像を描画 - mwSoft http://www.mwsoft.jp/programming/webgl/image.html

  • 2762
  • 2

Three.js で消しゴムをストーンヘンジっぽく並べてみるテスト(その3)

Three.js で消しゴムをストーンヘンジっぽく並べてみるテスト(その3) <対応した点> ・消しゴムを立体的に配置するよう対応 <参考> ■ ストーンヘンジ - Wikipedia https://ja.wikipedia.org/wiki/%E3%82%B9%E3%83%88%E3%83%BC%E3%83%B3%E3%83%98%E3%83%B3%E3%82%B8 ■ 英ストーンヘンジ近く、地中に眠る巨石遺跡 新たに発見:朝日新聞デジタル http://www.asahi.com/articles/ASH9865ZMH98UHBI022.html ■ Ocean - Jérémy BOUNY http://jeremybouny.fr/ocean/demo/

  • 1205
  • 1

Three.js + Oimo.js で消しゴムを落下させてみるテスト(その3)

Three.js + Oimo.js で消しゴムを落下させてみるテスト(その3) <対応した点> ・五角形になるよう調整

  • 5544
  • 6

Three.js + Oimo.js で消しゴムを落下させてみるテスト(その5)

Three.js + Oimo.js で消しゴムを落下させてみるテスト(その5) <対応した点> ・ピラミッドになるよう配置。 <参考> ■ Oimo.js - [Editor] - [05] http://lo-th.github.io/Oimo.js/

  • 2183
  • 0

LiquidFun を試してみるテスト

LiquidFun を試してみるテスト LiquidFun はBox2Dをベースとして Google によって開発されている 2D 物理エンジンライブラリです。最近、1.1 が登場したようです。 <対応した点> ・サンプルの1つ「TestWaveMachine」を実行するよう対応。 <参考> ■ google/liquidfun https://github.com/google/liquidfun ■ LiquidFun https://google.github.io/liquidfun/ ■ LiquidFun Demo https://google.github.io/liquidfun/testbed/index.html ■ Googleがオープンソースの2D物理エンジンLiquidFun 1.1をリリース http://www.infoq.com/jp/news/2014/08/google-liquid-fun11-physics <LiquidFun を試してみるシリーズ> ■ LiquidFun を試してみるテスト / testWaveMachine.js サンプル http://jsdo.it/cx20/vkVp ■ LiquidFun を試してみるテスト(その2)/ testParticles.js サンプルを改造 http://jsdo.it/cx20/gsAW ■ LiquidFun を試してみるテスト(その3)/ testSoup.js サンプルを改造 http://jsdo.it/cx20/7PQ5 ■ LiquidFun を試してみるテスト(その4)/ testSoupStirrer.js サンプルを改造 http://jsdo.it/cx20/y2SB ■ LiquidFun を試してみるテスト(その5)/ testImpulse.js サンプルを改造 http://jsdo.it/cx20/oYCZ ■ LiquidFun を試してみるテスト(その6)/ testRigidParticles.js サンプルを改造 http://jsdo.it/cx20/tpQn ■ LiquidFun を試してみるテスト(その7)/ testElasticParticles.js サンプルを改造 http://jsdo.it/cx20/kfa1 ■ LiquidFun を試してみるテスト(その8)/ testSurfaceTension.js サンプルを改造 http://jsdo.it/cx20/496r ■ LiquidFun を試してみるテスト(その9)/ testTheoJansen.js サンプルを改造 http://jsdo.it/cx20/y3GB

  • 8975
  • 27

LiquidFun を試してみるテスト(その2)

LiquidFun を試してみるテスト(その2) LiquidFun サンプル「testParticles.js」を少し改造。 <対応した点> ・Particle をドット絵になるよう変更。 <参考> ■ testParticles.js https://github.com/google/liquidfun/blob/master/liquidfun/Box2D/lfjs/testbed/tests/testParticles.js ■ google/liquidfun https://github.com/google/liquidfun <LiquidFun を試してみるシリーズ> ■ LiquidFun を試してみるテスト / testWaveMachine.js サンプル http://jsdo.it/cx20/vkVp ■ LiquidFun を試してみるテスト(その2)/ testParticles.js サンプルを改造 http://jsdo.it/cx20/gsAW ■ LiquidFun を試してみるテスト(その3)/ testSoup.js サンプルを改造 http://jsdo.it/cx20/7PQ5 ■ LiquidFun を試してみるテスト(その4)/ testSoupStirrer.js サンプルを改造 http://jsdo.it/cx20/y2SB ■ LiquidFun を試してみるテスト(その5)/ testImpulse.js サンプルを改造 http://jsdo.it/cx20/oYCZ ■ LiquidFun を試してみるテスト(その6)/ testRigidParticles.js サンプルを改造 http://jsdo.it/cx20/tpQn ■ LiquidFun を試してみるテスト(その7)/ testElasticParticles.js サンプルを改造 http://jsdo.it/cx20/kfa1 ■ LiquidFun を試してみるテスト(その8)/ testSurfaceTension.js サンプルを改造 http://jsdo.it/cx20/496r ■ LiquidFun を試してみるテスト(その9)/ testTheoJansen.js サンプルを改造 http://jsdo.it/cx20/y3GB

  • 5632
  • 1

Matter.js でテクスチャを使ってみるテスト

Matter.js でテクスチャを使ってみるテスト <対応した点> ・「fillStyle:style」→「sprite: {texture:"image.png"}}」に変更 <参考> ■ liabru/matter-js https://github.com/liabru/matter-js ■ matter-js / CHANGELOG.md https://github.com/liabru/matter-js/blob/master/CHANGELOG.md ■ Matter.js Physics Engine Demo http://brm.io/matter-js-demo/ ■ Wrecking Ball Physics - CodePen http://codepen.io/liabru/pen/zwDiE ■ Boxes & Beach Ball Physics - CodePen http://codepen.io/liabru/pen/Ivxib

  • 9517
  • 1

Matter.js でゴゴゴを物理演算してみるテスト

Matter.js でゴゴゴを物理演算してみるテスト やっつけですが、思いついたので。。。 <対応した点> ・Matter.Vertices.fromPath() にて自作シェイプを追加してみた。 ・コードの整理(コードをCodePenのサンプルベースに変更) <参考> ■ liabru/matter-js https://github.com/liabru/matter-js ■ matter-js / CHANGELOG.md https://github.com/liabru/matter-js/blob/master/CHANGELOG.md ■ Matter.js Physics Engine Demo http://brm.io/matter-js-demo/ ■ Boxes & Beach Ball Physics - CodePen http://codepen.io/liabru/pen/Ivxib ■ デスクトップドドド http://massacre.s59.xrea.com/game/dtddd/index.htm

  • 5460
  • 2

雲の中でゴゴゴを落下させてみるテスト

雲の中でゴゴゴを落下させてみるテスト <対応した点> ・2つのサンプル(雲+ゴゴゴ)を重ね合わせてみた <参考> ■ Three.js の雲のサンプルを試してみるテスト http://jsdo.it/cx20/pArs ■ Matter.js でゴゴゴを物理演算してみるテスト http://jsdo.it/cx20/dJbc

  • 2994
  • 2

Three.js + Cannon.js でゴゴゴを落下させてみるテスト

Three.js + Cannon.js でゴゴゴを落下させてみるテスト <対応した点> ・ゴゴゴを複合オブジェクトとして作成 <参考> ■ cannon.js / demos / compound.html https://github.com/schteppe/cannon.js/blob/master/demos/compound.html ■ CANNON.jsを使って3Dに物理演算を持ち込む http://css-eblog.com/webgl/cannonjs.html <○○でゴゴゴを落下させてみるシリーズ> ■ Three.js + Oimo.js でゴゴゴを落下させてみるテスト http://jsdo.it/cx20/yYRM ■ Three.js + Cannon.js でゴゴゴを落下させてみるテスト http://jsdo.it/cx20/7lgA ■ Babylon.js + Cannon.js でゴゴゴを落下させてみるテスト http://jsdo.it/cx20/kUd3 ■ Matter.js でゴゴゴを物理演算してみるテスト http://jsdo.it/cx20/dJbc ■ 雲の中でゴゴゴを落下させてみるテスト http://jsdo.it/cx20/lJhf ■ GLSL ray marching でゴゴゴを動かしてみるテスト http://jsdo.it/cx20/hMvj

  • 4801
  • 2

Three.js + Oimo.js で箱にゴゴゴを入れてみるテスト

Three.js + Oimo.js で箱にゴゴゴを入れてみるテスト <対応した点> ・ボールをゴゴゴに変更

  • 3868
  • 0

Three.js + Oimo.js でゴゴゴを振り回してみるテスト(その2)

Three.js + Oimo.js でゴゴゴを振り回してみるテスト(その2) <対応した点> ・ゴゴゴの数を増殖させてみた <参考> ■ Three.js + Oimo.js でゴゴゴを落下させてみるテスト http://jsdo.it/cx20/yYRM

  • 1498
  • 1

[WebGL] d3.js を使って作品を並べてみるテスト

[WebGL] d3.js を使って作品を並べてみるテスト jsdo.it 投稿1000本を記念して WebGL で作成したサンプル(約80個)を並べてみました。 <使い方> ・サムネイルをクリックすると作品が背景に表示されます。 <対応した点> ・Force Layout(力学モデルでグラフ描画するレイアウト)にて描画するよう対応 ・作品は iframe を使って背景に表示するよう対応 <更新履歴> 2017/04/08 リソースのパスを変更。 2015/03/25 新規作成 <表示対象の作品一覧> ■ [簡易版] 30行で WebGL を試してみるテスト - Fork tree http://jsdo.it/cx20/oaQC/tree <参考> ■ mbostock/d3 https://github.com/mbostock/d3 ■ D3.js - Data-Driven Documents http://d3js.org/ ■ d3.js ネットワーク(Force Layout) http://jsdo.it/_shimizu/9nUr <関連> ■ jQuery UI で作品を並べてみるテスト http://jsdo.it/cx20/qq8p

  • 3845
  • 7

[GLSL] d3.js を使ってサンプルを並べてみるテスト

[GLSL] d3.js を使ってサンプルを並べてみるテスト GLSL 関連のサンプル(約60個)を並べてみました。 一部、重いシェーダが含まれているのでご注意ください。 <使い方> ・サムネイルをクリックするとサンプルが背景に表示されます。 <対応した点> ・Force Layout(力学モデルでグラフ描画するレイアウト)にて描画するよう対応 ・サンプルを iframe を使って背景に表示するよう対応 <更新履歴> 2017/04/08 リソースのパスを変更。 2015/03/25 新規作成 <表示対象の作品一覧> ■ GLSL で画像にフィルタをかけてみるテスト - Fork tree http://jsdo.it/cx20/3yw3/tree <参考> ■ Shadertoy BETA https://www.shadertoy.com/ ■ GLSL Sandbox Gallery http://glslsandbox.com/ ■ Filters〜世界一面白いカメラフィルターが、ここから生まれる。〜 http://filters.kayac.com <関連> ■ d3.js ネットワーク(Force Layout) http://jsdo.it/_shimizu/9nUr ■ [WebGL] d3.js を使って作品を並べてみるテスト http://jsdo.it/cx20/1000

  • 2386
  • 0

[Three.js+Oimo.js] d3.js を使って作品を並べてみるテスト

[Three.js+Oimo.js] d3.js を使って作品を並べてみるテスト Three.js + Oimo.js 関連のサンプル(約50本)を並べてみました。 <使い方> ・サムネイルをクリックするとサンプルが背景に表示されます。 <対応した点> ・Force Layout(力学モデルでグラフ描画するレイアウト)にて描画するよう対応 ・サンプルを iframe を使って背景に表示するよう対応 <更新履歴> 2017/04/08 リソースのパスを変更。 2015/04/05 新規作成 <表示対象の作品一覧> ■ Three.js + Oimo.js で坂道にボールを転がしてみるテスト - Fork tree http://jsdo.it/cx20/8ECT/tree

  • 2919
  • 1

[Grimoire.js] d3.js を使って作品を並べてみるテスト

[Grimoire.js] d3.js を使って作品を並べてみるテスト Grimoire.js を使用したサンプル(約90本)を並べてみました。 <使い方> ・サムネイルをクリックするとサンプルが背景に表示されます。  シフトキー + クリック … 作品を別ウインドウで表示  Ctrlキー + クリック … 作品紹介ページを別ウインドウで表示 <対応した点> ・Force Layout(力学モデルでグラフ描画するレイアウト)にて描画するよう対応 ・サンプルを iframe を使って背景に表示するよう対応 <表示対象の作品一覧> ■ [WebGL] Grimoire.js を試してみるテスト - Fork Tree http://jsdo.it/cx20/4ZEB/tree <関連> ■ d3.js ネットワーク(Force Layout) http://jsdo.it/_shimizu/9nUr ■ [WebGL] d3.js を使って作品を並べてみるテスト http://jsdo.it/cx20/1000

  • 330
  • 0

[WebGL] Grimoire.js + Oimo.js を用いて作品を噴出させてみるテスト

[WebGL] Grimoire.js + Oimo.js を用いて作品を噴出させてみるテスト <対応した点> ・作品のサムネイルをキューブのテクスチャに使用するよう対応。 (AWSにあるjsdo.itのサムネイルはクロスオリジンの制約で参照できない為、githubにコピーした上で参照するよう対応。) <対応できていない点> ・クリックしたら作品にジャンプするような対応は実現できていません。 <参考> ■ [Grimoire.js] d3.js を使って作品を並べてみるテスト http://jsdo.it/cx20/qBHw/

  • 175
  • 0

Skills

  • Wordpress
  • JavaScript
  • Visual Basic
  • C
  • C++
  • C#
  • Java
  • SQL

Hot tags

Categories

HTML / CSS / JavaScript