Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
ゲームエンジンや3Dソフトウェアを利用して高度な表現ができるこの時代でも、プリミティブな描画や動き、アルゴリズムから学べることは多い。それらをJavaScriptで書くクリエイティブコーディングという形で学べる手引書が本書となる。
ジェネラティブアートという言葉をご存知でしょうか? アルゴリズムによって作られる芸術作品を指す名称です。Pinterestで「generative art」と検索すると静止画、動画ともにたくさんの作品を見ることができます。 無機質さを感じさせるものもあれば、まるで生きているように感じる作品もあります。創作者たちはどのようなところから着想を得ているのでしょうか? 彼らの中には数学的な幾何学模様や物理現象、果ては生物が織りなす複雑なパターンをコンピューターで再現することにより作品を作る者もいます。 本記事では特に「生物」に焦点を当てます。生物の複雑な営みを紐解いた背景や、それをアルゴリズムに落とし込むことで可能になった表現を紹介します。 本記事を読むことで日常に潜むあらゆる現象が芸術の種に見える喜びを感じていただければ幸いです。 サンプルはHTML CanvasとJavaScriptで作成して
レコメンド(推薦システム)に関して素晴らしい記事があったので訳してみました。訳に難があるが、そこはご勘弁ください。 プログラム実行してみると理解できると思います。入門者に打って付けの記事です。 以下、本文。 インターネットの世界はレコメンドで溢れていますね。 Amazonのように商品を購入するeコマース・サイト、Facebookのようなソーシャルネットワーク、YoutubeやNetflixのようなビデオ/映画サイトなど。これらのサイトに共通するのは、あなたに新しいものを推薦するために、映画、商品と友人などの過去のデータを使うことです。 この記事では、レコメンド機能がJavaScriptで、どのように動くか簡単に紹介します。推薦システムを実現するための、異なるアプローチも見ていきます。最終的にはアルゴリズムを切り替えただけで、結果を出力できるようにします。映画評論家の小さいデータセットと、M
今回はJavascriptで、ブロックチェーンのデータ構造を実装します。ブロックチェーンのデータ構造を実際に作ってみると、その堅牢性が理解できると思います。nonceを求めるマイニング・アルゴリズムも実装します。 なお、P2Pでノード間で同期を取ったり、コンセンサス・アルゴリズムで合意形成を取るところまでは、実装しませんので悪しからず。 ブロックチェーンは「万能薬」でありません。他のプログラムと一緒で、あくまで、アルゴリズムを効率的に実現するデータ構造です。 分散環境下で、セキュアにデータをもつためのデータ構造とも言えます。 つまり、手段です。導入したからといって、問題が自動的に解決したりしません。 それでは早速、作ってみましょう。実際に作業するファイルは2つです。 mkdir project cd project npm init touch blockchan.js touch tes
ゲームなどのコンテンツにおいて、「当たり判定」から逃れることはできません。オブジェクトとオブジェクトが衝突したかどうかという判定は、インタラクティブコンテンツにおいて最も重要な部分になるからです。 当たり判定の実装自体は難しくありません。ですが、素朴な実装ですと、対象となるオブジェクトが大量である場合に、十分なパフォーマンスが出ません。これはオブジェクトの多い、現代的なゲームでしたり、弾幕シューティングなどを作るときに大きな障害となります。 この記事では、大量のオブジェクトの当たり判定を処理する、効率的な方法について紹介します。 まずは素朴に実装してみる 当たり判定の処理を語るには、ある程度ゲームの骨組みのようなものが必要になってきます。もちろんクラスなどを使わないベタ書きでもよいのですが、大変読みにくくなってしまいます。ですので、今回は、まず簡易的なゲームエンジンのようなものを作って、そ
2015年12月17日、Google Chrome の JavaScript エンジン(処理系)である V8 の公式ブログにて、 JavaScript の標準的な乱数生成APIである Math.random() の背後で使われているアルゴリズムの変更がアナウンスされました。 Math.random() 関数は JavaScript を利用する際には比較的よく使われる関数ですので、親しみのある方も多いのではないかと思います。 新たなバグの発見や、従来より優秀なアルゴリズムの発見によってアルゴリズムが変更されること自体はそれほど珍しくはないものの、 技術的には枯れていると思われる Math.random() のような基本的な処理の背後のアルゴリズムが変更されたことに驚きを感じる方も少なくないかと思いますが、 それ以上に注目すべきはその変更後のアルゴリズムです。 実際に採用されたアルゴリズムの原
こんにちは、あゆめぐです。 今回はダンジョン生成の基本部分。 アルゴリズムそのまま実装したものの状態まで書きました。 はい、相変わらずjavascriptです。 どこかのタイミングでいい加減にc#にしないとな〜と思うんですがjavascriptそのままいろいろ持ってけて便利すぎるんだ〜。 ほら私が好きなActionScript3.0もenchant.jsにしてもjavascript系だからね。 ##考え方 ダンジョンマップを生成するアルゴリズムの解説 こちらの二分割を繰り返す方法の方です。 しかしながらこの実装だとアルゴリズムばればれなのでここからいろいろカスタマイズしないと。 均等に分割する方法はまだ作成していないので気が向いたときにやってみようかと思います。 他にもダンジョン生成にはいろんなアルゴリズムがあって 迷路自動生成アルゴリズム 上記サイトのような本当にダンジョンというのもあり
ドロネー図 。2年前くらいに Strataの一連のシリーズ を見てからずっとアルゴリズムが気になってたので、ちょっと時間ができた隙に調べてjavascriptで動かしてみた。これであってるかどうかわからないし、Strataはさらにここから3Dになるので全然違うんだけど、なんとなくこういう仕組みだったのかなぁと思えるくらいにはなれたので非常に勉強になった。 非表示にしているけど後ろに敷いている画像はこんな感じです。 1 jsで画像から色を取得する方法とかも知らなかったけどやってみたら案外なんとかなったので良かった。 動かしてから、もしや・・・と思ってググったら、既にD3というライブラリで簡単に実現できる事を見つけてしまった。 Delaunay Triangulation これを使えばたったこれだけでできたみたい。
A collection of concrete examples for various game mechanics, algorithms, and effects. The examples are all implemented in JavaScript using the Phaser game framework, but the concepts and methods are general and can be adapted to any engine. Think of it as pseudocode. Each section contains several different examples that progress in sequence from a very basic implementation to a more advanced impl
「ゲーム開発初心者のために何かできないか」と思っていたゲーム開発者のジョン・ワトソンさんが、ゲーム開発フレームワークの「Phaser」を使いJavaScriptでゲーム開発に役立ちそうな動きやアルゴリズム、エフェクトを作成し、ソースコード付きで「Game Mechanic Explorer」にて無料公開しています。歩行やジャンプといったゲームの基本的な動きから、追跡型ミサイルや光源による影など、さまざまな動作は、ソースコードが分からなくても操作するだけでも楽しい気分になれます。 Game Mechanic Explorer http://gamemechanicexplorer.com ゲームの基本的な動作やエフェクトを確認するには、上記URLを開いて、画面左側にある「Choose」の横にある下向き三角をクリックします。クリックすると「Walking and jumping」「Bullet
TinySegmenterはJavascriptだけ書かれた極めてコンパクトな日本語分かち書きソフトウェアです。 わずか25kバイトのソースコードで、日本語の新聞記事であれば文字単位で95%程度の精度で分かち書きが行えます。 Yahoo!の形態素解析のように サーバーサイドで解析するのではなく、全てクライアントサイドで解析を行うため、セキュリティの 観点から見ても安全です。分かち書きの単位はMeCab + ipadicと互換性があります。 デモ 日本語の文章を入力し、解析ボタンをクリックしてください。 ダウンロード TinySegmenterはフリーソフトウェアです. 修正BSDライセンスに従って本ソフトウェアを使用,再配布することができます. Download TinySegmenter version 0.2 使い方 <script type="text/javascript" src
まだやってたのか、と言われてしまいそうですが、おねえさんが計算にかけた時間と比べればまだまだです。 『フカシギの数え方』 おねえさんといっしょ! みんなで数えてみよう! この動画で出てくるおねえさんのコンピュータを作ってみた、というお話。 おねえさんのコンピュータからアクセスできます。 検索アルゴリズム HTML+CSSでコンピュータの画面を再現してみました。Javascriptを組むより、そっちの方に時間がかかった気がする。 経路の描画にはCanvasを使ってます。 この問題は自己回避歩行(Self-avoiding walk)と呼ばれるものらしいです。 単にグラフ上を移動するだけなので、小さいなサイズなら単純な深さ優先検索(DFS)で解けます(大きなサイズで何が起こるのか・・・それは動画で)。 実装では、DFSによる検索プログラムをWeb Workerを使って走らせ、スタートとゴールを
Endless Invention http://mohayonao.herokuapp.com/invention 何かを自動生成するようなプログラムを書くときマルコフ連鎖を使いたくなることは多いと思う。で、それ自体はそんなに難しくないんだけど、大体微妙な感じに仕上がってしまうので、なかったことにしてしまうことが多い。でも今回は諦めずに調整して比較的うまくいった。 工夫したところ 八分音符は十六分音符ふたつといった具合に音の長さをいったん揃えている ラが鳴っているときはミが鳴っていることが多いみたいな、二声がどう重なっているかも調べた。先の音長の正規化を行っているので簡単だった。 正規化を行っているため、頻繁に同じ音の繰り返しが発生する。同じ音が続いたら無視する?ベロシティ下げてMIDIディレイっぽくする?今回は後者 ファミコンっぽい音 半分現実で半分夢みたいな雰囲気を出すためにエフェク
先週のエントリー「この機会にマスターしようぜ、正規表現、構文図、オートマトン」において、正規表現とオートマトンの理屈は説明しました。んじゃ、適当な正規表現に対応するオートマトンを作ってみましょう。 非決定性オートマトンはめんどくさいので決定性オートマトンにします。正規表現から作ったオートマトンが非決定性になってしまったときは、がんばって決定性オートマトンに変形するかあきらめるかしてください。 例題となる正規表現とオートマトンは、「Erlang実験室:状態遷移を書くのはこんなに簡単」で使ったものをそのまま流用します。 正規表現: (a, a?, b*, c) 図と表のなかで、EOSは End Of String のマーカー、◎は終状態です 遷移表: 0から3までの各状態について、入力ごとの遷移先は次の通り。×はエラーです。 状態 文字a 文字b 文字c EOS その他 0 1 × × × ×
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く