Update canvas using keypresses while canvas is actively being displayed

[neuroalexander]

Hi there,

Is there a way to dynamically update the size and contents of a canvas via participant keypresses while the canvas is actively being displayed? My experiment requires participants to reconstruct the size and spatial frequency of a previously-presented grating by pressing the arrow keys to modulate a grating on screen til it's the appropriate size and/or the appropriate spatial frequency. Is there a way to use the "reconstruction" plugin to modulate canvas size and contents, or is there a JSPsych plugin that can better handle this purpose?

Here's the function I use to draw the static gratings as stimuli in the "canvas-keyboard-response" plugin. I'd like the participant to be able to modulate canvas.width, canvas.height, and the cyclefactor variable live.

//Initial conditions
var cyclefactor = 1
var rotationangle = 0
var canvas = document.getElementById("canvas");

function drawGrating(canvas) {
//Make centred canvas with circular mask
var ctx = canvas.getContext("2d");
ctx.translate(canvas.width/2,canvas.height/2)
ctx.rotate(rotationangle*Math.PI/180)
ctx.beginPath()
ctx.arc(0, 0, canvas.width/2, 0, 2*Math.PI, false)
ctx.closePath()
ctx.clip()
// Create a grating pattern using a cosine function
for (i = 0; i<canvas.width; i++) {
    //Convert pixel position into x-value to sub into cosine equation
    var j = (i*2*Math.PI)/canvas.width;
    //Get output of cos function for given x value
    var k = ((Math.cos(cyclefactor*j))+1)/2 //cyclefactor integer determines spatial frequency
    ctx.beginPath()
    ctx.moveTo(i-canvas.width/2,-canvas.height/2)
    ctx.strokeStyle = 'rgb(' +k*255+ ',' +k*255+ ',' +k*255+ ')'
    ctx.lineTo(i-canvas.width/2,canvas.height/2)
    ctx.lineWidth = 1
    ctx.stroke()
    }
}

I'm pretty new to JSPsych and JavaScript in general, please forgive me if there's an obvious solution here. Any help is much appreciated.

[jodeleeuw]

I think you'll need to modify a plugin file to be able to do this in a reasonable way. (There are possibly ways you could do it with a loop_function on a timeline and dynamic parameters, but it would create a very weird data set with lots of rows per trial.)

My approach would be to start with the canvas-keyboard-response plugin and then borrow code from the reconstruction plugin to add the modification part of the task. This is the part of the code that's most relevant:

jsPsych/plugins/jspsych-reconstruction.js

Lines 63 to 94 in 66c8452

	var param = trial.starting_value;
	// set-up key listeners
	var after_response = function(info) {
	//console.log('fire');
	var key_i = (typeof trial.key_increase == 'string') ? jsPsych.pluginAPI.convertKeyCharacterToKeyCode(trial.key_increase) : trial.key_increase;
	var key_d = (typeof trial.key_decrease == 'string') ? jsPsych.pluginAPI.convertKeyCharacterToKeyCode(trial.key_decrease) : trial.key_decrease;
	// get new param value
	if (info.key == key_i) {
	param = param + trial.step_size;
	} else if (info.key == key_d) {
	param = param - trial.step_size;
	}
	param = Math.max(Math.min(1, param), 0);
	// refresh the display
	draw(param);
	}
	// listen for responses
	var key_listener = jsPsych.pluginAPI.getKeyboardResponse({
	callback_function: after_response,
	valid_responses: [trial.key_increase, trial.key_decrease],
	rt_method: 'performance',
	persist: true,
	allow_held_key: true
	});
	// draw first iteration
	draw(param);

Lines 86-92 create the key listener, and lines 66-83 define the function that processes the key events.