The psychophysics plugin supported the presentation of gabor patches

[kurokida]

Dear jsPsych users,

You can present gabor patches using the jspsych-psychophysics plugin.

The calculation method for drawing is almost the same as the one used by the Psychtoolbox, although my plugin doesn’t use the procedural texture mapping and WebGL. I also have referenced the gaborgen-js code.

You can choose either the numeric.js or the math.js for the calculation library. The numeric.js is considerably faster than the math.js, but the latter is being developed more aggressively than the former. The default is the numeric.js.

There is still the issue of display calibration. Unfortunately, my plugin does not provide a solution to this problem.

Demonstration

• draw-gabor-patches.html
• drifting-gabor.html

[pjkohler]

Are there any plans to make the jspsych-psychophysics plugin an official part of jsPsych?

[kurokida]

Thank you for your valuable comments.
I made a pull request #1322, and then it was added to the 7.1 milestone of jsPsych.

[pjkohler]

Great to hear. I just made an Ebbinghaus effect demo for our https://github.com/jspsych/experiment-demos repository, which we discuss here (if you are interested). I haven't added the demo to the repo yet, but will soon.

[pjkohler]

Is there a way to add multiple objects that only vary on one or two parameters? What I do currently is make a for loop, make a copy of a template object, add the desired parameters for that iteration, and then add it to a list that will be given as "stimuli" to the plugin, but that is a little clunky. It would be great to be able to say: "I want 10 circles, this color, but with varying x and y positions and radii", say.

[kurokida]

I understand exactly what you are saying, but unfortunately I don't know of any effective way to do it.

In fact, I have created the Ebbinghaus illusion using jspsych-psychophysics plugin before.
In that time, I made a function (make_surrounding_circle in the bellow example code) to reduce the effort. This idea is probably identical to yours.
The snippet of this program is as follows.

const cross = {
            obj_type: 'cross',        
            startX: 'center', // location of the cross's center in the canvas
            startY: 'center',
            line_length: 50,
            line_color: 'black', // You can use the HTML color name instead of the HEX color.
        }

function make_surrounding_circle(LR, radius, angle, virtual_radius){
            if (LR === 'left'){
                cx = leftX
                cy = leftY
            } else {
                cx = rightX
                cy = rightY
            }
        
            return {
                obj_type: 'circle',
                startX: cx + virtual_radius * Math.cos(deg2rad(angle)),
                startY: cy + virtual_radius * Math.sin(deg2rad(angle)),
                radius: radius,
                line_color: 'white',
                fill_color: 'white',
                line_width: 2,
                origin_center: true,
                show_start_time: 1000,
            };
        }
stimuli: function(){
                const right_radius = 20;
                const left_radius = 20;

                const left_center_circle = {
                    obj_type: 'circle',
                    startX: leftX,
                    startY: leftY,
                    radius: left_radius,
                    line_color: 'white',
                    fill_color: 'white',
                    line_width: 2,
                    origin_center: true,
                    show_start_time: 1000,
                };

                const right_center_circle = {
                    obj_type: 'circle',
                    startX: rightX,
                    startY: rightY,
                    radius: right_radius,
                    line_color: 'white',
                    fill_color: 'white',
                    line_width: 2,
                    origin_center: true,
                    show_start_time: 1000,
                };

                return [
                    cross,
                    left_center_circle, 
                    right_center_circle,
                    make_surrounding_circle('left', 10, 0, 60),
                    make_surrounding_circle('left', 10, 45, 60),
                    make_surrounding_circle('left', 10, 45*2, 60),
                    make_surrounding_circle('left', 10, 45*3, 60),
                    make_surrounding_circle('left', 10, 45*4, 60),
                    make_surrounding_circle('left', 10, 45*5, 60),
                    make_surrounding_circle('left', 10, 45*6, 60),
                    make_surrounding_circle('left', 10, 45*7, 60),
                    make_surrounding_circle('right', 40, 0, 100),
                    make_surrounding_circle('right', 40, 60, 100),
                    make_surrounding_circle('right', 40, 60*2, 100),
                    make_surrounding_circle('right', 40, 60*3, 100),
                    make_surrounding_circle('right', 40, 60*4, 100),
                    make_surrounding_circle('right', 40, 60*5, 100)
                ]
            },

[pjkohler]

pretty similar, yes.

[pjkohler]

I'll give you a heads up once my version is up on the repo, you can give your feedback.