kurokida / jspsych-psychophysics

A jsPsych plugin for psychophysics
https://kurokida.github.io/jspsych-psychophysics/
MIT License
51 stars 13 forks source link

How to use origin_center: true with a manual object property? #17

Closed prashantig25 closed 3 years ago

prashantig25 commented 3 years ago

I would like to set the origin to the center of the screen. But I would like to draw a stimulus using the manual property. However, I am unsure how to set the x,y coordinates of stimulus in the drawFunc so that the image appears at the center of the screen. Should the x,y coordinates of stimulus in the drawFunc be same as before or should they change relative to the new origin at the center of the screen? Because when I do that, the stimulus appears at the top left corner of the screen.

var fixation = { obj_type: 'manual', startX: 0, // location of the cross's center in the canvas startY: 0, origin_center: true, show_start_time: 0, motion_end_time: 2000, line_color: '#000000',// You can use the HTML color name instead of the HEX color. drawFunc() { context = jsPsych.currentTrial().context; context.beginPath(); context.moveTo(752.5, 380); //horizontal line context.lineTo(797.5, 380); context.moveTo(775, 355); //vertical line context.lineTo(775, 405); context.filter = 'contrast(1)'; context.lineWidth = 5; context.stroke(); } }

kurokida commented 3 years ago

This explanation was something that was not explained on my website. I apologize for that. You need not to specify startX/Y and origin_center when you use the drawFunc. Instead, you can use jsPsych.currentTrial().centerX as follows:

        drawFunc() {
            context = jsPsych.currentTrial().context;
            const cx = jsPsych.currentTrial().centerX;
            const cy = jsPsych.currentTrial().centerY;
            const line_length = 100;

            context.beginPath();
            context.moveTo(cx-line_length/2, cy); //horizontal line
            context.lineTo(cx+line_length/2, cy);
            context.moveTo(cx, cy-line_length/2); //vertical line
            context.lineTo(cx, cy+line_length/2);

            context.filter = 'contrast(1)';
            context.lineWidth = 5;
            context.stroke();
        }

Please use the latest jspsych-psychophysics plugin.

prashantig25 commented 3 years ago

Okay, thank you!