OpenSiv3DでPolygonクラスを使ってみる。

OpenSiv3Dでは、Polygonクラスで簡単に多角形が作れます。以下のように初期化時に頂点を指定してdrawメソッドで描画したり、

または、頂点配列を別途用意して、Polygon(頂点配列).draw();という書き方もあります。またdrawFrameメソッドを使うと塗りつぶさずフレームのみを表示できます。

p5.jsでライフゲーム

p5.jsでライフゲームを作成しました。

剰余による回り込み

二次元配列のboard[0][0]の場合は、近傍(neighbor)を調べるときに、board[-1][-1]のようになりエラーになってしまいます。このような場合は、(カラム数+現在のカラム-1%カラム数) のように書くと、カラム数が20だったらboard[19]となってくれます。一次元配列でもこの剰余のテクニックを使うと、配列をリングに見立てることができるので、非常に便利です。

ライフゲーム自体の実装は、着実に進めていけば簡単です。

 

p5.jsで一次元セルオートマトン

p5.jsで一次元セルオートマトンを作ってみました。ルール関数を作成し、0-255でルールを生成できるようにしました。ルール生成関数は、ビット演算とシフト演算んでもっと綺麗な実装にできそうです。

剰余による回り込みの実装

また、(配列の長さ+現在のインデックス)%配列の長さ というテクニックを使い、配列の0番目で、左端の値の場合は、配列の最後である右端の値を取得するようにしました。

 

 

 

p5.jsで加算ブレンド

p5.jsでは、blendMode関数を指定することで簡単に加算合成ができます。

p5.jsで絵文字(emoji)を表示するのは簡単

p5.jsはブラウザーベースなので、絵文字をコピーして文字としてそのまま表示できます。絵文字が使えると、単純な文字を表示するだけでも楽しくなるのでよいですね。

 

p5.jsでMatrix Sequencer(マトリックスシーケンサー)を作ってみました。

マトリックスシーケンサーは、五音音階(ペンタトニックスケール)で適当に音を鳴らしても不協和音にならずに良い感じのちょっとした曲が作れます。tonematrixというFlashのアプリがありますが、このような見た目と綺麗な音ができれば理想ですが、ひとまずは、マトリックスシーケンサーとして動作するようにしました。

http://tonematrix.audiotool.com/

p5.jsを使うと、セルを用意するのと、音を出す部分は数個のAPIを呼び出すだけなので、ソースコードもかなりすっきりしていて120行ぐらいです。マトリックスシーケンサーが作れると、これを応用してリズムマシンや音ゲーを作れそうです。

ソースコード

https://github.com/dev001hajipro/matrix_sequencer

デモ

https://dev001hajipro.github.io/matrix_sequencer/

簡単にvscodeでp5jsの入力補完をする方法

はじめてプログラミングをしてみた人でも設定できるp5jsの入力補完の方法です。マイクロソフトが無料で開発しているvscode(=Visual Studio Code)エディターを使うとp5jsの補完が簡単にできます。

tsファイルをダウンロード

以下のリンクから、p5.d.tsファイルとp5.global-mode.d.tsファイルをダウンロードして、プロジェクトのフォルダーに配置します。

https://github.com/LujunWeng/demos-p5js/tree/master/typings/p5js

tsファイルをダウンロードしたところ

コメント行を書く

sketch.jsのはじめの行に上記のコメントを書きます。あとは、createなどを書くと入力補完ができるようになります。

入力補完ができた!

vscodeの入力補完は優秀で、引数の値を入力すると、その細かい内容まで以下のように表示してくれます。

技術的な話

tsファイルはTypeScriptの型定義ファイルで通常TypeScriptで使われますが、TypeScriptはJavaScriptのスーパーセットなので、.jsファイルも混在可能です。そのためふぃあるのコメント行で型定義ファイルを指定すると補完が可能になります。このファイルの英語を日本語に直せば単純に変更できます。github上でTypeScriptの補完に関しても議論されているようです。現状、npm の@typesでこの型定義ファイルがダウンロードできないので、今後p5.js団体が管理してくれるとありがたいです。

まとめ

すべて手入力は面倒なので、簡単に補完する方法をまとめました。単純にファイルをダウンロードして、コメント行を追加するだけなので、プログラマーでない人でも簡単に導入できると思います。

 

JavaScriptでCHIP-8をプログラミング

JavaScriptでCHIP-8プログラミング言語を実装してgithubにアップロードしました。CHIP-8は、1970年代に作られたインタプリタ言語で、仮想マシンを持っています。英語圏では、ゲームボーイやファミコンのエミュレーターを作る前にもっと簡単なCHIP-8を作ってみる場合があるようで、githubにも数百というソースコードがありました。日本語の情報は少ないですが、命令が35個で、他のかたのソースコードとWikipediaを確認すれば実装していけます。

 

ソースコード

https://github.com/dev001hajipro/chip8

デモ

https://dev001hajipro.github.io/chip8/

実装の参考資料

http://www.piece-me.org/chip8-20040328.txt

How to write an emulator (CHIP-8 interpreter)

https://en.wikipedia.org/wiki/CHIP-8#Opcode_table

EmscriptenとSDL2でSDL_LockTextureを使ったピクセル描画

SDL2で、SDL_LockTextureを使ってピクセル書き込み時にロックすることで、ゲームなどでも高速にピクセル描画ができます。このサンプルでは、Context->pixelsはバッファとして用意しましたが、memcopyなどで使う事はしていませんん。CreateTextureでテクスチャーオブジェクトを作るとメモリーも確保されるので、SDL_LockTextureでロックをして、for文で直接値を書き換えています。

ピクセルは、RGBAを8+8+8+8=4bytesで保持しています。ですがCreateTextureは単純なメモリブロックなので、そのままfor文でループすると、1バイト単位つまり、R,G,B,Aを別々に処理します。通常色を変更したい場合は、ピクセル単位で操作したいので、一度キャストをしています。