FMS_Cat

はじめに

本記事は、 NCC Advent Calendar 1日目の記事です。

NCCとは、明治大学の中野キャンパスを拠点とする、技術系知見の交換を目的としたサークルです。 NCC Advent Calendar では、技術ネタを中心に、12月1日から12月25日までNCC部員で記事を書いていきます。

こんな感じ

見た目はしょぼい。

概要

本記事は、テトリスを実装した、という話です。 テトリスを実装するのは今回が初めてでしたので、実装の中で面白かった知見を書き残しておこうと思います。

本記事では主に以下の点について紹介したいと思います。

ルールについて

ランダマイザ

回転アルゴリズム

ゲームの難易度

ルールについて

テトリスには様々なルールがあります。 このルールというものは、例えば、回転・移動・落下アルゴリズム、Next表示などの描画処理やHoldの有無などを定義するものです。 2000年代以降にリリースされたテトリスの多くは、ザ・テトリス・カンパニーという悪の組織によって制定された ワールドルール というものに基づいています。 しかし、ワールドルールにもテトリミノを無限に回せてしまうなどの欠陥が存在したり、ワールドルールとのゲーム性の差別化・そもそもワールドルール制定前にリリースされたゲームである、などの理由で、ワールドルール以外を採用しているテトリスもあります。

TGMルールとは

今回扱ったテトリスのルールは、 TGMルール というルールです。 TGMルールは、Tetris: The Grand Master（以下TGM）というゲームで採用されているルールで、マニア御用達ルールでございます。 テトリスでは通常、プレイを続けているとレベルが上昇し、テトリミノの落下速度が徐々に速くなっていきます。 TGMでも同様にテトリミノの落下速度が徐々に速くなっていきますが、ある程度のレベルに達した時点で、落下速度が無限（！！）になります。 これは 20G という愛称で有名で、1フレームで20グリッド落ちてくることからこう呼ばれています。 この速度になると、空中でテトリミノを回転・移動することは一切できなくなり、プレイヤーはフィールドの上でミノを滑らせたり転がすことによってミノを積んでいかなければなりません。ぎゃ〜。 TGMルールでは、この20Gの状況下でのゲームプレイを最大限面白くさせるための様々な工夫があります。

ランダマイザ

Ref: http://tetris.wikia.com/wiki/TGM_randomizer

ランダマイザは、テトリミノの出現順番を決定するシステムです。 O,S,Z,J,L,T,Iという7種類のテトリミノから1つを選択するだけの簡単なアルゴリズムです。 「そんなの普通に0から6の乱数生成すればいいじゃん」と思うかもしれませんが、実際はそれではゲームとしてかなり面白くなくなってしまうようです。 具体的には、同じテトリミノが連続で出てきてしまったりして、地獄になります。

TGMルールで採用しているランダマイザは以下のようなものとなります。

過去に出したテトリミノを記録しておく長さ4のキューを作成する

最初は「S,Z,S,Z」で埋めておく

乱数を生成、O,S,Z,J,L,T,Iのうちから1つを引く

上で定義したキューのどれかとかぶった場合、再抽選

かぶらなかった場合、引いたものを出す

6回再抽選してもまだかぶっていた場合、仕方なくそれを出す

一番最初は「S,Z,O」は絶対に出さない

出したものを上のキューに挿す

このランダマイザは、直近4つに出てきたテトリミノを極力出さないようなアルゴリズムとなっています。 例えば、キューの中にダブりのテトリミノが一つもなかった場合、直近4つに出てきたテトリミノを再び出してしまう確率は ( 4 / 7 ) ^ 6 ≒ 3.5% 程度となります。 また、最序盤にはS,Z,Oといったミノを出にくくすることで、Hangingと呼ばれるフィールドを構築しづらいような状況を防ぐようになっています。

回転アルゴリズム

Ref: http://tetris.wikia.com/wiki/TGM_Rotation

回転のアルゴリズムは極めて大変そうですが、想像よりは全然楽でした。

TGMルールの回転法則は、以下のような特徴があります。

I以外のテトリミノは、常に最底辺の高さが変わらないよう回転する

I以外は回転時に壁を左右に1グリッド蹴れる

ただし、テスト順番は「その場」、「1グリッド右」、「1グリッド左」

J,L,Tに関してはある条件下では回転できない

Iは壁を一切蹴れない

縦には床を蹴れない

処理の順番は「回転」「移動」「落下」

これらの法則から、実装手法は以下のようにしました。

すべてのテトリミノに対して、4x4配列に全回転状態のテトリミノ配置を入れておく

J,L,Tは4状態

S,Z,Iは2状態

Oは1状態

回転時

J,L,Tは特定条件下で弾く

その場でテトリミノを回転させ、フィールドと重ならないかテスト、成功なら回転

Iはこの時点で弾く

重なった場合、右に1グリッドずらして再テスト、成功ならその位置で回転

重なった場合、左に1グリッドずらして再テスト、成功ならその位置で回転

それでも重なった場合、回転失敗

という実装になります。 ポイントは、最初にすべての形を配列に入れておく点と、いくつか例外処理を回転中に行うことですね。

ゲームの難易度

TGMルールにおいて、ゲームの難易度は主に4つのパラメータで表されます。

Gravity

その名の通り、テトリミノの落ちてくる速度

64フレームで1グリッドから1フレームで20グリッド（20G）まで

Lock Delay

テトリミノがフィールドに着地してから固定されるまでの時間

この時間はテトリミノの最底辺が落下するたびにリセットされる

ARE

テトリミノがフィールドに固定されてから次のテトリミノが出現するまでの時間

ライン消去時は別のパラメータが割り当てられる

DAS

左右を入力してからオートリピートが始まるまでの時間

オートリピート：左右を一定時間入力し続けることで、同じ方向に連続して入力される機能

オートリピート発動時は毎フレーム1グリッド横に移動する

このうち、ゲームの難易度に最も関係するパラメータはGravityです。 しかし、Gravityはゲーム中盤で最高値である20Gに到達してしまいます。 そこで、ゲームはLock DelayやAREといったパラメータを短くし、操作時間や思考時間を短く要求することで、難易度を上げています。 またDASは、Lock Delayが短い状況下では、素早い操作が必要となるため、重要なパラメータとなっています。

おわりに

ちなみに僕はテトリスはヘタクソです。 TGMでいうと初代でS2ランクくらいまでは行ったことがあります。

ソースコードについて

概要

やったこと

MIDIキーボードから3Dプリンタを制御した

リアルタイムで鳴らした

二音ポリで鳴るようにした

やらなかったこと

ラーメン食べなかった

動画

【世界初？】３Ｄプリンターをリアルタイムでポリフォニック演奏できるシステムが完成しました https://t.co/6zftvsgc7q

— HomeiMiyashita (@HomeiMiyashita)

April 15, 2016

高音だとかなり高速に動きます。ちゃんと和音も出せる！ @fms_cat のスピーディな実装に脱帽！ https://t.co/BpfsKu4HbB

— HomeiMiyashita (@HomeiMiyashita)

April 15, 2016

Midi Keyboard to 3D Printer (via Processing) pic.twitter.com/xGDwFGjzmC

— FMS_Cat (@FMS_Cat)

April 15, 2016

ソースコード

https://github.com/FMS-Cat/midiKeyboardTo3dPrinter

つかったもの

BonsaiLab BS01+ (3Dプリンタ)

MicroKORG (MIDIキーボード)

YAMAHA UX16 (MIDIインタフェース)

MacBook Pro

Processing

きっかけ

この度私は、宮下先生の研究室に配属されることとなりました。 宮下研では、昨年度から何故か3Dプリンタの研究が盛んであり、Fab系でなく音楽やプログラミングに興味のある私はいくらか肩身の狭さを感じていました（感じていない）。

ある日、宮下研のチャットに「MIDIをG Code（3Dプリンタを制御するためのプロトコル）に変換するWebサイト」というものが流れてきました。どうやら、3Dプリンタで音楽を演奏できるようになるそうです。これはヤバイ。

とりあえずMIDI

「MIDIをG Codeに変換するWebサイト」。 http://en.homeconstructor.de/converter-convert-music-in-g-code.html

とりあえず、 Bad Apple! のMIDIを流し込んであそんだ。

3DプリンタでBad apple‼︎ https://t.co/qTv2cwFRGd

— Saraha (@saraha_fms)

April 15, 2016

チップチューンに用いられるトリックを使ってハモらせた。

チップチューン手法によってパワーアップしました https://t.co/UernGm0lL8

— HomeiMiyashita (@HomeiMiyashita)

April 15, 2016

xy軸（ヘッドの移動）のモータ音で演奏しています。 z軸（プラットフォームの移動）のモータ音に関しては、ヘッドと同じ速度で移動させても周波数が異なっていたため使いませんでした。

リアルタイムで演奏する

いよいよここまでくるとリアルタイムで演奏したくなる… ということで、3Dプリンタおねえさん( @saraha_fms )の力をお借りして、G Codeの勉強をはじめました。 実装言語は Processing としました。Processingナメんなよ。

MIDI => Processing

とりあえず、MIDI => Processingの部分は、The MidiBus で処理します。非常に使いやすいライブラリです。

Processing => 3D Printer

どうやら、Processing => 3D PrinterにおけるG Codeとやらの転送には、シリアル通信を使うと良いらしい（ハードウェアとネットワークには本当に疎いです）。Processing標準のSerialライブラリでいけるようです。

今回使ったG Codeの命令は2つ。

G1 X* Y* Z* F* ヘッドおよびプラットフォームを移動させるための命令。 X, Y, Zで目的地となる座標を決定。単位は [mm] らしい。 Fで移動速度を決定。単位は [mm/min] らしい。なんだその微妙な単位。

G28 ヘッド・プラットフォーム位置を初期位置に戻すための命令。 G1 でもできそうだったが、こっちのほうがイニシャライズ感があったので使いました。

Note On / Offがムズい

上記の通り、 G1 は「目的地を決めて一定の速度で移動する」という命令なので、途中で「ストップ！」なんてことができないのです。これは、リアルタイムで演奏するという用途にはとても似合わないシステムであります。 結局、キーを押している間は、シリアルで「ちょっとだけ動け」という G1 を一定時間（今回は50ミリ秒）ごとに送信し続ける、という手法を取りました。

2音ポリがムズい

命令は送った瞬間に実行されるとは限らず、バッファがキューされていく形となるので、二音を同時に鳴らしたい場合は「ナナメに動け」という G1 を送ってやらなければなりません。 さらにこのとき、速度はx, yそれぞれ個別に指定できませんので、 sqrt( x方向の速度^2 + y方向の速度^2 ) としてやる必要がありました。

できた

やったー

しばらくソフトウェアで完結するプログラミングばかりやっていて、現実世界のモノをプログラミングで動かす機会がなかったので、思った通りにモノが動くことにすごい興奮しました。当然3Dプリンタのハックなんてやったこともなかったため、一歩進むごとに大喜びしてしまいました。

音について

肝心の音なのですが、まあプリンターのモーター音です（当たり前ですが）。 当然、3Dプリンターは本来は音を出すための機械ではないですので（ですよね？）、ときどき音程が不安定に鳴るのがおもしろいです。先生これをは「メロトロン的」と形容していました。

また、2音ポリで鳴らせるようにしたのですが、ある音の組み合わせ（どこかのオクターブのGとCなど）において音が倍音に埋もれてしまう（？）という現象が発生していました。 ある意味、機会的な不安定さがあって個人的には好きです。

おまけ

最後にピッチベンド実装した。

頭おかしい（褒め言葉） pic.twitter.com/XLseXb8eN9

— きりん (@kkrnt)

April 15, 2016

PS

3Dプリンタおねえさんからいただいた、Processingで簡単にプリンタを制御するためのサンプルコード。

この記事は NCC Advent Calendar の25日目です。

何を書くか非常に迷いました。 当初は 作曲のノウハウを共有する ことを考えていましたが、結構フィーリングの部分も多くて他人に説明することはとても難しい。 では、何をすれば他人に、特にFMS生に作曲法を伝授できるか？と考えたとき、僕は気が付いたら Processingで作曲を開始していました ……

ということで

この記事では、Processingで作曲をします。 ただし、Processing実行時に音が鳴るわけではなく、 wavファイルとして出力 します。 さらに、この記事では 一切のライブラリを使用しません 。 生のProcessingよりフルスクラッチで様々な処理を行っていきます。 難易度はちょっぴり高めですが、電子音楽に関する様々な知識が身についてとても良いと思いますよ！

とりあえずwavを吐く

とにかく、Processingからwavファイルを吐き出せるか試してみようよ！ ここでは、 arrayToWav という、 配列を投げるとwavファイルを出力してくれる関数 を作ります。

音ってなんだ

そもそも音ってなんでしたっけ？ 音声信号を格納するためのファイルフォーマットは数多く存在します。 wavはもちろんのこと、mp3やogg、flacやwvなどがありますよね。 これらが格納しているデータはどれも 一次元配列 です。 コンピュータの音はスピーカー（とかヘッドホンとか）を通じて僕たちの耳に届きますが、このとき、スピーカーを操っているのは時間の次元をもつ信号です。

じゃあ今回もmp3やoggでもよいじゃん、と思ってしまうかもしれません。 しかし、wav以外のほとんどの音声信号形式はどれも圧縮されていて、直感的に読めるファイルフォーマットではありません。 対してwavファイルは、ヘッダから先は配列の値をファイルのバイナリに直接書き込むだけでよいので、プログラミングで扱うには非常に簡単なファイルフォーマットです。

また、ステレオ（二つのスピーカーから別々の音が鳴る）信号の場合は、信号が２つ必要なため 一次元配列も２つ必要 です。 wavファイルなどにもしっかり２つ分の音声信号が格納されています。 今回もステレオの音楽をつくりたいので、配列は２つ用意します。

では、どんな長さの配列が必要なの？と思いますが、ななななんと、 44100 * 再生時間 もの長さの配列が必要となります。ひょえ～！ 一般的なCDに格納されている音声信号は、1秒間の音のために44100サンプルを記録します（このサンプル数を サンプルレート と呼びます）。 それと同じように音声ファイルを作ろうとすると、こんな莫大な配列が必要になってしまうのですね。

wavファイルヘッダ

wavを含め、だいたいファイルの先頭には ヘッダ というものが付きます。 これは、ファイルの実データを格納する前に、ファイルの扱い方を説明するためのデータを格納する箇所ですね。

wavファイルは数値を リトルエンディアン で格納します。たとえば、32bitの整数を格納しようとした場合、iをオフセット、vを格納する数値としたとき、以下のようなプログラムで実現できます。

data[ i + 0 ] = byte( v ); data[ i + 1 ] = byte( v >>> 8 ); data[ i + 2 ] = byte( v >>> 16 ); data[ i + 3 ] = byte( v >>> 24 );

以下はwavファイルの構造例です（信号の長さが10000の場合）。僕も暗記しているわけではないので、こんなデータが必要なのか～とか思っていただければ。

オフセット 長さ バイナリ データ 意味 0 4 52 49 46 46 "RIFF" RIFF ヘッダ 4 4 64 9C 00 00 40036 これ以降のファイル長、信号長 * 4 + 36 8 4 57 41 56 45 "WAVE" WAVE ヘッダ 12 4 66 6D 74 20 "fmt " fmt チャンクヘッダ 16 4 10 00 00 00 16 fmt チャンク 長さ 20 2 01 00 1 フォーマットID 22 2 02 00 2 チャンネル数 24 4 44 AC 00 00 44100 サンプリングレート 28 4 10 B1 02 00 176400 バイト/秒（サンプリングレート * 4） 32 2 04 00 4 ブロックサイズ 34 2 10 00 16 ビット/サンプル 36 4 57 41 56 45 "data" data チャンクヘッダ 40 4 40 9C 00 00 40000 data チャンク 長さ（信号長 * 4） 44 40000 --- --- 実データ

実データ

ステレオのwavは信号を

1サンプル目、左チャンネル（2byte）

1サンプル目、右チャンネル（2byte）

2サンプル目、左チャンネル（2byte）

2サンプル目、右チャンネル（2byte）

...

のような感じで格納します。 先程も言ったように、wavファイルはリトルエンディアン形式で値を格納していきますよ。

16bitと聞いて不思議に思われるかもしれませんが、一般的なwavファイルは1サンプルを -32768 - 32767 の範囲でしか格納していません。 CDも同様です。 たかが 65536 段階の高さしかもたない信号でここまできれいに聞こえてしまうのですから、人間の耳なんてチョロいですね！

関数作るぞ～

関数の名前、型、引数は void arrayToWav( float[][] _wave, String _name ) とします。

_wave : [ 左チャンネルの信号, 右チャンネルの信号 ]

_name : 保存ファイル名

返り値: なし、ファイルをスケッチフォルダ内に指定ファイル名でセーブする

信号はfloat型で、 -1.0 - 1.0 の範囲で格納したものを投げます。 float型の信号をこの関数内で -32768 - 32767 の範囲のintに変換し、バイナリにぶち込んでいきます。

以下が実際のコードとなります。少し長いです…

void arrayToWav( float[][] _wave, String _name ) { int len = _wave[ 0 ].length; byte[] file = new byte[ 44 + len * 4 ]; // "RIFF" file[ 0 ] = 'R'; file[ 1 ] = 'I'; file[ 2 ] = 'F'; file[ 3 ] = 'F'; // filesize - 8 file[ 4 ] = byte( 36 + len * 4 ); file[ 5 ] = byte( ( 36 + len * 4 ) >>> 8 ); file[ 6 ] = byte( ( 36 + len * 4 ) >>> 16 ); file[ 7 ] = byte( ( 36 + len * 4 ) >>> 24 ); // "WAVE" file[ 8 ] = 'W'; file[ 9 ] = 'A'; file[ 10 ] = 'V'; file[ 11 ] = 'E'; // fmt chunk header file[ 12 ] = 'f'; file[ 13 ] = 'm'; file[ 14 ] = 't'; file[ 15 ] = ' '; // fmt chunk bytes file[ 16 ] = 16; file[ 17 ] = 0; file[ 18 ] = 0; file[ 19 ] = 0; // format ID file[ 20 ] = 1; file[ 21 ] = 0; // channel file[ 22 ] = 2; file[ 23 ] = 0; // sampling rate file[ 24 ] = byte( RATE ); file[ 25 ] = byte( RATE >>> 8 ); file[ 26 ] = byte( RATE >>> 16 ); file[ 27 ] = byte( RATE >>> 24 ); // byte / sec file[ 28 ] = byte( ( RATE * 4 ) ); file[ 29 ] = byte( ( RATE * 4 ) >>> 8 ); file[ 30 ] = byte( ( RATE * 4 ) >>> 16 ); file[ 31 ] = byte( ( RATE * 4 ) >>> 24 ); // block size file[ 32 ] = 4; file[ 33 ] = 0; // bit / sample file[ 34 ] = 16; file[ 35 ] = 0; // data chunk header file[ 36 ] = 'd'; file[ 37 ] = 'a'; file[ 38 ] = 't'; file[ 39 ] = 'a'; // data chunk bytes file[ 40 ] = byte( len * 4 ); file[ 41 ] = byte( len * 4 >>> 8 ); file[ 42 ] = byte( len * 4 >>> 16 ); file[ 43 ] = byte( len * 4 >>> 24 ); // data for ( int iSample = 0; iSample < len; iSample ++ ) { int l = min( max( int( _wave[ 0 ][ iSample ] * 32768.0 ), -32768 ), 32767 ); file[ 44 + iSample * 4 + 0 ] = byte( l ); file[ 44 + iSample * 4 + 1 ] = byte( l >>> 8 ); int r = min( max( int( _wave[ 1 ][ iSample ] * 32768.0 ), -32768 ), 32767 ); file[ 44 + iSample * 4 + 2 ] = byte( r ); file[ 44 + iSample * 4 + 3 ] = byte( r >>> 8 ); } // save! saveBytes( _name, file ); }

音を作る

ここからは音を作るための関数を作っていきます。

関数フォーマット

今回は、音を作る関数の基本フォーマットは以下のようにします。

float[][] synth( int _len, float _freq )

_len : 音の長さ（サンプル数）

_freq : 音の高さ（周波数）

他に必要なパラメータがあれば追加

返り値: [ 左チャンネルの信号, 右チャンネルの信号 ]

この関数の返り値を先ほどの arrayToWav の _wave の部分にまるごと投げてしまえば、作った音がそのままwavファイルとして出力されます。最高じゃん！

周波数

待てよ、この関数には周波数を直接入れなきゃいけないのか…？ 流石にそれは大変なので、MIDIノート番号を与えると周波数を返してくれる関数を作ります。 MIDIノート番号は、ピアノの各鍵盤に順番に数字を割り当てたものと解釈すればよいです。69番を440.0Hz（ラの音）とし、番号を1上げると1半音上がります。

float note( int _note ) { return pow( 2.0, ( _note - 69 ) / 12.0 ) * 440.0; }

とりあえずサイン波

とりあえず、もっともプリミティブな音の一つであるサイン波を出す関数を作ってみましょう。 sin関数を使えばサイン波が音として出力されるとても優しい世界です！最高！！

float[][] synthSin( int _len, float _freq ) { float[][] ret = new float[ 2 ][ _len ]; for ( int iSample = 0; iSample < _len; iSample ++ ) { ret[ 0 ][ iSample ] = sin( iSample * _freq / RATE * PI * 2.0 ); ret[ 1 ][ iSample ] = sin( iSample * _freq / RATE * PI * 2.0 ); } return ret; }

floatは弱い

優しい世界はそう簡単には訪れないようです…

実は、先ほどの関数、実際に出力して聴いてみると、時間が経つにつれだんだん音質が悪くなるのがわかると思います。

これ、実はfloatの精度の問題なのです。 _freq が 440.0 の場合、 iSample * _freq / RATE * PI * 2.0 は、 iSample が1増えるごとに 0.037 程度の小さな変化をしますが、これ自体は再生開始1秒程度で既に 1650 程度の大きな数となっています。浮動小数点数は大きな数の小さな変化に弱いですから、長く再生すればするほど音質がどんどん悪くなってしまいます。

ひと工夫

そこで、float型の変数が扱う数をなるべく小さく抑えるように工夫をした関数がこちらです。

float[][] synthSin( int _len, float _freq ) { float[][] ret = new float[ 2 ][ _len ]; float phase = 0.0; for ( int iSample = 0; iSample < _len; iSample ++ ) { ret[ 0 ][ iSample ] = sin( phase ); ret[ 1 ][ iSample ] = sin( phase ); phase = ( phase + _freq * PI * 2.0 / RATE ) % ( PI * 2.0 ); } return ret; }

みなさんご存知のように、 sin( x + 2.0 * PI ) と sin( x ) の出力は（数学的には）全く同じです。 そこで、sin関数の中に入れる変数を 2.0 * PI 以下に抑えられるように工夫をしました。 phase という sin 関数の中に入れるための変数を用意し、1サンプル書き込むごとに変化差分を phase に足し算していき、もし 2.0 * PI を超えてしまったら剰余を取る、という実装をしています。

この関数により正確なサイン波の出力が得られ、実際、このやり方で生成したサイン波はとても綺麗な音を奏でます。

ステレオにする

音を左右に広げることはとても重要な事です。 左右に広がっていない音は、篭った感じに聞こえ、他の音との聞き分けが非常にしづらいです。 （一方で、ベースなど、真ん中に寄せたほうが効果的に聞こえる音も存在します。ここらへんはミキシングの非常に難しい部分なのでここでは説明しません。） 先ほど作った synthSin 関数は、左右どちらとも同じ信号を出力しているため、当然左右に広がっていません。

では。どうすればサイン波を左右に広げられるか？ 答えは単純です。左右でサイン波の位相を変える。これだけです。 以下の関数では、右側のサイン波の位相を 1.0 だけずらしました。

float offset = 1.0; ret[ 0 ][ iSample ] = sin( phase ); ret[ 1 ][ iSample ] = sin( phase + offset );

また、左右で周波数を少しだけ変えると、より効果的に左右に広げることができます。 phase に相当する変数をもうひとつ用意しなければならないので面倒ではありますが…

なんと…

残念ながら、ここでクリスマスを迎えてしまいました…。 記事の長さ的にも、限られた時間でプログラミングで音作りから作曲をこなすのは少し難しかったようです。 Advent Calendarのトリとして非常に恥ずかしい結果となってしまいました…

やったこと

パーティクルだした

ラーメンたべなかった

フレームレートが低くてごめんなさい

今回やったことの一つ前の段階の作品 http://fms-cat.github.io/particleTest/

特徴

GPGPUでパーティクルの位置を計算して、大量の粉をめちゃくちゃ速く処理した

#BSoD_tokyo というハッシュタグのついたツイートを取得し、パーティクルを文字の形に表示した

音に合わせてパーティクルが動いたり大きさや色が変わったりするようにした

ポストエフェクト（グリッチや水平ブラー）をかけてかっこよくした

PCやスマホのブラウザ経由でパラメータをいじれるようにした

参考にしたやつ

http://codepen.io/soulwire/pen/JBhxs エラーが出てちゃんと動かないけど、コードをめちゃくちゃ参考にした

http://wgld.org/ WebGLのことなら 日本語で（とても重要） なんでも書いてある

システム構成

はじめてnodeでサーバサイドを使うプロジェクトをつくった ブラウザだけじゃめんどいことが簡単にできてたのしかった

nodeとChrome、nodeとスマホ間の通信には Socket.IO を使った

WebGL 部分

ぜんぶで４パス使った

pass 1 : パーティクルの位置を計算する（GPGPU箇所） フレームバッファを使ってパーティクルの位置、速度、ライフ等を計算

pass 2 : パーティクルのレンダリング pass 1で求めた座標等をもとにパーティクルをレンダリング

pass 3 : ポストエフェクトその１（グリッチ系） pass 2の結果にイケメングリッチエフェクトをかける

pass 4 : ポストエフェクトその２（水平ブラー） pass 4の結果にただの水平ブラーをかける

GPGPUあたりをもっと詳しく

浮動小数点テクスチャを用い、パーティクルの位置等のパラメータを保持する

1パーティクルあたり4ピクセルが与えられ、計12個の浮動小数を保持する：

位置xyz（ツイートの文字の座標に基づく）

速度（実態は汎用ベクトル）xyz（ランダム）

音を与えた時にどのくらい動くか（ランダム）、パーティクルの使用・未使用（0/1）、文字の形を無視する度（ランダム）

ツイートの文字のピクセルに基づいたinitialTextureをcanvas2dを用いて作成

initialTextureをpass 1のシェーダに投げて座標等を計算

実は今回はinitialTextureから座標等がすべて求まるパーティクルシステムだったため、pass 1が必要なかったという説も…

パーティクルの演出とか

パーティクルに様々なパラメータを持たせかっこよく動くようにした

こだわったのは音が出た時のパーティクルの飛びでかた 単純に１方向に飛ぶだけでは面白く無いので、飛び出る方向を時間によってx軸回転するようにした

左側が回転させていないもの、右側が回転させたもの

スマホリモコン

One Beat Performer EP演習 発表会 発表作品。 一番最初にプロジェクトとして完成させたプログラム。1拍単位で発音タイミングがシンクするので、だれでも簡単に音楽を演奏できます。2Dグラフィック付き。 元々楽器を作りたかったので、完成してとても嬉しかったです。

240x240 5月下旬にProcessingでお絵かきを始めてから、ちょくちょくここに240x240のgif画像をあげています。 FMS_Catアイコンが一番最初にポストされた場所もここ。

Bouncy Ball マウスカーソルでボールをリフティングしながら、迫り来る壁を避けるゲーム。非常に難しいです。 あとでWebに移植しよう。

Golf-ish PUK というゲームの模倣。ProcessingなのでAndroidにも移植してみました。

FaceCat Miyashita-Lab Hackathon #001 作品。 起動するとアイコンのアニメーションが表示されます。メニューボタンを押すとカメラが起動します。 Android用のProcessing APDE で実装しました。 ここからダウンロードできます。

FMS BOY P演習I 発表会 発表作品。 テーマが「道具の模倣」だったので、GAME BOYを模倣したものを作ってみました。 3Dでゲーム機本体を描画し、3種類のカセットを用意し、挿し替えて遊ぶことができます。

Visual Anarchist コマンドベースVJソフト。 以前からVJに興味があったが、VJソフトは高いし、多くは自分の要求に合ってないため（特にgifとglsl周り）、自作。 ２ウインドウの出し方がわからなかったので、画面下部に小さくコンソールを表示し、コマンド操作にすることで解決。お陰様で誰も使い方がわからないツールとなりました。

birthday2014 10月7日はFMS_Catの誕生日です。覚えてね。 初めて自主的にJavaScriptを触って作った作品。僕の2014年の誕生日プレゼントはJSだったみたいです。

ツマミ怖くない！シンセ講座 触りながら学習できるシンセ講座サイト。 シンセサイザーって難しそう！と感じている人のために、段階的にシンセの各部の機能を紹介するWebサイト。 実際に音の出る、説明内容に沿って機能を絞ったシンセを、Webサイト上で動かせるのが特徴。 最近全然更新してない。ダメだ。

pico wgld.orgを見ながらWebGLを学習して作った初期の作品。

FMS_Catのページ いい加減更新しましょう。 タイトルはワードアート。 BGMは、モダンブラウザがmidiに全く対応していないため、わざわざmp3に変換しました。

16segClock 時計。 文字を3Dで描画するときに、どうすれば楽かと考えて、16セグメントディスプレイを作ったので、時計を作った。 しばらく宮下研の時計として使われてました。SpaceNavigatorでタイマーを設定できるバージョンもあるよ

binaryWav wavファイルのバイナリをいじって再生速度などを変化させるやつ。 付属のsaw.wavを使えばGlitchMachineごっこもできるよ。 動画では逆ポーランド記法ですが、現在のバージョンは普通に数式書けます。 https://vine.co/v/O15LXHmD65L

Volume js4kintro 投稿作品。 メンガーのスポンジ改造シリーズ1。 総合数理概論IIの現象数理の先生の講義でフラクタルに興味をもってメンガーのスポンジを描いてみたときの副産物。

新年のご挨拶2015 最新技術の上にmarqueeをオーバーレイさせているところが面白いです。

formula ステップ毎の音を数式で作るシーケンサー。たのしい数式音楽。 インターフェイスを全く作りこんでいないためなかなか最悪。 下部のスライダーは上から順に、パン、音量、グライドです。 https://vine.co/v/OTZQnQ2xLYj

log Tumblr（ここ）に移行する前のブログ的なもの。 結局メンテナンスが面倒なため、tumblrに移りました。

Presenter 説明とかはこっち。 縦横中央揃えで文字が出てくるプレゼンを素早く作れるアプリ。 自分の希望に沿うプレゼンソフトがなかったため作りました。 自分用ツールのため、操作がとてもアレです。 Esc押して入力するコマンドの意味不明さが一番気に入っています。

ローグライクステルス雪合戦「雪と試験と偏差値と。」 OBJLoader ライブラリが必要です P演習II 発表会 発表作品。（他二人とチーム） テーマが「冬」だったので、雪合戦だろ〜〜〜って言って作った。 Minecraft（ぼくはやったことない）のグラフィックとRisk of Rainのゲームシステムに強く影響を受けています。

slotjs 3Dのスロットゲームを簡単に作れるライブラリ。 きりん.jp用にスロットゲームを作るつもりが、気づいたらスロットゲームを作るためのライブラリを作っていました。あれれ。 ついでにFMSスロットも作りました。

Shell 1st place at TokyoDemoFest 2015 GLSL Graphics Compo メンガーのスポンジ改造シリーズ2。 TokyoDemoFest 2015は、僕が初めて参加したデモパーティーでした。本当に良いパーティーでした！

This Is My Own Sushi !! 5th place at TokyoDemoFest 2015 GLSL Graphics Compo プラズマ + メタボール + ツイスト。 gyaboさんによる「レイマーチングで寿司を描く」レクチャーにインスパイアされて、会場で作ったもの。

soundSyncedShooter jsstg 投稿作品。 音と同期する全方位シューター。 以前から作りたいとは思い続けていたので、雑ではあるけど完成して良かったです。 Rezとis internal sectionに影響を受けています。

LiveTexture インタラクション2015 インタラクティブ発表賞（二日目） 受賞 渡邊恵太先生とやらせていただいた研究。 スマートフォン上で、センサ情報を利用してインタラクティブにテクスチャの質感を変化させるシステムを提案。 このシンポジウムを通して、「研究」の意味を学ばせていただきました。

var Ob = function( _i ){ this.v = _i; } var a = []; for( var i=0; i<5; i++ ){ a[i] = new Ob( i ); } for( var e of a ){ if( e.v == 2 ){ a.splice( a.indexOf( e ), 1 ); } e.v += 10; } // a[0].v : 10 // a[1].v : 11 // a[2].v : 3 // a[3].v : 14

最初に: Tumblr、電車内で更新できるの最高ですね。

2/21,22に、飯田橋 アインスティチュ・フランセ 東京 にて、TokyoDemoFest 2015というデモパーティーに行ってきました。 デモシーンを知らない人向けに簡単に説明すると、デモシーンは80年代ころより始まった、ヨーロッパを中心とした(主にゲームカルチャー周辺における)リアルタイムCG文化を指します。また、この文化より生まれたリアルタイムCG作品をデモと呼びます。 そして、シーン内での所謂meet-upやオフ会的なものをデモパーティーと呼びます。デモパーティーではコンポ(発表会)が開催され、デモシーナーはこれに向けてデモを制作します。 デモシーン全体の紹介としては、この動画が大変参考になります。90分近くの動画ですが、CGやデジタルアートに興味のある人にはぜひ通しで見ていただきたいです。 http://youtu.be/iRkZcTg1JWU

デモシーンに触れ始めたのが上の動画を見た去年春頃だったので、当然TokyoDemoFestへの参加は初でした。 オーガナイザーの皆様や、wgld.org管理人のdoxasさんなどと初めて出会いましたが、どなたもとてもフレンドリーでした。 僕もこの日に向けて、GLSLというプログラミング言語を用いたグラフィクスを1-2週間かけて制作していきました。 また、現地でのgyaboさんによるレイマーチング(GLSLのみを用いて3Dのシーンを描画する手法)で寿司を書くセミナーにインスパイアされて、ネタとして寿司のグラフィクスもパーティーコーディングしました(とても楽しかったです)。 また、東京大学講師の蜂須賀恵也先生による招待セミナーは、元々レイトレーシングの知識がなかったためかなり難しかったですが、スタックを用いない木構造や、インターネットの掲示版に匿名で投稿された謎の擬似乱数生成関数など、非常に面白い話ばかりでした。 そして、コンポに提出された作品はパーティー参加者によってVoteされ順位がつくのですが、僕が作った作品(寿司ではない方)でなんと優勝してしまいました！！

JavaScriptで簡単にスロットゲームが作れるライブラリ slot.js を作りました。 元々、 きりん.jp 用にスロットゲームを作るという話だったのですが、何故かライブラリを作り始めていました。 今後、演出用の小道具なども実装できれば面白いなと思います。

https://github.com/FMS-Cat/slotjs

Problem: 画像を用いてパーティクルを表示させようとした時に、奥のパーティクルがうまく表示できないSolution: 視線とパーティクルの位置ベクトルの内積順にパーティクルの配列をソートし、順番に表示させるようにした #ProblemAndSolution

— FMS_Cat (@FMS_Cat) January 18, 2015

Problem: Web Audioにおいて、なぜかコンテクストから発されたすべての音が消えてしまう現象Solution: NaNを含むbufferをbufferSourceから発声するとまずいらしい。NaNが出ないようなんとか処理した#ProblemAndSolution

— FMS_Cat (@FMS_Cat) January 18, 2015

Problem: <script>タグ内でhoge = '</script>';とすると大変なことになる。Solution: hoge = '</scr'+'ipt>';#ProblemAndSolution

— FMS_Cat (@FMS_Cat) January 21, 2015

Problem: JavaScriptでBackspaceキーを使おうとしたら、ブラウザの機能である「戻る」が動作してしまったSolution: event.preventDefault(); (3846先輩ありがとうございました！)#ProblemAndSolution

— FMS_Cat (@FMS_Cat) January 21, 2015

Problem: JavaScriptにおいて、i = 10のとき、iと(i+16)%16が一致しないSolution: i+16 = 1016となっていた（iが文字列型だった）。(Number(i)+16)%16として解決した#ProblemAndSolution

— FMS_Cat (@FMS_Cat) January 25, 2015

Problem: localhostでWebページのデバッグをしている時、Chromeの更新ボタンを長押ししてもキャッシュを消して再読み込みできないSolution: 開発者ツール（コンソール）を出していないとメニューが出ない#ProblemAndSolution