iOS8にWebGLが搭載されたこともあり、three.jsにあらためて注目しています。 順を追ってコードのメモを書いていきます。まずはデモを御覧ください。 デモのURLはこちら URL : https://mankindinc.jp/wp01/programming/webgl/2.html ボックス生成 for(i=0;i<20;i++){ for(j=0;j<20;j++){ var geometry = new THREE.BoxGeometry(10,10,10); var material = new THREE.MeshNormalMaterial(); var cube = new THREE.Mesh(geometry , material); cube.castShadow = true; cube.position.set(i*10,0,j*10); scene.add(cube); } } iが縦軸、jが横軸になるように、2回ループを使って配置していきます。 座標を10ずつずらしているのは、ボックスのサイズが10だからです。 図示するとこんな感じです。 メインループの呼び方 (function mainLoop() { requestAnimationFrame(mainLoop); /* ここが毎フレーム呼ばれる */ renderer.render(scene, camera); })(); そうです「即時関数」です。即時関数で再帰的にメインループを呼びますので、ぐるぐるループして呼ばれます。 その際「requestAnimationFrame()」でフレームごとに呼ぶのがポイントですね。 処理が重たいなら、ここでフレーム調整するといいと思います。 メインループ内（１） → 全てのボックスに対して、forループで処理…
iOS8から、ついに解禁となったWebGL（3Dの描画エンジンへJavaScriptからアクセスできる機能）。 そこで、早速以前作ったプログラム（three.js＋WebGL）を動かしてみました。 機種はiPhone5（無印）です。iOS8の方はお試しあれ！(PCでも見れます) 結果・・・ 動いた！！！ 元プログラムのURL : https://mankindinc.jp/wp01/programming/webgl/1.html three.jsでロゴも動かしてみました。 three.jsのサンプルロゴも「Mankind,inc.」にして動かしてみました。 うむ。three.jsも動きますね。 更に、Unity5ではWebGLへの対応も決定しています。 夢が広がります。
前回のブログで、「enchant.jsでさくっとアルゴリズミックなゲームを作る時なんかに良さそうです。」と書いたCoffeeScriptですが、早速enchant.jsとの組み合わせで、代表的なアルゴリズムである「穴掘り法」（正確には穴掘り法に自分なりの解釈を加えたもの）を実装してみました。 分かったことですが、CoffeeScriptはやっぱりとってもコードが書きやすい。 ネスト（ループの入れ子）が多いところも書きやすい。 JavaScriptはカッコが多い言語なので、CoffeeScriptのようにカッコなしでかけるのは本当に気持ちがいいし、とても捗りますね。 やっぱり、こうしたものをコーディングするには丁度良さそうです。 デモはこちらです。URL : https://mankindinc.jp/wp01/programming/enchantjs/1.html 最初に考えたこと コーディングにかかる前に、迷路生成のアルゴリズムを実装する時にどのように組んでいったらいいか、ざっと考えてみました。 ・最初 ・・どれかひとつの座標をランダムで選ぶ（ただし、XYともに偶数偶数） ・・「基点の座標一覧」にそこを追加 ・・掘る ・掘る ・・ランダムに１方向選び、２マス先の座標が掘れるかたしかめる ・・掘れれば、「基点の座標一覧」にそこの座標を追加し ・・１マス先と２マス先を掘る ・掘れなかったら、それ以外の方向の２マス先の座標が掘れるかたしかめる ・・掘れれば、「基点の座標一覧」にそこの座標を追加し ・・１マス先と２マス先を掘る ・それでも掘れなかったら、それら以外の方向の２マス先の座標が掘れるかたしかめる ・・掘れれば、「基点の座標一覧」にそこの座標を追加し ・・・・「基点の座標一覧」から現在の座標を削除し、１マス先と２マス先を掘る ・それでも掘れなかったら ・・「基点の座標一覧」から現在の座標を削除し、 ・・もし「基点の座標一覧」にひとつでもあれば ・・・「基点の座標一覧」からどれかひとつをランダムで選ぶ ・・・その座標で掘る ・・「基点の座標」がもうなかったら ・・・終わり いよいよ実装へ digという関数はちょっと凝りました。結局、穴掘り法にちょっと変更を加えたものになりました。 numR = 39 numC = 39 posArr = [] pos = [] directions =[[2,0],[-2,0],[0,2],[0,-2]] # 地図生成————————— for row in [0…numR] pos[row] =…
CoffeeScriptだと、簡潔に（=短く）書けるからアルゴリズムや実装に集中できますね。 enchant.jsでさくっとアルゴリズミックなゲームを作る時なんかに良さそうです。 PythonやRubyの書き方のようなイメージになります。 基本 １、インデントが意味を持つかわりに、カッコが不要 ２、行末セミコロンが不要 ３、varでの宣言が不要（自動で宣言される→グローバル変数生成防止） for文 iを使えるfor文が.lengthとiを使ういつものやつになります。 # iを使えるfor文 arr = [“zero”, “one”, “two”] for val, i in arr console.log “#{i}: #{val}” # 0:one 1:one 2:two # foreach arr = [“one”,”two”,”three”,”four”] for num in arr console.log num #one two three four # 数字はこちら arr = [1,2,3,4,5,6,7] for i in [0..6] console.log arr[i] #1,2,3,4,5,6,7…