How to generate different stimulus parameters on every trial repetition?

[prashantig25]

Dear All,

In my experiment, participants are presented with two Gabor patches in a trial. I have a few stimulus parameters such as the contrast of the patches, the correct key_press that are generated on_start of the display of the patches. I also have some crucial data such as the correct response on the trial and whether a participant missed a trial or not that gets start on_finish of the display of the patches. There are 8 conditions in my experiment and the stimulus parameters keep changing. Currently, I just repeat the code 8 times so that the different parameters are generated. I am looking for a way in which I can use a function once so that the patches are generated with different stimulus parameters.
Here is an example of the code that generates the patches:

//generates 2 gabors left and right to the fixation

function gabor(c) { 
    var context = c.getContext("2d");
    const my_gradient = context.createLinearGradient(0,0,200,0); 
    const my_gradient1 = context.createLinearGradient(225,0,425,0); 
    const bands = 10; const colors = ["#000", "#FFF"];
    const stops = bands * colors.length; //number of layers that you want to color in the patch
    var pos = 0; var pos1 = 0;
    while (pos <= stops) { //colors each band of the patch with white and black.
        my_gradient1.addColorStop(pos / stops, colors[pos % colors.length]);
        pos++;
    }
    while (pos1 <= stops) {
        my_gradient.addColorStop(pos1 / stops, colors[pos1 % colors.length]);
        pos1++;
    }
    context.fillStyle = my_gradient; //gradients for left and right Gabor
    context.filter = 'contrast('+ jsPsych.currentTrial().contrast +')' //contrast level randomly generated after every trial
    context.fillRect(100,200,100,100);
    context.fillStyle = my_gradient1;
    context.filter = 'contrast('+ jsPsych.currentTrial().contrast1+')'
    context.fillRect(325,200,100,100);
    context.stroke()
    context.moveTo(240, 250); context.lineTo(280, 250); //horizontal line
    context.moveTo(260, 230); context.lineTo(260, 270); //vertical line
    context.filter = 'contrast(1)'; context.lineWidth = 3;
    context.stroke();
}

// The patches are used as shown below to be generated in the trial. This is one example out of the 8 conditions.

var s0_r1_high90 = {
        type: 'canvas-keyboard-response',
        on_start: function(s0_r1_high90){
            s0_r1_high90.index1 = index1
            s0_r1_high90.reward_r1_90 = a0_90[jsPsych.currentTrial().index1]
            s0_r1_high90.difference = randbet(0,0.08)
            s0_r1_high90.contrast =  0.5 - jsPsych.currentTrial().difference;
            s0_r1_high90.contrast1 = 0.5 + jsPsych.currentTrial().difference;
        },
        stimulus: gabor,
        data: {condition: 'HL', state: '0', reward: '1', prob: '90_10'},
        choices: keys, trial_duration: duration, response_ends_trial: false,
        on_finish: function (data) {
            if (data.key_press === jsPsych.currentTrial().reward_r1_90) {
                data.correct = true;
            } else if (data.key_press === null) {
                missed.push(1),
                missed_fb.push(jsPsych.currentTrial().reward_r1_90),
                missed_con.push(jsPsych.currentTrial().contrast),
                missed_con1.push(jsPsych.currentTrial().contrast1)
            }
            else {
                data.correct = false;
            }
            data.corr_resp = jsPsych.currentTrial().reward_r1_90
            data.con = jsPsych.currentTrial().contrast
            data.con1 = jsPsych.currentTrial().contrast1
            data.stim = missed.length
            trialcounter = trialcounter + 3
            data.tcount = trialcounter
            index1 = index1 + 1
            data.x = index1
        },
    };

// Here is another example with different stimulus parameters that generates the patches for another condition

    var s1_r2_high90 = {
        type: 'canvas-keyboard-response',
        on_start: function(s1_r2_high90){
            s1_r2_high90.index = index
            s1_r2_high90.reward_r2_90 = a1_90[jsPsych.currentTrial().index]
            s1_r2_high90.difference = randbet(0,0.08)
            s1_r2_high90.contrast1 =  0.5 - jsPsych.currentTrial().difference;
            s1_r2_high90.contrast = 0.5 + jsPsych.currentTrial().difference;
        },
        stimulus: gabor,
        data: {condition: 'HL', state: '1', reward: '2', prob: '10_90'},
        choices: keys, trial_duration: duration, response_ends_trial: false,
        on_finish: function (data) {
            if (data.key_press === jsPsych.currentTrial().reward_r2_90) {
                data.correct = true;
            } else if (data.key_press === null) {
                missed.push(1),
                missed_fb.push(jsPsych.currentTrial().reward_r2_90),
                missed_con.push(jsPsych.currentTrial().contrast),
                missed_con1.push(jsPsych.currentTrial().contrast1)
            }
            else {
                data.correct = false;
            }
            data.corr_resp = jsPsych.currentTrial().reward_r2_90
            data.con = jsPsych.currentTrial().contrast
            data.con1 = jsPsych.currentTrial().contrast1
            data.stim = missed.length
            trialcounter = trialcounter + 3
            data.tcount = trialcounter
            index = index + 1
            data.x = index
        },
    };

Right now, I am just repeating this in the code. This makes the code way too long. Is there a way to not repeat it and by writing a function that will generate the patches with different stimulus parameters?
Any help is highly appreciated!
Thank you,
Prashanti

[becky-gilbert]

Hi Prashanti. Sorry for the delay getting back to you.
What I would do here is add some parameters to the gabor function so that it is able to draw the stimuli for all of your conditions, depending on the values of these parameters. I don't fully understand what you're doing here, so I may be wrong, but I think the easiest way to do this is to pass it all of the parameters that you are currently setting in the trial's on_start function, something like this:

function gabor(c, index1, reward, difference, contrast, contrast1) { 
  \\ ...

(BTW you can see more examples of canvas drawing functions with additional parameters in the canvas-* example files, such as the jspsych-canvas-button-response.html file.)
Then, inside the gabor function, instead of using e.g. jsPsych.currentTrial().contrast, you can just use contrast, which is the value that was passed into the function.
In the trial definition, you should be able to get rid of everything in the on_start function. And in the stimulus function, you'll want to call the gabor function with the c argument (which is automatically passed in from the plugin) as well as all of your other parameter values for this trial. Because you now need to call the gabor function with additional parameters, you can't just use the function name, so you'll have to wrap it inside of an anonymous function:

var gabor_trial = {
  stimulus: function(c) {
    // call the gabor function with the canvas context (c, passed in automatically from the plugin), 
    // and all of the other trial-specific parameters that affect the way that the stimulus is drawn
    gabor(c, jsPsych.timelineVariable('index1'), jsPsych.timelineVariable('reward'), jsPsych.timelineVariable('difference'), jsPsych.timelineVariable('contrast'), jsPsych.timelineVariable('contrast1'));
  },
  on_finish: function(data){
    // merge all timeline variables for this trial into the trial data
    Object.assign(data, jsPsych.allTimelineVariables());
  },
  // other parameters ...
};

---

Note: the above should work if you're using jsPsych v6.3.1+. If you're using an earlier version, then you will need to add , true to the jsPsych.timelineVariable function calls inside of the stimulus function, e.g.

gabor(c, jsPsych.timelineVariable('index1', true), ... etc. )

And the jsPsych.allTimelineVariables function won't work, so instead you can add the timeline variables to the data like this:

data: {index1: jsPsych.timelineVariable('index1'), reward: jsPsych.timelineVariable('reward'), ... etc. }

---

Finally, you can set up all your trials using timeline variables, so that the trial information in the timeline_variables array contains all of the parameters that can change across trials. Something like this:

var trial_info = [
  {index1: 1, reward: 2, difference: 3, contrast: 4, contrast1: 5, condition: 'condition_1'},
  {index1: 6, reward: 7, difference: 8, contrast: 9, contrast1: 10, condition: 'condition_2'},
  // ... etc.
]

This means you only need to define a single gabor trial, which you can use for all of your different conditions.

var gabor_procedure = {
  timeline: [gabor_trial],
  timeline_variables: trial_info
};

I hope that makes sense and works for you? Please let us know if I've misunderstood your problem or if you have any further questions.