jsPsychとp5jsで恒常法（timeline variableを使う方法）
目的
jspsych の timeline 上で timeline_variables を使って複数の刺激条件をランダムに提示、回答してもらう。
p5jsの中からjsPsych の機能にアクセスする
jsPsych.timelineVariable()を使います。
現在のtimeline_variableを参照できるので、p5jsのsetup、drawの中からアクセスできる。
他にも方法はあるはず（plugin.infoのparametersでバインドできると思う）。
変数の保存（データへの書き出し）は別途処理する必要がある。
プログラム例（jsPsych 6.3）
「 p5js 画面」と「回答画面」を、実験刺激の条件を変えてランダムに提示する実験
code:javascript
let myp5;
// p5 という名前のプラグインとして p5js を動かすブロック
jsPsych.plugins'p5' = (function(){ let plugin = {};
let x;
plugin.info = {
name: 'p5',
parameters: {
// パラメータが必要ならここで指定
}
}
plugin.trial = function(display_element, trial){
let end_trial = function () {
jsPsych.pluginAPI.clearAllTimeouts();
display_element.innerHTML = "";
jsPsych.finishTrial();
myp5.remove();
};
if (trial.trial_duration !== null) {
jsPsych.pluginAPI.setTimeout(function () {
end_trial();
}, trial.trial_duration);
};
let sketch = function (p) {
p.setup = function () {
p.createCanvas(400, 400);
// ここで p5js が呼び出される毎に switch 関数で、変数 type に今何が
// 入っているのかを参照して、「 0 なら 50」「 1 なら 100 」「 ２ なら 150 」
// を変数 x に代入する
//
// switch-caseを使わずに
// > x = 50*(1+jsPsych.timelineVariable("type"));
// でもよい。
switch (jsPsych.timelineVariable("type")) {
case 0:
x = 50;
break;
case 1:
x = 100;
break;
case 2:
x = 150;
break;
};
};
p.draw = function () {
// timeline variablesに対応して背景色を変える
p.background(x)
};
};
myp5 = new p5(sketch, display_element);
};
return plugin;
})();
// p5画面
let p5_trial = {
type: "p5",
trial_duration: 1000,
}
// 回答画面
let answer = {
type: 'survey-text',
questions: [
{ prompt: "何色？", placeholder: "見えた色を答えてください", name: 'Color' }
],
button_label: '次へ',
};
// タイムライン
let trial_block = {
// p5がp5jsを使うプラグイン
// answerはjsPsych付属のプラグイン
// 0~2 の配列をシャッフル、ループに合わせて type に配列を順番に代入
return { type: d };
}),
repetitions: 3,
randomize_order: true,
};
// timeline
jsPsych.init({
});
執筆：喜田（2021年10月13日）