1. ピクセル単位で図形を描画する

Mattlab + PTBの組み合わせでは,図形をピクセル単位で配列として作成し,それをテクスチャーとして保存し,描画するという方法が用いられていました。Canvasでは,ImageDataオブジェクトとして作成し,保存をすることで同様の機能を実現することができます。

ピクセル単位の配列を図形に変換できれば,ガボール刺激やランダムノイズなど,心理物理学の実験で定番の視覚刺激を作ることが可能になりそうです。

ここでは,「空のImageDataオブジェクトの作成」,「ImageDataオブジェクトにピクセル単位で描画」,「画面上に表示」の3段階について説明をしていきます。

2.Scripts内でループして描画する

「Script」に以下の関数を描き,その中に描画に関するcanvasの関数を追加することで「Content」に刺激を描画することが出来ます。インターネット上の「canvas」に関するチュートリアルではcanvasをHTMLの中に埋め込む部分から説明がされていると思いますが,「lab.js」は,自動的にcanvasを作ってくれていますので,新たに作る必要はありません。他のチュートリアルの情報を抜き出す際は,「ctx」または「context」で始まる関数部分に注目してください。

this.options.renderFunction = (t, canvas, ctx, obj) => {
  // このレンダー関数を使うことでcanvasに図形を描くことが出来ます。
  // t: timestamp この関数が呼び出された時刻
  // canvas: canvasオブジェクトへのレファレンス
  // ctx: 描画するコンテンツの情報(一番重要)
  // obj: 現在描画されているcanvasへの参照
}

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/01902498-609e-4932-9179-9af4f34193d9/Untitled.png

この関数「renderFunction」の中でとりあえず重要になるのは「ctx」の部分です。ここが描画に関連します。もう一つ,今後重要になってくるのが「t」の部分です。図形を描画した時刻の情報を取ってくることができます。

次は,レンダー関数内でフレームごとに画面の書き換えをするために以下のコマンドを追加します。ブラウザは60FPSですので,1秒間に60回画面の書き換えが行われます。

this.options.renderFunction = (t, canvas, ctx, obj) => {
  // このレンダー関数を使うことでcanvasに図形を描くことが出来ます。
  // t: timestamp この関数が呼び出された時刻
  // canvas: canvasオブジェクトへのレファレンス
  // ctx: 描画するコンテンツの情報(一番重要)
  // obj: 現在描画されているcanvasへの参照

  this.queueAnimationFrame();
}

これで準備が整いました。

3. 空のImageDataオブジェクトの作成

以下のcreateImageData メソッドで空のImageDataオブジェクトを作成します。以下のHPを参考にさせていただきました。

HTML5 canvas createImageData Method