OSX safariでwebGLが見れないとの報告を受けた。
確認してみると、以前は見れていたと思っていたものが見れなくなっている。
調べてみると、下記サイトに解決方法が出ていた。
html5
OSX safariでwebGLを有効にする方法
Three.js[2]-ライン系スタディ
毎回テーマ的な物を設定して、少しずつThree.jsの操作に慣れて行こうと考えている。
今回はライン系で2本スタディをしてみた。
three.js:study04
three.js:study03
Three.js[1]-使用ライブラリの説明など。
少々遅れてしまったけど、three.jsでスタディしたものの説明をしておく。
スタディのインデックスを作成しておいた。
study:index
頭にthree.js:とついている物がthree.jsでのスタディになる。
particle(X)は以前作成したCANVASでのベクトルスタディだ。
今回は、主に使用ライブラリに関連すること及び以下2つを少々と説明していく。
three.js:study02
three.js:study01
Three.js/Node.js-コード補完のあるエディタ。
Node.jsのコード書きは、今までと同じように手に馴染んだCodaを使っていたのだが、どうにもNode.jsのコード補完はやってくれなくて、フラストレーションが溜まっていた。
気がついたらエディタ探しを始めてしまっていた。
Three.js[0]-webGLとthree.js
最近three.jsをいじり始めています。
以下が作成してみたもの。
three.js:study01
three.js:study02
Read more »
canvasでサークル同士の衝突や壁面衝突。
今年の頭にちょくちょく書いていた canvasでのパーティクルシリーズだが、
最近またちょびちょびいじっているので、久方ぶりにブログに書いておく。
Read more »
壁面をずるずる。
今回もこれまでに続きcanvasでドット動かしてます。
滑りベクトルを使って、壁面を滑っていくようにしてみました。
マウスに向かってグリグリといく感じがちょいお気に入り。
参考にしたのは以下のサイトです。
その５ 反射ベクトルと壁ずりベクトル
Flashゲーム講座＆ASサンプル集【ベクトルを使ってみよう】
めり込み補正とかどうするかはまだ考え中。
その前にたぶんオブジェクト同士の衝突かなぁ。
canvasでhtml5Logoとかも衝突
こないだから引き続きcanvas + javascriptやってます。
今回は衝突と、あと旬なんでhtml5Logoを動かしたり。
Particle4 寒いし、雪のニュースをよく聞くしってことで白っぽくしてみた。
HTML5 LOGO 発表されたばかりなんで、とりあえずロゴを突っ込んでちょっと回転させてみたり。
方法的には、だいたい以下の通りです。
現在位置と次の位置の線分と衝突する線分との交差判定
↓
交差している場合、交差点を求める
↓
反射ベクトルを求め、交差点から反射
今回は、円の大きさとか速度ベクトルの残り分を
反射ベクトルの大きさに反映といったことはやっていないです。
ActionScriptだとhitTestで済む衝突判定ですが、 canvasには無いので、この辺を参考に、 平面幾何におけるベクトル演算 » 直線と線分 「線分の交差判定で」現在位置と次の位置の線分と衝突する線分を求め 「線分の交点計算」で交点を求める。
次に、この辺りを参考にしつつ その５ 反射ベクトルと壁ずりベクトル 衝突ラインの単位法線ベクトルと速度ベクトルから反射ベクトルを求めている。
だいたいこんな感じ。
次は滑りかな、その後オブジェクト同士の衝突あたりな気分です。
canvasでパーティクル
チビチビとcanvas + javascriptやってみています。
なんだか同じような動作ですが、それぞれ方法がすこしずつ違ってます。
このあたりの方法を一回ちゃんとやっておきたかった。
canvasでオブジェクトを動かす時のお作法的な部分はこちらを参考にした。
「ActionScript3.0アニメーション」のchp8 イージングとバネを参考に作成。
加速度と摩擦を使う。
scratchbrainのエントリを参考にjsへ移植したのだけど、該当エントリ消えちゃってますね。
「ゲーム開発のための数学・物理学入門」やASGFを参考に
2次元ベクトルライブラリ作成して、使用。
ベクトルの使い方は以下を参照。
こちらもベクトル使用だが、移動ベクトルと逆向きに作用する
摩擦ベクトル（正確には違うけど。）のようなものを導入。
引き続き、この手ので必要な跳ね返りとか滑りとかやってみる予定。