はてなブックマーク

WebGL Advent Calendar 3日目の記事です。初めて赤くなりました！ ブラウザで、Youtube上の曲を元にしてGLSL(WebGL)でリアルタイムビジュアライズします。応用編としてitunesの曲や自分の声でもできるようになりました。（無理矢理） Web Audio APIのアナライザーノードというのは使ったことがなかったんですが、mdnのデモを見ていて、結構感度が良かったのでゴニョゴニョやってみる。 ↓イメージ（canvasとvideoの二枚重ね） 音のソースとしてYoutube（実際にはマスターのオーディオ）を使い、背景でも流しつつ、Web Audio APIで取得します。 その上にcanvasを置いて、WebGL経由でGLSLのシェーダーを置いていきます。 最後に音域データを料理して、シェーダーに反応させます。ビートを刻んでいる感じになりました。 何はともあれ、de

地味に拡張しているp5.js。久々にウォッチしてみると2015/10/05のリリースでWebGL対応していて、それに伴い3Dのサポートもはじめたようです。他のライブラリには色々先を越されていると思いますが、いじってみました。 最後は、時間がなかったのでシンプルなUFO作って終了 ##基本テンプレート 見るところは公式サイトのチュートリアル、あとはリファレンスにはそれに載り切らない実装がありました。まずは基本テンプレを p5パッケージのサンプルファイルの、コメント冒頭にはShiffmanのサイトへのリンクが。宣伝乙であります // Learning Processing // Daniel Shiffman // http://www.learningprocessing.com // Example 1-1: stroke and fill function setup() { creat

ElectronでJSのゲームライブラリがサクサク動くかテストしてみました。 動くならパソコンのゲーム（exe,app形式）が作れる。 インストールや、基礎的な部分は以下の記事を参考にしました。 「Electronでアプリケーションを作ってみよう」 http://qiita.com/Quramy/items/a4be32769366cfe55778 ##結果 ぬるぬる動いた。スマホのWebviewの悪いイメージがあり、どこまで重いのに耐えられるかはわからないけれど、それは今後の研究課題かな。まーChromiumの方がずっと処理能力が高い気はしている。 Electronすごい、Chromiumすごい。 ##実行環境 ・Electron ・enchant.js（pixi.jsやcocos2d-jsでもOK） ##実行イメージ フォルダのルートに以下のファイルが並ぶ ・package.json

ゲームといえば弾撃ちかな！ってことで、 UnityとかCCActionとかいろんな便利なAPIに頼り切りな昨今、あらためて低レイヤーで汎用的な弾幕の打ち方を学んでいきます。 最後にvxとvyを各々エンジンのupdate関数に組み込めば動きます。 距離系 2点間の距離の差をもとにした弾撃ちです。 2点間の距離は、平方根を利用して出します。 具体的には「(AX - BX)の2乗 + (AY - BY)の2乗」の平方根が距離 もっと知るなら「2点間の距離の公式」 三平方の定理はどうしても避けられなさそうです http://www.geisya.or.jp/~mwm48961/math/distance1j.htm //targetX,Yがターゲットの座標、bulletX,Yが弾の座標 var targetX = 680; var targetY = 1200; var bulletX = 10;

高校数学がボロボロでも大丈夫です。（ もともと個人的にインプットし貯めていたものですが、書きなおして公開します。 地味ですが、派手な動きはこの地味な数式・概念がベースになってきます。 また、メディアアートとは言ったものの、ゲーム制作などにも役立つでしょう。 「ラジアンとは？」「サイン波を描く」「円軌道を描く」「弾幕（2点間の距離系&角度系）」「多角形を描く」「フラクタル」といったテーマです。 また、そのプレイグラウンドとしてp5.js（Processingのjs版）をご紹介します。2014年にリリースされたものでまだマイナーですがCodePenのような海外サイトでは人気が出つつあります。またProcessing公式プロジェクトなので安心感もありますね。ちなみに、Processing.jsとは別プロジェクトです。 ラジアンとは？ ・ラジアンは単位 角度についてのもう一つの単位です。 角度とラ

いまどこ？ 配列に関する章です 1 . 遅すぎたUnderscore.js入門 - 全体像 2 . 遅すぎたUnderscore.js詳述 - Collections編 3 . 遅すぎたUnderscore.js詳述 - Arrays編 ←いまここ 4 . Functions 5 . Objects 6 . Utility 7 . Chaining この章の全体的な感想 最初は「配列かー、JS標準機能で十分と思ったけど、どうしてやるんだろ？」てなくらいに思っていたのですが、見て行くうちにその背景には_.initialでargumentsオブジェクトを配列として捉えることとか、色々深そうな話があると思ったのですが、掘り下げはそこそこにしてAPIを淡々とみていきます。 あとまぁ、ぶっちゃけこれはやりすぎじゃね？っていう逆に煩雑だなって思うところもありましたが、やりすぎるのがUnderscore

いまどこ？ ###基本の関数をひとつずつ見ていく章です 1 . 遅すぎたUnderscore.js入門 - 全体像 2 . 遅すぎたUnderscore.js詳述 - Collections編 ←いまここ 3 . 遅すぎたUnderscore.js入門 - Arrays編 4 . Functions 5 . Objects 6 . Utility 7 . Chaining 前回でUnderscore.jsの全体像を見終わったので、今回からひとつずつAPIをみていきます。 基本的に本家サイト(underscorejs.org)の章立てに合わせていきたいと思います。 この章は最初が重たいですが、だんだんと被ってくるので最初を抜けたら楽になります。 ##注意点 本家のコードを加筆・書き換えしたり、メタファー（たとえ）としてあえて厳密でない言葉で書いたりしていますのでご了承願います。 また、重複す

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

いまどこ？ 1 . 遅すぎたUnderscore.js入門 - 全体像 ←いまここ 2 . 遅すぎたUnderscore.js詳述 - Collections編 3 . 遅すぎたUnderscore.js入門 - Arrays編 4 . Functions 5 . Objects 6 . Utility 7 . Chaining Underscore.jsで何ができる？（私見） 非常にざっくり言うと、Underscore.jsはJavaScriptの表現力を高めることができる便利関数のライブラリです。その先に深淵なテーマもあるようですがひとまずは考えないでおきます。 たとえば配列を一つ飛びに足していったり、シャッフルしたり、従来ではアルゴリズムを組まなきゃいけないかったものが最初から提供されているという感じ。あとは高階関数（これは個人的にまだ真髄を分かっていないと思います。ぶっちゃけ勉強中

9301 49297 233280 この数字に見覚えのある奇特な方はいますか？ まさかいないですよね・・・ Math.random()は毎回違う結果が出る（ != 参照透過） 最初に確認しておきたいのは、参照透過とはざっくり言うと「同じ環境では毎回同じ結果になる」ということです。 しかしMath.random()はたしか時間をもとにしてるので同じ環境でも時間が違うから同じ結果にならないということですね。（同じ時空に戻れば同じ結果になると思いますがｗ） 関数型言語が特にQiitaで盛り上がっていますよね。 そこにちょっと気になった文章がありました。 Math.randomは呼び出すごとに異なる値を返す可能性があるので参照透明ではありません。 from 関数型言語のウソとホント たしかに・・・ そうきたら・・・ （ ´_ゝ`） < JSでも参照透過な乱数を見てみたい... 探してみた いや、も

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? まだまだドキュメントが少ないCocos2d-js(v3) 比較的長くて読めるチュートリアルをまとめてみました。（随時更新予定） マスト：公式の実装サンプル 性質上全てのサンプルコードのソースコードが見えるのでこれは穴場です http://cocos2d-x.org/js-tests/ chromeデベロッパーツールとかで見れば分かりますがjs-tests/src/以下には各々のjsファイルがあるのでソースコードをみてみましょう。 ChromeデベロッパーツールのSources検索では複数ファイルをまたがって検索できるのでレシピ集として使